Change task name input type

Developers Modeler
#1

Hi guys,

I’m trying to find some way to change in the General tab, the task name input type, I wanna set a dropdown there.

And in task svg too. When the user clicks in the task, instead of display a text input, need to display a dropdown input. How can I do that?

Thanks!

#2

Hi!

I’m trying to find some way to change in the General tab, the task name input type, I wanna set a dropdown there.

You can integrate a selectBox for a property, cf. this example

You will have to update the name props for a task element then.

And in task svg too. When the user clicks in the task, instead of display a text input, need to display a dropdown input. How can I do that?

This is not easily doable. We’re using diagram-js-direct-editing when double clicking on tasks. You will have to create an own version which allows displaying dropdowns. When its about choosing the name next to an element, you could also consider creating a custom context pad action. You can refer to the custom elements example for a starting point.

#3

Hey Niklas, thanks for reply,

I made a provider that extend the properties provider. I disabled the double click and in the getTabs I changed the html to a select input and this works!

propertiesProvider.getTabs = (element) => {
    // get the current tab array
    var array = camundaGetTabs(element);
    var nameEntry = array[0].groups[0].entries[1];

    if (nameEntry && isAny(element, ['bpmn:ServiceTask', 'bpmn:Task'])) {
      // change field name type to dropdown
      var nameList = JSON.parse(localStorage.getItem('name-task-options'));

      nameEntry.html = `
        <label for="camunda-name">Nome</label>
        <select id="camunda-name" name="name" data-disable="isDisabled" data-value="">
          <option value=""></option>
          ${nameList.map(value => `<option value="${value}">${value}</option>`).join('')}
        </select>`;
    } else {
      nameEntry.html = `
        <label for="camunda-name">Nome</label>
        <div class="bpp-field-wrapper">
          <div contenteditable="true" id="camunda-name" name="name"></div>
        </div>`;
    }

    return array;
  }
1 Like
#4

Glad to hear this! :+1:

1 Like
#5

can you tell me how to disable double click? thanks!

#6

Hey @weilei, you need to make an event handle, like this:

First of all, you need to inject eventBus inside the provider and use this method below and import the isAny method of ModelingUtil if you need to choose what type of task you need to disable the double click.

import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';

export default function CustomPropertiesProvider(eventBus, propertiesProvider) {
  eventBus.on('element.dblclick', 10000, (context) => {
    var element = context.element;

    if (isAny(element, ['bpmn:StartEvent', 'bpmn:ServiceTask', 'bpmn:Task', 'bpmn:EndEvent'])) {
      return false;
    }
  });

 // YOUR CODE
}

CustomPropertiesProvider.$inject = [
  'eventBus',
  'propertiesProvider'
]
1 Like
#7

thanks! @vmagalhaes!
i am trying to insert a shape between two shapes! but i found there is no insertShape function！ how can i do this?
image

this is what i want to do! when i click add button i can insert a shape!
image

#8

First, please do not necrobump old topics which are already solved. Instead link to this thread from new topic.

Secondly, a granular insert-between modeling operation does not exist at the moment.

#9

can you please tell me how to import propertiesProvider in angular 8

#10