Need help with BPMN-VIEWER widget

Camunda 7 Topics Discussion & Questions
,
1

I am trying to integrate the BPMN-VIEWER described in [1] into a custom html page, but am unable to get it to work. The part of the page occupied by “<div cam-widget-bpmn-viewer … ><div>” does not change dynamically to display the BPMN. No errors are reported either (nothing in the Javascript console), so I am unable to figure out what is wrong.

I have verified that the JSON object containing the BPMN XML, as described in [2], is indeed being assigned to the field “diagramXML” of the scope. But do not know what else I should or can check.

How can I debug this problem? Thanks for any help or hints.

[1] http://camunda.github.io/camunda-commons-ui/cam-widget-bpmn-viewer.html
[2] https://docs.camunda.org/manual/7.3/api-references/rest/#process-definition-get-bpmn-20-xml

2

Hi,

do other angular directives work on your page? Did you include the camunda commons module as a dependency for your angular module? You can find the source how the example page you linked is set up in Github: https://github.com/camunda/camunda-commons-ui/blob/master/lib/widgets/bpmn-viewer/test/cam-widget-bpmn-viewer.src.js#L9

Cheers
Sebastian

3

Hi Sebastian,

Thanks for your mail.

The BPMN-VIEWER is embedded in a larger HTML page that has other
(non-camunda) angular artifacts on it, and those parts of the functionality
(based on angular, but not dependent on any camunda API) do seem to be
working correctly.

There are no javascript error messages at all in the console (I use
chrome), so that leaves me with no leads to the solution.

I see that a lot of other users on the forum are “power users” that dig
into the API (and even leverage it to obtain other great effects).
Unfortunately, my role (and time budget) in this effort does not permit
that sort of exploration, and It would help if there were any error
messages produced.

Another thing that might help is a minimal HTML page example that embeds
the viewer, and has facilities to display the BPMN data. I have not found
any documentation about the format in which the BPMN data must be supplied
(as XML or a field of a JSON object?). I have tried both variants, and the
API seems to be happy (no error messages) with both - but in both cases
there is no visual output either.

Thanks and Regards,

  • Sanjay
4

Hi Sanjay,

did you include the camunda commons module as a dependency for your angular module? It should look something like

var myModule = angular.module('myModule', ['cam.commons']);

If you do not include the module, the browser treats the cam-widget-bpmn-viewer attribute like any other attribute on an html element it does not know about and just ignores it.

You can find the source code of our minimal example page can be found on Github (HTML + JS). This is the page you can also access here: http://camunda.github.io/camunda-commons-ui/cam-widget-bpmn-viewer.html

Cheers
Sebastian

5

Hi Sebastian,

Thanks for your response.

Unfortunately, I am unable to use the information you provided. Adding the
dependency produces the following error:

Error: [$injector:modulerr] Failed to instantiate module cam.commons due to:
Error: [$injector:nomod] Module ‘cam.commons’ is not available! You either
misspelled the module name or forgot to load it. If registering a module
ensure that you specify the dependencies as the second argument.

I do have the following line (in a different HTML file) being loaded before
the line (in a .js file) that defines the application (where I added the
dependency information you provided).

Is there something else I am missing?

Regards,

  • Sanjay
6

Hi Sanjay,

it looks like the camunda-commons-ui library is not properly included in the page. How are you building your application? Make sure that this file https://github.com/camunda/camunda-commons-ui/blob/master/lib/index.js is included in your build (e.g. via npm and browserify).

Cheers
Sebastian

7

Hi Sebastian,

Unfortunately that still does not help me.

It looks like the same (or a very similar) error still persists. The
complete error trace is attached as a text file.

Regards,

  • Sanjay
8

Hi Sanjay,

I cannot see your attachment. Unfortunately, it is hard for me to help you without knowing your concrete setup. Could you do the following?

This should give you the bpmn-viewer example page. You can then play around with the code to see the differences between this setup and your setup.

Cheers
Sebastian

9

Hi Sebastian,

Thanks for the guidelines.

I have other more demanding tasks to take care of for the time being, but
will return to this later.

Regards,

  • Sanjay