Hello,
instead of adding an element, I want to call a function within the contextPad. So, when you click on a task, over the contextPad appears (a transaction symbol) and when you click on it not an object is added but a function is called. Now, I get an error-message with the function modeling.updateProperties that the element is missing. How could I fix that.
The entire code is below:
import {
is
} from 'bpmn-js/lib/util/ModelUtil';
import {
assign,
forEach,
isArray
} from 'min-dash';
import { getBusinessObject } from 'bpmn-js/lib/util/ModelUtil';
import { modeling } from '../app.js';
export default class CustomContextPad {
constructor(bpmnFactory,config, contextPad, create, elementFactory, injector, translate) {
this.bpmnFactory = bpmnFactory;
this.create = create;
this.elementFactory = elementFactory;
this.translate = translate;
if (config.autoPlace !== false) {
this.autoPlace = injector.get('autoPlace', false);
}
contextPad.registerProvider(this);
}
getContextPadEntries(element) {
const {
autoPlace,
bpmnFactory,
create,
elementFactory,
translate
} = this;
var actions = {};
var businessObject = element.businessObject;
const ST = document.getElementById('ST');
const formST = document.getElementById('formST');
const bc = document.getElementById('bc');
const ti = document.getElementById('ti');
function openContextMenu(element) {
const businessObject = getBusinessObject(element);
const { bpmnType } = businessObject;
const { BusinessContext } = businessObject;
const { TaskName } = businessObject;
const { BusinessContext_Id } = businessObject;
const { TaskId } = businessObject;
if(bpmnType == "bpmn:SemanticTask") {
if(BusinessContext !== undefined) {
bc.text = BusinessContext;
bc.value = BusinessContext_Id;
ti.text = TaskName;
ti.value = TaskId;
}
ST.classList.remove('hidden');
}
}
formST.addEventListener('submit', (event) => {
event.preventDefault();
event.stopPropagation();
({ element } = event);
modeling.updateProperties(element, {
BusinessContext_Id: bc.value,
BusinessContext: bc.options[bc.selectedIndex].text,
TaskName: ti.options[ti.selectedIndex].text,
TaskId: ti.value
});
ST.classList.add('hidden');
});
function appendServiceTask(event, element) {
if (autoPlace) {
const shape = elementFactory.createShape({ type: 'bpmn:Transaction' });
autoPlace.append(element, shape);
} else {
appendServiceTaskStart(event, element);
}
}
function appendServiceTaskStart(event) {
const shape = elementFactory.createShape({ type: 'bpmn:Transaction' });
create.start(event, shape, element);
}
function appendSemanticTask(bpmnType) {
return function(event, element) {
if (autoPlace) {
const businessObject = bpmnFactory.create('bpmn:Task');
businessObject.bpmnType = bpmnType;
const shape = elementFactory.createShape({
type: 'bpmn:Task',
businessObject: businessObject
});
autoPlace.append(element, shape);
} else {
appendSemanticTaskStart(event, element);
}
}
}
function appendSemanticTaskStart(bpmnType) {
return function(event) {
const businessObject = bpmnFactory.create(SystemType);
businessObject.bpmnType = bpmnType;
const shape = elementFactory.createShape({
type: 'bpmn:Task',
businessObject: businessObject
});
create.start(event, shape, element);
}
}
function TaskStart(event) {
if (autoPlace) {
const shape = elementFactory.createShape({ type: 'bpmn:Task' });
autoPlace.append(element, shape);
} else {
appendTaskStart(event, element);
}
}
function appendTaskStart(event) {
const shape = elementFactory.createShape({ type: 'bpmn:Task' });
create.start(event, shape, element);
}
if (is(businessObject, 'bpmn:Transaction')) {
assign(actions, {
'append.service-task': {
group: 'artifact',
className: 'bpmn-icon-task',
title: translate('Append Task'),
action: {
click: TaskStart,
dragstart: appendTaskStart
}
}
});
assign(actions, {
'append.semantic-task': {
group: 'artifact',
className: 'bpmn-icon-transaction SemanticTask',
title: translate('Append SemanticTask'),
action: {
click: appendSemanticTask('bpmn:SemanticTask'),
dragstart: appendSemanticTaskStart('bpmn:SemanticTask')
}
}
});
}
if(is(businessObject, 'bpmn:ExclusiveGateway')) {
assign(actions, {
'append.semantic-task': {
group: 'artifact',
className: 'bpmn-icon-transaction SemanticTask',
title: translate('Append SemanticTask'),
action: {
click: appendSemanticTask('bpmn:SemanticTask'),
dragstart: appendSemanticTaskStart('bpmn:SemanticTask')
}
}
});
}
if (is(businessObject, 'bpmn:Task')) {
assign(actions, {
'append.service-task': {
group: 'artifact',
className: 'bpmn-icon-transaction AssistanceSystem',
title: translate('Append AssistanceSystem'),
action: {
click: appendServiceTask,
dragstart: appendServiceTaskStart
}
}
});
assign(actions, {
'append.semantic-task': {
group: 'artifact',
className: 'bpmn-icon-transaction SemanticTask',
title: translate('Append SemanticTask'),
action: {
click: appendSemanticTask('bpmn:SemanticTask'),
dragstart: appendSemanticTaskStart('bpmn:SemanticTask')
}
}
});
assign(actions, {
'append.semantic-task': {
group: 'artifact',
className: 'bpmn-icon-transaction',
title: translate('Open ContextMenu'),
action: {
click: openContextMenu,
dragstart: openContextMenu
}
}
});
}
return actions;
}
}
CustomContextPad.$inject = [
'bpmnFactory',
'config',
'contextPad',
'create',
'elementFactory',
'injector',
'translate'
];
this part gives the error, that element variable is missing:
modeling.updateProperties(element, {
BusinessContext_Id: bc.value,
BusinessContext: bc.options[bc.selectedIndex].text,
TaskName: ti.options[ti.selectedIndex].text,
TaskId: ti.value
});
and this is the part, that calls the function:
assign(actions, {
'append.semantic-task': {
group: 'artifact',
className: 'bpmn-icon-transaction',
title: translate('Open ContextMenu'),
action: {
click: openContextMenu,
dragstart: openContextMenu
}
}
});