Adding custom elements in a loop

Developers Modeler
1

hello,
at the moment I’m adding custom elements as follows:

    return {
'task0': {
group: 'artifact',
className: changeClass(customElements.types[0].name, customElements.types[0].type),
title: translate(customElements.types[0].titlePalette),
action: {
dragstart: createTask(customElements.types[0].type, customElements.types[0].ApplicationID, customElements.types[0].AssistanceSystemType),
click: createTask(customElements.types[0].type, customElements.types[0].ApplicationID, customElements.types[0].AssistanceSystemType)
}
},
'task1': {
group: 'artifact',
className: changeClass(customElements.types[1].name, customElements.types[1].type),
title: translate(customElements.types[1].titlePalette),
action: {
dragstart: createTask(customElements.types[1].type, customElements.types[1].ApplicationID, customElements.types[1].AssistanceSystemType),
click: createTask(customElements.types[1].type, customElements.types[1].ApplicationID, customElements.types[1].AssistanceSystemType)
}
},
'task2': {
group: 'artifact',
className: changeClass(customElements.types[2].name, customElements.types[2].type),
title: translate(customElements.types[2].titlePalette),
action: {
dragstart: createTask(customElements.types[2].type, customElements.types[2].ApplicationID, customElements.types[2].AssistanceSystemType),
click: createTask(customElements.types[2].type, customElements.types[2].ApplicationID, customElements.types[2].AssistanceSystemType)
}
},
'task3': {
group: 'artifact',
className: changeClass(customElements.types[3].name, customElements.types[3].type),
title: translate(customElements.types[3].titlePalette),
action: {
dragstart: createTask(customElements.types[3].type, customElements.types[3].ApplicationID, customElements.types[3].AssistanceSystemType),
click: createTask(customElements.types[3].type, customElements.types[3].ApplicationID, customElements.types[3].AssistanceSystemType)
}
},
'task4': {
group: 'artifact',
className: changeClass(customElements.types[4].name, customElements.types[4].type),
title: translate(customElements.types[4].titlePalette),
action: {
dragstart: createTask(customElements.types[4].type, customElements.types[4].ApplicationID, customElements.types[4].AssistanceSystemType),
click: createTask(customElements.types[4].type, customElements.types[4].ApplicationID, customElements.types[4].AssistanceSystemType)
}
},
'task5': {
group: 'artifact',
className: changeClass(customElements.types[5].name, customElements.types[5].type),
title: translate(customElements.types[5].titlePalette),
action: {
dragstart: createTask(customElements.types[5].type, customElements.types[5].ApplicationID, customElements.types[5].AssistanceSystemType),
click: createTask(customElements.types[5].type, customElements.types[5].ApplicationID, customElements.types[5].AssistanceSystemType)
}
},
'task6': {
group: 'artifact',
className: changeClass(customElements.types[6].name, customElements.types[6].type),
title: translate(customElements.types[6].titlePalette),
action: {
dragstart: createTask(customElements.types[6].type, customElements.types[6].ApplicationID, customElements.types[6].AssistanceSystemType),
click: createTask(customElements.types[6].type, customElements.types[6].ApplicationID, customElements.types[6].AssistanceSystemType)
}
},
'task7': {
group: 'artifact',
className: changeClass(customElements.types[7].name, customElements.types[7].type),
title: translate(customElements.types[7].titlePalette),
action: {
dragstart: createTask(customElements.types[7].type, customElements.types[7].ApplicationID, customElements.types[7].AssistanceSystemType),
click: createTask(customElements.types[7].type, customElements.types[7].ApplicationID, customElements.types[7].AssistanceSystemType)
}
},
'task8': {
group: 'artifact',
className: changeClass(customElements.types[8].name, customElements.types[8].type),
title: translate(customElements.types[8].titlePalette),
action: {
dragstart: createTask(customElements.types[8].type, customElements.types[8].ApplicationID, customElements.types[8].AssistanceSystemType),
click: createTask(customElements.types[8].type, customElements.types[8].ApplicationID, customElements.types[8].AssistanceSystemType)
}
}

	}

is it possible to do this with help of a loop? Currently I am using a python-script that
adds all the code (therefore it is so bad formatted). But it would look much
better when it could be done with a loop.

2

I am using a python-script that adds all the code

What has python to do with a javascript application? Please be more specific: what does your code belong to, what do you want to achieve?

Sharing a CodeSandbox would be very appreciated.

3

I mean the code of the return function. As you can see it repeats with almost the same content. As the length is dependent of the contents of the corresponding json-file, I use a python script that creates the code and pastes it to the CustomPalette.js file. My actual question is, if it is possible to run the code within the return function in a loop. When I try to write for(var i=0;i<9;i++) within the return function, I get an error-message (expected ,).

4

Can you please provide this code in a CodeSandbox? It’s otherwise hard to help you.

5

Ok, could you shortly describe how to copy my source files to the sandbox and how I can save all?

6

Sure.

  1. Simply fork the example sandbox to create a new one

image

  1. Add your custom modules and integrate them into the Modeler, example: https://codesandbox.io/s/custom-context-pad-uhdjd?file=/src/index.js

  2. Post the link to your sandbox

7

I simply copied the whole project:


or alternatively: vdeppe/bpmn-projekt (github.com)
under custom/CustomPalette.js you can find the relevant part. I wrote a comment to the corresponding part
8

Please make sure your sandbox is working. It’s currently full of errors and not loading anything.

If I would guess from your previous messages, it should be possible to create your context pad entries from the customElements variable. You can use an iterator for this, e.g. by our min-dash library.

import { forEach }  from 'min-dash';

let entries = {};

forEach(customElements.types, function(type, idx) {
  entries['append.high-task' + idx] = {
    group: 'model',
    className: changeClass(type.name, type.type),
    title: translate(type.titlePad),
    action: {
      dragstart: appendServiceTaskStart(type.type, type.ApplicationID, type.AssistanceSystemType),
      click: appendServiceTask(type.type, type.ApplicationID, type.AssistanceSystemType)
    }
  }
});
9

solution works, thanks very much!
According to the sandbox, I imported the project from my github-account.
When you check it out from there, it runs well by
npm install
npm run dev
Maybe, there occured an error while importing it to sandbox?