BPMN editor sample does not work

[kaashan]

I came across GoJS as I was looking for a UI diagramming library. Before I explore it further to learn, I wanted to explore the sample projects for a quick look at the library capabilities. I wanted to explore the BPMN sample present under projects folder. Launching the BPMN.html file in a browser does not load the editor to create a new workflow diagram. Same issue exists with the online demo as well GoJS BPMN Editor.

Examining the browser console shows up JS errors:

Could someone help me to get this error fixed so that I could explore a working demo of BPMN sample?

Thanks in advance.

[walter]

I have already answered the GitHub issue that you entered.

Issue: BPMN sample project does not work

Basically, all of the import statements need to be consistent with having (or not having) the “.js” file extension in the “from” string. This is fixed in 2.1.9, but until that comes out in a few days, you can just modify all of your copies of the files that are used or imported by the BPMN sample source files.

[kaashan]

Thanks @walter. I was able tor run the BPMN editor sample in my local after doing the changes you suggested in my local source file(details are mentioned in GitHub issue).

I understand that the samples (clonedGitHubRepoFolder/samples) are provided for us to understand various implementations and make our own custom implementations, if needed, by referring the demo code.

Does the same hold good for projects as well(clonedGitHubRepoFolder/samples)? I mean, looking at the BPMN editor example, I see it has these two JS files: BPMNScript.js (imported in BPMN.html file using require) and BPMNClasses.js(imported in BPMNScript.jsfile using require). Which of these files should we be modifying when making customization?

BPMNClasses.js file defines 3 classes: PoolLink, and BPMNLinkingTool and BPMNRelinkingTool. When we create the diagram in BPMNScript.js(line#802), BPMNLinkingTool and BPMNRelinkingTool are instantiated for linkingTool/relinkingTool. How do we know that such properties can be passed in the configuration object? Are these properties specific to BPMN diagrams? Similarly, usage of PoolLink class is referred for messageFlowLinkTemplate(line#777). Why not for dataAssociationLinkTemplate/annotationAssociationLinkTemplate/annotationAssociationLinkTemplate?

It would be great if you could clarify my concerns above as then I would then have a fair understanding and can evaluate it better. This would help me in considering the option to purchase the licence for GoJS.

[walter]

The first answer is that you can customize whatever you want. The source files in the BPMN project are the complete implementation of BPMN-specific functionality. The classes in the extensions or extensionsJSM or extensionsTS directories are extensions of the base library, go.js, that have general use in many apps but do not need to be in the base library.

Each of the custom classes in the BPMN project extends one of the GoJS classes, whether a Tool or a Layout or the Link class. The API for those classes are described at https://gojs.net/latest/api/index.html. In addition some of those BPMN classes have their own properties and methods, which I hope are documented in the code.

[kaashan]

Thanks @walter for the clarification.

[kaashan]

Hi Walter,

I am facing an issue while initializing the palette for my diagram. The below code, where I want to push objects inside myPalette.model.nodeDataArray does not work.

myPalette.model.nodeDataArray.push(
          { category:"Task", text: 'My Task'},
      { category:"Group", text: 'My Group', isGroup:true },
    );

If I directly initialize nodeDataArray then it works. Is there a limitation that nodeDataArray can’t be configured using push method even though it is an array?

I couldn’t find any such limitation mentioned here(https://gojs.net/latest/intro/palette.html).

[walter]

Please read https://gojs.net/latest/intro/usingModels.html#ModifyingModels

[kaashan]

Thanks again @walter. But, this looks little buggy to me. I understand that to modify any existing property of a node(basically modifying a property on the actual model object), we have to use the model.setDataProperty. But modifying the arrays should work as well. Think of it this way, when we just create the palette object, we get an empty palette. It means the palette’s nodeDataArray is initially empty. Now, when we do myPalette.model.nodeDataArray = anArrayHoldingPaletteObjects, the palette gets populated with the desired node objects. It means that GoJS software is notified about the changes in the underlying array. Thus, the below line, mentioned on the link you shared, is actually incorrect

It does not work to simply modify the Model.nodeDataArray, because the GoJS software will not be notified about any change to any JavaScript Array

As it works when we directly set the nodeDataArray to an array, it should also work when we push the objects into the nodeDataArray. Consider a use case where we want to insert the objects in the palette based on some condition and imagine that there is a separate condition for each of the object to push. Since, pushing objects into the nodeDataArray doesn’t work, we have to create a temporary array and push objects into the temporary array first based on the specific conditions and then finally do myPalette.model.nodeDataArray = tempArrayHoldingPaletteObjects. In my opinion, this is slightly an overhead which could have been avoided.

[walter]

I guess the phrase “modify the Model.nodeDataArray” is ambiguous.

Setting that property certainly tells the model that the value of that property has changed. But modifying the Array does not, unless you use a Model method to do so.

I think this phrase would have been clearer: “mutate the Array that is the value of Model.nodeDataArray”.

Basically the problem is that there is no way for the GoJS library to know whether you have inserted into, modified, or removed from an Array. You have to use Model.addNodeData or removeNodeData (or the …Collection versions of those methods).

[kaashan]

Hi Walter,

Thanks for the clarification.

I would like to confirm on the accessibly aspect of GoJS library. On this page, under " Accessibility" section, it is mentioned that we need to generate fallback content outside of GoJS. So, if I understand correctly, since GoJS generates canvas based diagrams, it would not be possible to implement keyboard support on the diagrams itself. Like using keyboard tab navigation to select shapes inside the palette section, dragging the shape from palette to main diagram area using keyboard etc. is not possible and thus we need a fallback UI to achieve the task from a non-diagramming context.

[walter]

Actually, implementing keyboard support to perform certain actions within a diagram is quite possible. You will need to design exactly what behavior would be best for your app, which is why we have not already done that for you.

For example, there are many plausible behaviors for the arrow keys. Some of them have been implemented in the DrawCommandHandler extension. Read the code, try it out, and decide if one or more of the possible Arrow Mode behaviors is what you want. https://gojs.net/latest/extensions/DrawCommandHandler.html

Then consider what other behavior you need for other keys. Add it to your custom CommandHandler. That could include changing focus from the Palette diagram to your main Diagram.

[kaashan]

@walter: thanks again for the quick response. Switching focus from Palette to main Diagram can be done as the corresponding container DIV’s are defined in template/HTML. I also understand that once we have a shape selected, we can leverage the DrawCommandHandler extension and perform exposed action using keyboard.

But my actual concern is can we use keyboard tab navigation to select a shape inside the Palette/ Main Diagram once we have the focus on the Palette container/ Main Diagram container?. I think it won’t be possible as the containers have a canvas element to hold palette/diagram objects and we can’t tab navigate inside the canvas elements.

[walter]

I’m not sure what browser restrictions there are on how the Tab key can be used. You are correct that there is nothing within a Canvas element from the point of view of the browser’s focus mechansims.