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

Hi,

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 = 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 values.name !== 'undefined' && values.name !== '') {
                newObjectList.push(bpmnFactory.create('bpmn:InputTask', {
                    text: values.name
                }));
            }

            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));


            group.entries.push(datasourceEntry);
            group.entries.push(datasourceDescription);
            group.entries.push(datasourceId);
            group.entries.push(datasourceFilePath);
            group.entries.push(datasourceFileType);

        }
    }


};

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: https://github.com/bpmn-io/bpmn-js-example-model-extension

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?