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.
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;
}
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'
]