Customizing property panel for improved UX

Sangeeth_VS · December 21, 2021, 11:28am

We have an Angular application which uses bpmn-js and includes property panel & Camunda moddle extensions. Many of the diagrams we create has service tasks. For each service task, we have to configure a connector and input/output parameters. Configuration of connector is a repeated task and involves the same parameters most of the time. This is a hassle for the end user and for improving the user experience we are planning the following
1. Add a service task element in the palette to avoid the extra step of changing the type after dragging and dropping a task element.
2. Creating a configuration interface in the application to pre-configure the connector parameters. (This is out of scope of the topic in discussion)
3. Create a custom property panel where the pre-configured connectors can be listed and on selection the values are mapped in the diagram xml.

I was able to create a custom palette and properties panel with help from your examples. For property panel, I used the General tab and modified. Not sure though if this is the correct way. Below is the screenshot of what was done.

The task dropdown in the property panel is where we can select the configured connectors. Beyond this I couldn’t progress as I couldn’t figure out how to move forward. What I’m looking for is that, on selecting a task, the connector parameters (shown below) should be displayed below the task dropdown.

We could also avoid displaying the parameters but the diagram xml should contain these as given below

<bpmn:serviceTask id="Activity_0uvaugq" name="Get User Details">
      <bpmn:extensionElements>
        <camunda:connector>
          <camunda:inputOutput>
            <camunda:inputParameter name="headers">
              <camunda:map>
                <camunda:entry key="Authorization">${bearerToken}</camunda:entry>
                <camunda:entry key="Content-Type">application/scim+json</camunda:entry>
              </camunda:map>
            </camunda:inputParameter>
            <camunda:inputParameter name="method">GET</camunda:inputParameter>
            <camunda:inputParameter name="url">https://dev.aaas.hidcloud.com/scim/${tenantId}/v2/Users/${inputUserId}</camunda:inputParameter>
            <camunda:outputParameter name="GetUserStatuscode">${statusCode}</camunda:outputParameter>
            <camunda:outputParameter name="GetUserDetailsResp">${response}</camunda:outputParameter>
          </camunda:inputOutput>
          <camunda:connectorId>http-connector</camunda:connectorId>
        </camunda:connector>
      </bpmn:extensionElements>
      <bpmn:incoming>Flow_1nvf6dd</bpmn:incoming>
      <bpmn:outgoing>Flow_0lhgmxy</bpmn:outgoing>
    </bpmn:serviceTask>

Is this achievable? If so, can you please provide some guidance on how this can be done?

The Github repository for what I have done can be accessed from GitHub - sangeeth-repo/ng-bpmn-js: bpmnjs in Angular. I tried to create a running application in codesandbox and stackblitz but unfortunately it’s failing due to dependency issues. But it works fine when run locally.

Do let me know if you need any other inputs.

Ingo_Richtsmeier · December 21, 2021, 1:31pm

Hi @Sangeeth_VS,

it sounds like a use case for element templates: camunda-modeler/docs/element-templates at master · camunda/camunda-modeler · GitHub.

They are based on the properties panel and you can use them in a web application.

Hope this helps, Ingo

Sangeeth_VS · December 21, 2021, 1:41pm

Thanks @Ingo_Richtsmeier! Do you know of any example for element templates running at codesandbox or stackblitz?

Sangeeth_VS · December 22, 2021, 9:20am

Hi @Ingo_Richtsmeier,

I made an attempt in using element templates. Now a dropdown appears in the property panel with the template name as below.

I was expecting the properties defined in the template to appear. I also want the properties to appear without user selecting a template. i.e., the defined template should render automatically. What am I doing wrong? Below is the template json

[
  {
    "name": "Task Template",
    "id": "taskTemplate",
    "appliesTo": ["bpmn:ServiceTask"],
    "properties": [
      {
        "label": "Tasks",
        "type": "Dropdown",
        "value": "50",
        "choices": [
          { "name": "low", "value": "20" },
          { "name": "medium", "value": "50" },
          { "name": "height", "value": "100" }
        ],
        "binding": {
          "type": "property",
          "name": "camunda:class"
        }
      }
    ]
  }
]

Sangeeth_VS · December 23, 2021, 4:33am

@nikku, @philippfromme Hi guys, can you please provide me some guidance here?

Sangeeth_VS · December 23, 2021, 2:41pm

Updated the repo GitHub - sangeeth-repo/ng-bpmn-js: bpmnjs in Angular to include element template. However after selecting the template from the Element Template dropdown in the property panel, the property panel is blank.

Appreciate your guidance on this.

philippfromme · January 3, 2022, 1:45pm

Can you check if there’s an error in the console?

Sangeeth_VS · January 4, 2022, 5:37am

There is no console error. I had also tried adding the following to catch any errors.

    this.bpmnJS.on('elementTemplates.errors', function (event) {
      console.log('template load errors', event.errors);
    });
    this.bpmnJS.get('elementTemplatesLoader').reload();

philippfromme · January 4, 2022, 10:08am

Your custom properties provider doesn’t seem to work. Can you debug and check what entries it actually returns?

Sangeeth_VS · January 4, 2022, 1:43pm

Thanks much for the guidance Philipp! Yes, the issue was with my custom provider. Now the template is displaying fine.

I also have the following queries

Can we change the label “Element Template” and also add an option “Select one” to the drop down instead of blank entry?
In the template UI, can we hide the “Unlink” option? I want only the “Remove” option.
How can I create a template structure so that the mapping result is as below?

<camunda:inputParameter name="headers">
<camunda:map>
<camunda:entry key="Authorization">${bearerToken}</camunda:entry>
<camunda:entry key="Content-Type">application/scim+json</camunda:entry>
</camunda:map>
</camunda:inputParameter>

My existing template can be seen from ng-bpmn-js/task-template.json at master · sangeeth-repo/ng-bpmn-js · GitHub

Sangeeth_VS · January 5, 2022, 12:01pm

@philippfromme Just want to let you know that, for the above queries,
I had tried the translation feature to change the “Element Template” label but it’s not working. I couldn’t find this label key in bpmn-js-i18n/en.js at master · bpmn-io/bpmn-js-i18n · GitHub. Could this be the reason why it’s not getting translated?

And for the mapping result query, I understand that map is not supported in element templates. I’m trying to accomplish this with scripts. Or any other suggestion? Any plans to support map and other binding types in element templates?

Haven’t figured out on the other queries yet.