How to customize the display of process execution monitoring
Learn how to modify the process/case visualization page using the UI Designer, or embed the BPMN diagram fragment in your own page.
|
This is only available in Enterprise, Efficiency and Performance editions. |
Modify the process or case visualization page
You may want to re-use the content of process or case visualization page from the Administrator Application.
To do so:
-
From Bonita Studio coolbar, click on the Applications icon, and open the Administrator Application
-
Go to the Resources menu, filter by page, and find the Bonita Admin Process Visualization or Bonita Admin Case Visualization page (you may have to click on the Load more resources link)
-
Export the page by clicking on the Export button
-
From Bonita Studio coolbar, click on the UI Designer icon to open the UI Designer
-
Import the page in the UI Designer
You can now rename and modify the page for your needs, and use it in any Bonita application.
Embed the BPMN diagram fragment in your own page
Understanding the fragment
You may be interested in embedding the BPMN diagram only in your page. To do so, follow the steps above to import the process or case visualization page in the UI Designer. Doing this, a new fragment appears in the UI Designer home page, in the Fragments tab: fragmentProcessVisu or fragmentCaseVisu.
Open it, to understand its content.
As you can see, it embeds the bpmnVisu custom widget, and includes some variables to get the BPMN diagram, and information about the process or case.
Note that it also includes a variable to check the availability of the feature, and another one (allCaseInfo) dedicated for testing.
|
The processId (or caseId) variable is shown as Exposed: this means the variable is defined in the hosting page: this is the interface between the page and the fragment. |
Embed the fragment in your page
Now, you can open your page, and drag & drop the fragment in your page, from the Fragments tab of the palette.
Selecting the fragment in the white board, you can see a Bindable fragment data section in the properties panel: this is the interface with the fragment, where you provide the caseId or processId.
From your page, create a processId or caseId variable, which will contain the id of the required process or case you want to monitor.
|
The BPMN diagram display is provided by the bpmn-visualization library, an open-source TypeScript library for visualizing process execution data on BPMN diagrams. |