Display inside SubProcess element Input Fields that contain the properties value

[newUser]

Hello,

I would like to display as seen in the picture bellow

the properties and their values inside the SubProcess elements. Do you have any tips of how could I do that or any example? I have searched but didnt find anything.

Thank you.

[philippfromme]

You can use a custom renderer to do that: bpmn-js-examples/custom-elements at master · bpmn-io/bpmn-js-examples · GitHub

[newUser]

Thanks for the example I have seen it but it doesn’t help me with how can I add more than one inputs to a task. And how can I change the position of the Rect? I wanted to be inside the element on another position.

[philippfromme]

So you want to edit these properties on the canvas like labels?

[newUser]

Yes I would like some of them to be editable and some not.

[philippfromme]

Okay, this isn’t trivial. bpmn-js uses diagram-js-direct-editing to enable editing labels on the canvas. This module is integrated through LabelEditingProvider. Have a look at these files and think about how you’d customize that behavior.

There are alternative approaches like using overlays that are much easier to implement so you might want to look into those as well.

[newUser]

I have added a Rect on the custom element but I dont know how to display the value of the property to the rect

It should look like this:

My code:
TProps.js

function TProps(props) {
    const {element, id} = props;

    const modeling = useService('modeling');
    const translate = useService('translate');
    const debounce = useService('debounceInput');


    const getValue = () => {
        return element.businessObject.tProperty || '';
    }

    const setValue = value => {
        return modeling.updateProperties(element, {
            tProperty: value || ''
        });
    }

    return  <TextFieldEntry
        id={id}
        element={element}
        description={translate('Add a value to the T property')}
        getValue={getValue}
        setValue={setValue}
        debounce={debounce}
    />
}

CustomRenderer.js

 drawShape(parentNode, element) {

...

 const rect = this.drawRect(parentNode, 'rect1', 80, 20, 2, 'rgba(204,0,0,0.94)');
                    svgAttr(rect, {
                        transform: 'translate(20, 35)'
                    });

...

 return this.bpmnRenderer.drawShape(parentNode, element);
}

Could you help me with this?

[philippfromme]

Your custom renderer should read this value from the custom element in order to render it. What is your custom element? Is it a BPMN task or is it entirely custom?

[newUser]

My custom element is ‘custom_svg3:BlueBox’ and has

"superClass": [
				"bpmn:SubProcess"
			]