Hi,
how i can create a sub-process and make it collapsed by default ??(i want to hide all elements)
the current behavior is that all sub elements are displayed once i finish to create the sub process
current
what i want:
Hi @Elia_Rohana
What do you mean with this? When should the sub process be collapsed? Should it be collapsed automatically right after you finished modeling inside it?
i want the sub-process to be colapsed by default
any idea how to create sub-process collapsed by default ???
So you want the subprocess to be collapsed when you add it to the canvas? Before starting with adding elements to it?
yes
i don’t want the inner elements of the sub-process to be displayed, and internal logic of my applicaiton
can i get any help from anyone ???
If you want to insert collapsed subprocesses, take a look inside this topic. You will have to use the Palette or the ContextPad to achieve this. One another way collapsing elements would be to simply remove the isExpanded property in the DI section.
can you explain what do you mean in -“simply remove the isExpanded property in the DI section” ?
Subprocess can have a isExpanded property inside the di section of the diagram’s xml. For example see this. if this property is set to false, the subprocess is collapsed.
However how go to create collapsed subprocesses? It depends on the way you create the subprocess element in you project. Do you use a modeler with the default palette? Do you use the viewer and want to generate the subprocess via code? Try to give us some example code or test cases to help you in detail.
In general you can always use bpmnFactory to create collapsed subprocesses:
var bpmnFactory = modeler.get('bpmnFactory');
var collapsedSubprocess = bpmnFactory.create('bpmn:subProcess', { isExpanded: false });
Note: Newly created subprocess are collapsed by default.
I create it from code
I tried the code you wrote here
But the problem is the children of the sub process, they are displayed although the sub process is collapsed. Please check the picture i attached
first of all i want to clarify few things:
-
i create all elments(shapes/connections, etc…) from the code
-
when the user clicks on the add button(blue one), he enters the name of the node(currently just for the example)
-
after entering the name of the node, i create a new node
-
then i need to update the parent sub-process node, and add few elements to it, in order to make my process logic work
the issue is i want this logic to be hidden from the user, the user shouldn’t be aware of the logic inside the sub-process and all its elements inside it.
but after i perform the logic above, the parent sub-process node kept collapsed, but the user is able to see its children elements which i want to avoid
so please assist on how to acheive this behavior - all child element of a sub-process should not be displyed
see picture below as an example:
one way to solve this is by not adding the sub process elements to the canvas, is it possible ???
Is it possible for you to give us your code in which you start implementing your described behavior? It would be easier for us to help you in detail.
its a whole module, it would be difficult to give you the code, i can give you the code snippet of creating the sub-process if that would help.
but i think you can try it yourself, just try to creating a sub-process programatically and you will see all elements inside it, although its { isExpanded: false }
Setting isExpanded to false is not enough. You also need to set every child’s hidden property to true as it is done in ToggleShapeCollapseHandler.
I think what you would want to do is to use modeling.toggleCollapse(mySubprocess). If you use it in a CommandInterceptor on postExecute you won’t end up with an additional command on the command stack.
1 Like
i tried call modeling.toggleCollapse(mySubprocess) manually right after i created all elements in the sub process, but the issue is the layout gets crazy, the parent node get moved, see screen shot below:
instead of this
i can share any piece of code you like, but please try to help me with this issue, since its been a long time, and i can’t proceed with my work without solving it
Can you share the piece of code that collapses the subprocess?
i call this method to create my sub process elements:
private buildSubProcessStructure(sourceElement: Shape) {
const startEventElement = this.modeling.createShape({type: startEvent, id: `${startEvent}_${sourceElement.businessObject.name}`}, {x: sourceElement.x + 50, y: sourceElement.y + 50}, sourceElement, {});
const userTaskShape = this.elementFactory.createShape({ type: userTaskType}, {});
const scriptTaskShape = this.elementFactory.createShape({ type: scriptTaskType }, {});
const startGateway = this.createGateway(startEventElement);
const scriptTask:Shape = this.autoPlace.append(startGateway, scriptTaskShape);
this.nameIncomingConnection(scriptTask, startGatewayToScriptTaskConn);
const scriptTaskProperties = {
name:scriptTaskName,
scriptFormat:"javascript",
resultVariable:`${sourceElement.id}_${scriptTaskResultVariablePostFix}`,
script: ''};
this.modeling.updateProperties(scriptTask, scriptTaskProperties);
const userTask = this.autoPlace.append(startGateway, userTaskShape);
this.modeling.updateProperties(userTask, {name:userTaskName});
this.nameIncomingConnection(userTask, startGatewayToUserTaskConn);
const endGateway:Shape = this.createGateway(scriptTask);
const endEventNode:Shape = this.elementFactory.createShape({type: endEvent}, {});
this.autoPlace.append(endGateway, endEventNode);
this.addConditionExpressionToConnection(endGateway.outgoing[0], generateEndGateWayToEndEventExpression(sourceElement.id));
this.modeling.connect(userTask, endGateway);
this.modeling.connect(endGateway, userTask);
this.addConditionExpressionToConnection(endGateway.outgoing[1], generateEndGateWayToUserInputExpression(sourceElement.id));
}
i tried call modelilng.toggleCollapse(mySubProcess) right after i create it, and the layout gets messy .
i even tried to hide all sub process children using my custom renderer by setting the display to none
drawShape(visuals: SVGElement, element: Shape): SVGElement {
if (this.isTextAnnotation(element)) {
return this.renderTextannotation(visuals, element);
}
if(this.shouldHideShape(element))
element.hidden =true;
return super.drawShape(visuals, element);
}
the elements got hidden actually, but again the issue with the layout, the sub process moves, and it size changes - it got bigger .
anyway, i don’t care how, but i need a solution for adding elements to a sub-process without displaying the children elements.
if you guys are able to give a an example for such functionallity i would be very thankful for that
Regards,
Elia
this is what happens when i use my custom render to set the hidden to true
the layout should be like one of y example above:
NODE -> GATEWAY -> NODE
How are you positioning your elements when creating them programmatically?