Hi,
I have two related questions about customizing bpmn-js:
-
Palette Customization:
- Need to hide some default palette icons
- Want to hide specific task types (User Task, Service Task)
-
Custom Properties with Backend Integration:
- Want to add custom dropdown lists to tasks that are populated from my backend
- Need to implement a “query task” where:
- Task should have a dropdown with IDs from backend
- Selected value should be saved with the task
- This saved value will be used for backend processing later
Technical Questions:
- How can I add custom properties panel fields with dropdowns?
- What’s the best way to fetch and populate these dropdowns from backend API?
- How can I save the selected values in the BPMN XML?
Example of what I’m trying to achieve:
// Custom Properties Provider
function CustomPropertiesProvider(propertiesPanel, translate) {
PropertiesActivator.call(this, eventBus);
this.getGroups = function(element) {
return function(groups) {
// Add custom group
groups.push({
id: 'customQuery',
label: 'Query Configuration',
entries: [
{
id: 'queryDropdown',
html: `<select id="queryId" name="queryId">
<!-- Will be populated from backend -->
</select>`,
modelProperty: 'queryId',
get: function(element) {
// Get saved value from BPMN XML
return {
queryId: element.businessObject.queryId
};
},
set: function(element, values) {
// Save value to BPMN XML
element.businessObject.queryId = values.queryId;
}
}
]
});
return groups;
}
}
}
// Fetch dropdown options from backend
async function fetchQueryOptions() {
const response = await fetch('/api/queries');
const options = await response.json();
const dropdown = document.getElementById('queryId');
options.forEach(opt => {
const option = document.createElement('option');
option.value = opt.id;
option.text = opt.name;
dropdown.appendChild(option);
});
}