GoJs : Entity Relationship with button example

GoJS
1

Hi ,

I am new to go js , want to evaluate before recommending to buy. Can you please share any example with entity relationship with button’s inside clickable.

Regards
Ram

2

If you want to add a button to the node as a whole, just add it the way that you want to the node template. Note that Entity Relationship already has a button in the node template, to expand/collapse the node. Look for the “PanelExpanderButton” in the template.

If you want a button or two for each item in the list of items, add the button(s) to the itemTemplate. I cannot think of an existing sample that does this, but it is easy to try yourself. Just add to the itemTemplate in some sample this element:
$("Button", $(go.TextBlock, "Click Me!"), { click: function (e, button) { alert (" clicked " + button.panel.data); } } )
Note that depending on how deep in the visual tree of the itemTemplate you put the button, you might need to walk up the chain of .panel more than once to get to the Panel that has the item data.

3

Thanks for the reply, Please help me to fix the following issues.

  1. is there any simple way to add button only to parent
  2. font awesome (like add and edit icon) icon to button background
  3. How to pass div id dynamically using angular js eg: element (do you have any example on entity relationship example using angular js directive, i want to use angular js for this …)
  4. some image is showing before the button .
    It would be great if you can make changes to my code and share me back, Thanks in advance.
    Please see my code below:
    **********Start Code (Please see in edit mode) ***********
Entity Relationship

end

4

  1. It depends on where you want the button to be. You can read about the kinds of Panels that GoJS offers at GoJS Panels -- Northwoods Software. Many of the other Introduction pages offer other examples, such as: GoJS Nodes -- Northwoods Software.

  2. Just create the Shape and either specify a predefined figure, as shown by GoJS Shapes, or use an SVG geometry string, as shown by Icons GoJS Sample.

  3. There is an example of using GoJS within the AngularJS framework at: Minimal GoJS Sample with AngularJS. That defines a directive for the Diagram and a controller for the app.

  4. I don’t know what you mean by “image is showing before the button”.

5

How to add button inside node for entity relationship graphs + some icons on the buttons . any sample example please.

My Code goes here…

var itemTempl =
$(go.Panel, “Horizontal”,
$(go.Shape,
{ desiredSize: new go.Size(10, 20) },
new go.Binding(“figure”, “figure”),
new go.Binding(“fill”, “color”)),
$(go.TextBlock,
{ stroke: “#333333”, font: “bold 16px roboto” }, new go.Binding(“text”, “name”)),
$(“Button”, $(go.TextBlock, “+ Add”),{click: function (e, button) { alert (" clicked " + button.panel.data); console.log(button.panel.data)}}),
$(“Button”, $(go.TextBlock, " Edit"), { click: function (e, button) { alert (" clicked " + button.panel.data); } } )
);

        // define the Node template, representing an entity
        myDiagram.nodeTemplate =
                $(go.Node, "Auto",  // the whole node panel
                        { selectionAdorned: true,
                            resizable: false,
                            layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
                            fromSpot: go.Spot.AllSides,
                            toSpot: go.Spot.AllSides,
                            isShadowed: true,
                            shadowColor: "#C5C1AA" },
                        new go.Binding("location", "location").makeTwoWay(),
                        // define the node's outer shape, which will surround the Table
                        $(go.Shape, "Rectangle", { fill: lightgrad, stroke: "#756875", strokeWidth: 4 }),
                        $(go.Panel, "Table",
                                { margin: 8, stretch: go.GraphObject.Fill },
                                $(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
                                // the table header
                                $(go.TextBlock,
                                        {
                                            row: 0, alignment: go.Spot.Center,
                                            margin: new go.Margin(0, 14, 0, 2),  // leave room for Button
                                            font: "bold 16px sans-serif"
                                        },
                                        new go.Binding("text", "key")),
                                // the collapse/expand button
                                $("PanelExpanderButton", "LIST", { row: 0, alignment: go.Spot.TopRight }),
                                // the list of Panels, each showing an attribute
                                $(go.Panel, "Vertical",
                                        {
                                            name: "LIST",
                                            row: 1,
                                            padding: 6,
                                            alignment: go.Spot.TopLeft,
                                            defaultAlignment: go.Spot.Left,
                                            stretch: go.GraphObject.Horizontal,
                                            itemTemplate: itemTempl
                                        },
                                        new go.Binding("itemArray", "items"))
                        )  // end Table Panel
                );  // end Node
6

First, most people cannot edit your post, so they will not be able to see your code. If you want to include some code in your post, quote it so that the code is visible and formatted for everyone.

Second, if your question is about adding a button to a node, you just need to show the node template definition.

Third, once you show what you have tried in your node template, you need to describe how the results are not what you wanted. Provide a sketch of how you want it to look differently.

Fourth, have you read Get Started with GoJS and all of the relevant pages at GoJS Introduction -- Northwoods Software ? I quoted some of those pages in an earlier response. I bet there are already some examples like what you want.

7

Thanks for changing your post to show the node template.

There is already a “PanelExpanderButton”. Where is the button that you wanted to add? How is your button not appearing the way you want it to be?

8

Thanks Walter, I am able to render the buttons on the node.

Can you please help me on the below.

  1. how to add icon as background to the button ( i have tried Icons GoJS Sample)
  2. How can i set different link color for each node.

var itemTempl =
$(go.Panel, “Horizontal”,
$(“Button”, $(go.TextBlock, “+ Add”),{click: function (e, button) { alert (" clicked " + scope.model.selectedNodeData); console.log(scope.model.selectedNodeData)}}),
$(go.TextBlock,{ stroke: “#333333”, font: “bold 12px sans-serif roboto” }, new go.Binding(“text”, “name”)),
$(“Button”, $(go.TextBlock, " Edit"), { click: function (e, button) { alert (" clicked " + button.panel.data); } } )
);

myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{
selectionAdorned: false,
layerName: “Foreground”,
reshapable: true,
routing: go.Link.AvoidsNodes,
corner: 5,
curve: go.Link.JumpOver
},
$(go.Shape, { stroke: “#888”, strokeWidth: 2.5 }),
$(go.TextBlock,
{
textAlign: “center”,
font: “bold 11px sans-serif”,
stroke: “#ff6d00”,
segmentIndex: 1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding(“text”, “text”)),
$(go.TextBlock,
{
textAlign: “center”,
font: “bold 11px sans-serif”,
stroke: “#ff6d00”,
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding(“text”, “toText”))
);

9

I don’t understand what you mean by having an icon (some Picture or some Shape) as the background for a button.

You can have the contents of the button be a Picture or a Shape instead of a TextBlock:

$("Button",
    $(go.Picture, "someURL", { width: ..., height: ... }),
    { click: function(e, button) { ... } })

I also don’t know what you mean by setting different link color for each node.

Did you want all links coming out of a node (for example) to have the same color? That can be implemented in different ways depending on where the information is stored and what may change dynamically. Take a look at the PERT sample and the General Linking Validation example.