Dynamic ports implementation

Hi,

I’m working with a Data Flow sample. My nodes can be seen in the image.
image

I’m simply trying to add and remove ports dynamically like Dynamic Ports sample does.

How can I implement it? Anyone can help?

You started with the Data Flow sample, Data Flow Diagram. If you look at the implementation, you can see how there is a different template for each type of node. For example, the “Join” template has two input ports and five output ports. The node data object has a “type” property identifying the template name and no other way to indicate what ports each such node should have.

Whereas the Dynamic Ports sample, was designed so that each node data has to specify what all of the ports are for that particular node. The port descriptor objects are held in Arrays, allowing ports to be removed or added. Dynamic Ports has four Arrays, one for each side of the node, but for your app you probably only want to use two Arrays, so you could simplify the code.

Yes, that’s exactly my point thank you. But when I try to add new port via contextMenu (image 1), I can add port data to the relevant array with no problem (Image 2). image image

But physically no ports are being created. I can’t see that last added “right0” port in the node. What would cause that? Thank you.

Did you call Model | GoJS API within a transaction?
Always use Model methods when making changes to the model.

Actually I’m calling Model | GoJS API.
But unlike the Dynamic Ports my Data Flow Diagram doesn’t have a Diagram.nodeTemplate containing any itemTemplate and all of node data. I’m creating nodes with makePort and makeTemplate functions just like in the dataFlow sample. Would that be the reason? Thanks.

All diagrams have to have the needed data in the model and the templates defined to represent that data in the manner that you want.

No data is visualized unless the templates show it. The templates are responsible for both appearance and behavior.