Enhance linking from / to external documents (inter diagram / resource)

[bpmn-io]

Enhance linking from / to external documents (inter diagram / resource)

[MLNW]

Since I got here via my favorite search engine I'll leave a hint how to accomplish this:

Create an extension like so:

{
  "name": "Link",
  "uri": "http://schema/bpmn/link",
  "prefix": "link",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "types": [
    {
      "name": "Internal",
      "superClass": ["Element"],
      "properties": [
        {
          "name": "href",
          "isAttr": true,
          "type": "String"
        }
      ]
    }
  ],
  "emumerations": [],
  "associations": []
}

Add xmlns:link="http://schema/bpmn/link" to the <bpmn2:definitions> tag in a diagram you want to add links to. Then add your links to an element, e.g.:

    ...
    <bpmn2:subProcess id="PMPR" name="PMPR">
      <bpmn2:extensionElements>
        <link:internal href="/processes/spr?subprocess=PMPR" />
      </bpmn2:extensionElements>
    ...

Now you can check if an element contains a link extension and react on that, e.g., on root.set:

// Check if the element references a link that should be opened instead
const extensionElements = event.element?.businessObject?.extensionElements?.values;
if (extensionElements) {
  const links = extensionElements.filter(
    (element: { $type: string }) => element.$type === 'link:internal'
  );
  if (links.length === 1) {
    navigationInProgress = true;
    goto(links[0].href, { state: { ...history.state } });
  }
}

[andyboeh]

I would really appreciate that feature. My use-case is as follows:

We use DokuWiki as a communication platform and quality management system. There is a DokuWiki-PlugIn that embeds bpmn-js into DokuWiki. It would be very nice to be able to link process steps to Wiki pages.

I'm thinking of working around this by using, e.g., an overlay to link to the desired page. Any other ideas?

[nikku]

This sounds like a great scope for a side project.

We don't plan to add such functionality to the bpmn-js CORE though.

[nikku]

@MLNW Awesome contribution.

As this is requested once in a while would you like to contribute an example how to add it (and use it)? Basically your post in a README.md under the name let's say external-links.

We'd otherwise look into picking it up, one day.

[MLNW]

@nikku At this moment I sadly do not have the capacity to do so. If someone else wants to use my comment as the basis for an example, go ahead 🚀