Adding a custom TextBox when setting SelectBox-value


Im customizing the BPMN.IO properties-panel.
When i select a servicetask to be executed external, the interface reacts and allows me to select a topic. This event is controlled from:

ImplementationType.js --> Set

This results in firing:


Here, I’ve changed the topic-textbox to a selectbox to limit it to a specific set of options.:

 var topicEntry = entryFactory.selectBox({

        id: 'externalTopic',
        label: 'Topic',
        selectOptions: [
            {name: 'Runscript', value: 'Runscript'},
            {name: 'Update', value: 'Update'},
            {name: 'Servicetask', value: 'Servicetask'}
        modelProperty: 'externalTopic',

        get: function (element, node) {
            var bo = getBusinessObject(element);
            return {externalTopic: bo.get('camunda:topic')};

        set: function (element, values, node) {
            var bo = getBusinessObject(element);
            return cmdHelper.updateBusinessObject(element, bo, {
                'camunda:topic': values.externalTopic

Now, when i select one of these options, i need the interface to react again to show another textbox below it.
I need to edit the set-function to something similar to what happens in selecting the “External”-option.
But, I’m having a hard time achieving this, and i would love some help!

cheers, R3vlyn

1 Like

I also experience some difficulty customizing this particular part. Anything found yet?

Anyone able to help?

In ServiceTaskDelegateProps the topic entry is added to the group of entries. You’ve already modified this so it’s only about checking out how this entry is added to the group of entries depending on the selected option in the implementation field. You can simply repeat that behavior for your text input.

Took some time, but i managed to navigate through the whole thing and repeat this behaviour! Thanks

1 Like