JointJS how to dynamically add options to the inspector according to a user input?

Question

'bpmn.Gateway': {
    NumberofTrigger : {
        type: 'select',
        options: [
            { value: '0', content: '0' },
            { value: '1', content: '1' },
            { value: '2', content: '2' },
            { value: '3', content: '3' }
        ],
        label: 'Number of Trigger',
        group: 'general',
        index: 1
    },

    ComparisonValue : {
        type: 'text',
        label: 'Comparison Value',
        group: 'general',
        index: 2
    },
    TriggerLogic : {
        type: 'select',
        options: ["Start With",'Contains','End With','Equals','Smaller Than','Greater Than','Not Equals','REGEX','Web Service'],
        label: 'Trigger Logic',
        group: 'general',   
        index: 1
    }
},

After I drag a shape out, the inspector table will be shown and the options will be in the NumberofTrigger select (in order to select how many triggers option to be selected) and, according to the selected value, the number of set of TriggerLogic and ComparisonValue will be displayed.

Since I did not find a way to solve this by reading the source code, I would like to know how can this be accomplished.

Answer 1

If I got the question right and you have a finite amount of triggers to be selected, I believe you can simply show more fields by using when expressions with "greater than equal" comparisons (i.e. gte primitives), example:

'bpmn.Gateway': {
  inputs: {
    attrs: {
      NumberofTrigger : {
        type: 'select',
        options: [
          { value: '0', content: '0' },
          { value: '1', content: '1' },
          { value: '2', content: '2' },
          { value: '3', content: '3' }
        ],
        label: 'Number of Trigger',
        group: 'general',
        index: 1
      },

      ComparisonValue0 : {
        when: { gte: {'attrs/NumberofTrigger': '0'} },
        type: 'text',
        label: 'First Comparison Value',
        // other properties
      },
      TriggerLogic0 : {
        when: { gte: {'attrs/NumberofTrigger': '0'} },
        type: 'select',
        label: 'First Trigger Logic',
        // other properties
      },

      ComparisonValue1 : {
        when: { gte: {'attrs/NumberofTrigger': '1'} },
        type: 'text',
        label: 'Second Comparison Value',
        // other properties
      },
      TriggerLogic1 : {
        when: { gte: {'attrs/NumberofTrigger': '1'} },
        type: 'select',
        label: 'Second Trigger Logic',
        // other properties
      },

      ComparisonValue2 : {
        when: { gte: {'attrs/NumberofTrigger': '2'} },
        type: 'text',
        label: 'Third Comparison Value',
        // other properties
      },
      TriggerLogic2 : {
        when: { gte: {'attrs/NumberofTrigger': '2'} },
        type: 'select',
        label: 'Third Trigger Logic',
        // other properties
      },

      ComparisonValue3 : {
        when: { gte: {'attrs/NumberofTrigger': '3'} },
        type: 'text',
        label: 'Fourth Comparison Value',
        // other properties
      },
      TriggerLogic3 : {
        when: { gte: {'attrs/NumberofTrigger': '3'} },
        type: 'select',
        label: 'Fourth Trigger Logic',
        // other properties
      },
    }
  }
}

This is the main purpose of when according to the documentation:

When an expression is evaluated to false (condition is not met) the input using this when clause will be hidden. Otherwise, this input will be shown.