BPM colors options

Developers Modeler
1

Hi all,

Anyone tried to add different colors for borders and text to the same element? Any clues on how to achieve it? In a UserTask for example, I want to have borders using the same fill color or something close to this color, but keep text in black.(just as reference)

Or use gradient colors inside any task?

2

What did you already do? Did you created a custom renderer?

3

Yes, I had started this way but decided to double check if any other way was already implemented, because in my case I will need an additional property to have all the 3 items: Border Color, Text Color and Fill Color.

4

ah okay, got it.

Currently we only support stroke (which will be used for the borders and the labels) and fill as color properties, cf. https://github.com/bpmn-io/bpmn-moddle/blob/master/resources/bpmn-io/json/bioc.json.

You would have to create any additional separation on your own (creating and supporting a third bioc property and having a custom renderer who understands this.

5

Hi put color in fill but it not showing stroke is working can you please help me in element type replace option

label: ‘Script Task’,
actionName: ‘replace-with-script-task’,
className: ‘bpmn-icon-script’,
target: {
type: ‘bpmn:ScriptTask’
}
}, {
label: ‘Call Activity’,
actionName: ‘replace-with-call-activity’,
className: ‘bpmn-icon-call-activity’,
target: {
type: ‘bpmn:CallActivity’
}
},
//Changes for unit test of bot by Akhil ends here
{
label: ‘Task’,
actionName: ‘replace-with-task’,
className: ‘bpmn-icon-task’,
target: {
type: ‘bpmn:Task’
}
}, {
label: ‘Send Task’,
actionName: ‘replace-with-send-task’,
className: ‘bpmn-icon-send’,
target: {
type: ‘bpmn:SendTask’
}
}, {
label: ‘Receive Task’,
actionName: ‘replace-with-receive-task’,
className: ‘bpmn-icon-receive’,
target: {
type: ‘bpmn:ReceiveTask’
}
}, {
label: ‘User Task’,
actionName: ‘replace-with-user-task’,
className: ‘bpmn-icon-user’,
target: {
type: ‘bpmn:UserTask’
}
}, {
label: ‘Manual Task’,
actionName: ‘replace-with-manual-task’,
className: ‘bpmn-icon-manual’,
target: {
type: ‘bpmn:ManualTask’
}
}, {
label: ‘Business Rule Task’,
actionName: ‘replace-with-rule-task’,
className: ‘bpmn-icon-business-rule’,
target: {
type: ‘bpmn:BusinessRuleTask’
}
}, {
label: ‘Sub Process (collapsed)’,
actionName: ‘replace-with-collapsed-subprocess’,
className: ‘bpmn-icon-subprocess-collapsed’,
target: {
type: ‘bpmn:SubProcess’,
isExpanded: false
}
}, {
label: ‘Sub Process (expanded)’,
actionName: ‘replace-with-expanded-subprocess’,
className: ‘bpmn-icon-subprocess-expanded’,
target: {
type: ‘bpmn:SubProcess’,
isExpanded: true
}
}];