Seperate cam-widget-bpmn-viewer from application

I’m looking for an easy way to package up the cam-widget-bpmn-viewer so that I can use it and display it by itself in another area of the app. Ideally, i would like to use it as a standalone feature. I see the sub dir for it here:

https://github.com/camunda/camunda-bpm-webapp/tree/master/camunda-commons-ui/lib/widgets/bpmn-viewer

Has anyone tried this?

Not a problem - you can go on over to bpmn.io and learn more about embedding the viewer.

Thanks, i posted my question there and they recommended that I ask it here first. They pointed me toward using the importXML method, however someone mentioned that you also need to use the camunda API to get the state. I wasn’t sure how to consoldate those 2 things (xml + state).

Below are the steps you need to implement in your own UI

  1. Call the Process Defiition api to get the XML of the Process Definition .
    ex:- http://localhost:8991/rest/process-definition/key/StartOnboardingV2/xml

  2. Call the activity Instance api to get the current state of the process instance
    ex:- http://localhost:8991/rest/process-instance/14195a7c-a67d-11ea-ac38-089734ac42e5/activity-instances

  3. Import bpmn js in your UI .

  4. Use the “NavigatedViewer” or “Diagramviewer” to create a new bpmnviewer instance and load it into canvas, something like below

  5. If you are using react Camunda has a package https://github.com/bpmn-io/react-bpmn

function generateDiagram(xml,actlist) {
var actlistdata=actlist

var bpmnViewer = new NavigatedViewer({
    container: "#canvas",
    height : "80vh",
    // overlays: {
    //     defaults: {
    //       show: {
    //         minZoom: 0.7,
    //         maxZoom: 5
    //       },
    //       scale: {
    //         min: 1
    //       }
    //     }
    // },


}, []);

bpmnViewer.importXML(xml, function (err) {
    if (err) {
        console.log("error rendering", err);
    } else {
        console.log("rendered");
        var overlays = bpmnViewer.get('overlays');
        var canvas = bpmnViewer.get('canvas')
        
         actlistdata.map(actinfo => (

              canvas.addMarker(actinfo.activityId, 'highlight')
         )
         )

       
    }
});

Hope this helps.

Thanks
Dinesh

1 Like