Documentation for how to show Custom Nodes on the UI

[Ghilteras]

Could you guys publish documentation about how to add Custom Nodes to the UI? These links is all I found so far:

• https://gorules.github.io/jdm-editor/?path=/story/decision-graph--custom-node
• https://github.com/gorules/zen-go/tree/master/examples/custom-node

But they just show the Custom Nodes already added to the UI, not the process to make them appear. For the same of simplicity let's assume we just want to add the ones in the example folder. How would we make them show up in the UI? We are using the docker-compose deployment, but I can switch to k8s if it's easier.

[justin0108]

Hi @Ghilteras

Did you reference their storybook implementation?
https://github.com/gorules/jdm-editor/blob/master/packages/jdm-editor/src/components/decision-graph/dg.stories.tsx

I took reference from there and added some custom nodes to my editor.

[Ghilteras]

@justin0108 that JDM is the UI component standalone, right? We can't find any documentation about how to hook it with the zen-go engine. Also seems that the docker-compose bundled BRMS app does not let you add custom nodes because the UI is already web packed together with the zen engine, so you can just use the demo as is, but we cannot add any custom node there. Our PoC would revolve entirely on custom nodes, but we are unable to test it without proper documentation

[justin0108]

Hi @Ghilteras,
I did not try to hook the custom nodes with zen engine but I only did try to make the custom node appear on my editor by doing:

const customNodes = [
  createJdmNode({
    kind: 'pingNode',
    displayName: 'Ping',
    group: 'ping',
    shortDescription: 'Used for ping',
  }),
  createJdmNode({
    kind: 'pongNode',
    displayName: 'Pong',
    group: 'ping',
    shortDescription: 'Used for pong',
  }),
];
...
<JdmConfigProvider>
  <DecisionGraph
    customNodes={customNodes}     <--- with this line I am able to see the 2 nodes on my editor
    ref={graphRef}
    value={graph}
    components={[decisionNodeSpecification]}
    reactFlowProOptions={{ hideAttribution: true }}
    onChange={props.onChange}
    simulate={graphTrace}
    panels={[simulatorPanel]}
  />
</JdmConfigProvider>

Also I am using their editor @gorules/jdm-editor as a npm lib in my application which is why I am able to do my own customisation. I am not sure if the docker image bundled BRMS app allows any flag which will subsequently be passed into their editor such that custom node will appear. But i doubt so.