Appboard/2.4/builder/widgets/topology/selfref example

The following is a step by step “hands on” example of using the Topology Widget:

Create a new Data Source

1. Click the Data Sources toolbar option on the left.
2. Click the Add button.
3. Give the Data Source the name "TopologyExample" and choose the adapter type of File and then select CSV Directory .
4. Click the Add Data Source button and you will be presented with a new Wizard.
5. On the Connect wizard page use ${application.home}/data/TopologyExample as the directory value and leave all the other configuration options alone.
6. Click Next and you will be shown all the CSV Tables that were found in that directory.
7. [IMPORTANT] For NetworkNodes, click the Edit button and select UID as the primary key. Click the OK button.
8. [IMPORTANT] For NetworkTopology, click the Edit button and select both toID and fromID as the primary keys. Click the OK button.
9. Click the Next button and you will be shown the Associate page.
10. Click the Add Association button in the bottom left of the screen.
11. For the association that appears, in the left dropdown list, select TopologyExample.NetworkTopology.toID. Leave the middle dropdown list as EQUALS. In the right dropdown list, select TopologyExample.NetworkNodes.UID.
12. For the name, if it is not entered automatically, enter "NetworkNodes". Set the Type as One to One. Leave Publish as Always.
13. Click Add Association to add another association.
14. In the left dropdown list, select TopologyExample.NetworkNodes.UID. Leave the middle dropdown as EQUALS. In the right dropdown list, select TopologyExample.NetworkTopology.fromID.
15. For the name, if it is not entered automatically, enter "NetworkTopology". Set the Type as One to Many and leave Publish as Always. Click Finish to close the Wizard.
    

    Associations

Create a new Relationship Model

1. Navigate to the Data Collections page and switch the Collection Type to the Relationship mode by clicking on the toggle switch.
2. Click the Add button to launch the relationship model editor.
3. For the Model Name, enter "TopologyExampleModel".
4. First we need to add the “root” node type for our model. Click the Add Source button and pick TopologyExample.NetworkNodes
5. Next we want to add relationships to this root node. Click the green “+” button. In the dialog that appears, for the Relationship Target dropdown list, select NetworkTopology.NetworkNodes. Leave the Relationship Type as Child. Click Finish.
   

   Relation Model Editor
6. To describe the data with appearance rules, click the yellow “/” button.
7. In the window that appears, on the Label page, select the Name token to use it in the Label.
8. Click the Color tab and click the Add button to add a Color Filter.
9. In the window that appears, change the name to "Status Rule".
10. Click Add Color. Change the color to red and set the Property' to Status.
11. Leave the Comparator as = and in Value, enter "0".
12. Click the Add Color button three more times. The Property and Comparator dropdown list selections should stay the same for each color and the Values should increment by one for each color. If this did not happen, be sure to set Property to Status, Comparator to =, and Value to "1", "2", and "3". For these items, set the colors to orange, yellow, and green (orange for "1", yellow for "2", green for "3"). Click Close.
13. If the Color Filter dropdown list does not say Status Rule, click the list and select Status Rule.
14. Click the Icon tab and click the Add button.
15. In the window that appears, set the name to "Icon Rule" and click Add.
16. Click the Available Icons button and select the icon for Server 1. Click OK.
17. Click the dropdown list under Property and select Type.
18. Leave Comparator as = and for Value enter "Server".
19. Click Add two more times.
20. For the first item, set the icon to Router and in Value, enter "Router".
21. For the second item, set the icon to Monitor and in Value, enter "Workstation". Click Close.
22. If the Icon Filter dropdown list does not say Icon Rule, click the list and select Icon Rule.
23. Click Close to exit the Configure Appearance window and then click Close again to exit the Relation Model Editor.

Creating a Root-level Data Collection

1. On the Data Collections page, switch the Collection Type to the Flat Collection mode by clicking on the toggle switch.
2. Click Add create a new data collection.
3. For the Data Collection Name, enter "TopologyExampleRouters" and in the Data Source dropdown list, select TopologyExample.NetworkNodes.
4. Check the Filter option and click Add Rule.
5. In the Property dropdown list, select Type.
6. Leave Comparator as = and set Value to "Router".
7. Click OK.

Creating a Stack

1. Navigate to the Stacks & Boards page.
2. Click Add Stack, enter "TopologyExample" for the title, and click Add Stack.

Creating the Topology Widget

1. Navigate to the Widgets page and click the Add button to open the Widget Wizard.
2. Click the Widget Type button and select Diagrams and choose Topology. Click Use Selected.
3. Click the Data Collection dropdown list and select TopologyExampleRouters.
4. Enter "TopologyExample" for the Widget Name. Click Next.
5. Click the Relationship Model dropdown list and select TopologyExampleModel.
6. Set the Default Layout to Hierarchical Cyclic if it is not already selected and set Auto Node Drill Down to Enabled.
7. [Optional] Click the Link Arrows dropdown list and choose Directional, and increase the Max Number of Hops to see different levels of the hierarchy.
   

   Topology Widget Visualization
8. Click Next and then click Finish.
9. Select TopologyExample in the list of widgets and click the Board column to change the board to TopologyExample.

Viewing the Topology Widget

1. Navigate to the Builder page and click on the tab for the stack called TopologyExample.
2. Use the mouse to drag (click and drag) and zoom in or out (mouse wheel up or down) on the widget as needed.
3. Different nodes in the diagram can be clicked to perform a drill down and see connections at different levels in the hierarchy.