Getter setter not working for Custom Task type, returns incorrect businessObject/ModdleElement


I am using a custom task type “bpmn:InputTask”. Now when user taps on InputTask element on Modeler, I display custom properties on property panel. This contain a selectbox with list of values, when user selects any one value I need to fill up dependent text boxes of the form.

The problem I am facing is with my custom InputProps.js file. I do not know how to set and get value of moddle. Accordingly I need to fill in selectbox and textboxes following it. Once I have correct businessObject, I should be able to make it work. But the business object I fetch does not have all the properties which I set for InputTask in bpmn.json. All that I get is:

ModdleElement {$type: "bpmn:InputTask", id: "Task_1g35y9c", documentation: Array(0), properties: Array(0), resources: Array(0), …}$type: "bpmn:InputTask"default: undefineddi: ModdleElement {$type: "bpmndi:BPMNShape", bounds: ModdleElement, id: "InputTask_1g2e4pj_di", $attrs: {…}, $parent: ModdleElement, …}documentation: []id: "Task_1g35y9c"name: undefinedproperties: []resources: []$attrs: {}$parent: ModdleElement {$type: "bpmn:Process", id: "Process_1", isExecutable: false, flowElements: Array(3), documentation: Array(0), …}boundaryEventRefs: []categoryValueRef: []extensionDefinitions: []incoming: [ModdleElement]incomingConversationLinks: []lanes: []outgoingConversationLinks: []__proto__: Base$1

this does not have custom properties I created like datasourcename, datasourceid etc.

Below is some part of my code written in InputProps.js

'use strict';

var entryFactory = require('../../../factory/EntryFactory'),
    cmdHelper = require('../../../helper/CmdHelper'),
    // bpmnFactory = require('bpmn-js/lib/features/modeling/BpmnFactory');

    ModelUtil = require('bpmn-js/lib/util/ModelUtil'),
    is =,
    getBusinessObject = ModelUtil.getBusinessObject;
module.exports = function(group, element, bpmnFactory, translate, selectOptions) {

    var getValue = function(businessObject) {
        return function(element) {
            var datasources = businessObject && businessObject.get('datasources'),
                text = (datasources && datasources.length > 0) ? datasources[0].text : '';

            return { datasources: text };

    var setValue = function(businessObject) {
        return function(element, values) {
            var newObjectList = [];

            if (typeof !== 'undefined' && !== '') {
                newObjectList.push(bpmnFactory.create('bpmn:InputTask', {

            return cmdHelper.setList(element, businessObject, 'datasources', newObjectList);

    var processRef;

    // Process Documentation when having a Collaboration Diagram
    if (is(element, 'bpmn:InputTask')) {

        processRef = getBusinessObject(element);
        // do not show for collapsed Pools/Participants
        if (processRef) {

            var datasourceEntry = entryFactory.selectBox({
                id: "datasourceSelect",
                label: "Datasource Name",
                modelProperty: "name",
                selectOptions: selectOptions
            var datasourceDescription = entryFactory.textBox({
                id: "datasourceDescription",
                label: translate("Description"),
                modelProperty: "description",
                editable: false,

            var datasourceId = entryFactory.textField({
                id: "datasourceId",
                label: translate("ID"),
                modelProperty: "datasourceid",
                disabled: function() {
                    return true;
            var datasourceFilePath = entryFactory.textField({
                id: "datasourceFilepath",
                label: translate("File path"),
                modelProperty: "filepath",
                disabled: function() {
                    return true;
            var datasourceFileType = entryFactory.textField({
                id: "datasourceFileType",
                label: translate("File Type"),
                modelProperty: "type",
                disabled: function() {
                    return true;
            datasourceEntry.set = setValue(ModelUtil.getBusinessObject(element));

            datasourceEntry.get = getValue(ModelUtil.getBusinessObject(element));




Sorry I cannoi put everything on Github , please help in getting this working for me. My understanding is , there is something wrong I am doing in getValue and setValue.

Any clue please, I am in urgent need for this solution. Just a little idea will be of great help.

Did you create a model extension for your custom element?

Hi, Yes I did that. Created a custom descriptor, and also updated bpmn.json to havethe properties but I do not understand how to use it. Also I need to fill in text boxes based on select box selection and add those properties to bpmn xml, please suggest what can be done.

Have you checked out this example:

Yes I did. I am still trying to find some workaround, and partially it is working. I have these questions though:

Is there a way to get Selected index from selectbox? This maps to BPMN object in XML, bpmn:InputTask and I do get its value in name property like:

<bpmn:inputTask id="Task_09b4zu1" name="Datasource_123">

Now once this is selected, I want to change the value shown in subsequent text boxes and text fields and that is why I need to get selected index.

I am using a text box entryFactory.textBox , but the issue is if I set editable: false for this, I am also not able to set any value via set: get;, even if this has editable; false, I should be able to set value via code logic right? Also how to add this value in bpmn xml. so that I get something like this:

`<bpmn:inputTask id="Task_09b4zu1" name="Datasource_123" description="value in the textbox1" type="value in textfield2">`

If I am able to solve this, I am hoping I will be quite close to my final solution. Please help with this.

I figured out everything, thanks :slight_smile:

That’s great news! Do you mind sharing your solution?