Graph Control

Graph control is used to show structure data of the context item in the graphical structure. Graph control is bound to a Query Definition, that defines which RelationshipTypes, RelatedItemTypes and properties to show in the control. By double clicking any node in the Graph, a flyout will be shown with the selected item properties along with its relationships. Graph control comes with two modes, read-only mode shows structure and properties, you can only navigate the structure and see properties of the selected node. You can also open the specific node in its own tab by selecting Open icon from the toolbar. In the edit mode, you can insert new nodes in the structure by selecting the Insert icon from the toolbar. In the InsertNode Flyout, allowed RelationshipTypes of the selected node are shown, by selecting specific RelationshipType and keyword, you can search and select a specific item to insert under the selected node. In edit mode, you can also edit the properties of the selected node. In order delete a specific node in edit mode, Delete icon can be selected from the toolbar. When you add Graph control on the page, it just shows only those Query Definitions defined with the same ItemType associated with the template.

• Name: It is used to uniquely identify control inside the template.
• Label: It is used to show title on the control. It can be localized by defined Languages and Locales inside innovator.
• Query Definition: It allows you to select the query that can be used to fetch data from Innovator database. It shows a list of all Query Definitions available in Innovator which are defined for the ItemType associated with the template.

• Nodes: It also allows you to configure the name shown in the GraphNode based on multiple properties. You can also specify font and background colors for the node at each relationship level. For each relationship, it adds a section to define filter expression, conditional formatting and columns that should be shown in the table at runtime.

  

• Show Label: It controls whether Label can be shown at the top of the Graph control.

• Commands: Using Commands section, you can show or hide standard commands shown on the Graph toolbar. You can also define custom command by selecting Type as Button or DropDown and entering command name. For each custom command, you can set On Click, Can Show, On Load options.

  Each custom command can be configured with ‘On Click’ handler to perform certain action. It can show a shortcut to the existing Innovator actions like Structure Browser, Where Used, Workflow Signoffs etc. It can also be configured to call a custom script. By selecting Script option in the dialog, you can associate custom script that contains code to interact with other Worksheet columns or controls in the Wizard. Script can also have code to interact with server by sending a request.

  Each custom command can be configured with ‘Can Show’ option to define custom JavaScript that will return a boolean value. If returned value is true, command will be shown otherwise command will be hidden.

  Each custom command of type ‘DropDown’ can be configured with ‘On Load’ option to load options for the DropDown at runtime.

  For each command, you can configure the icon. You can also show or hide the command by selecting checkbox under Hide column.

  

  

  

  

• Height: Graph control can be rendered in two different modes for the Height.
  
  • Height: Explicit
    In this mode, Max Height’ should be supplied to limit the height of the control in the page. Control auto grows until it reaches ‘Max Height’, after that it shows scrollbar.
  • Height: Automatic
    In this mode, control auto grows until it reaches available page height, after that it shows scrollbar for the body. This mode can be set on Graph control only when the page that contains Graph control has only simple form fields apart from this Graph control.
• Orientation: It allows you to set the orientation for the graph structure shown in the control. Orientation can be horizontal or vertical.
• Node Details Flyout: It allows you to set the NodeDetails flyout width in percentage.
• Insert Flyout: It allows you to set the flyout width in percentage. It also allows you to show Add command in the toolbar in the insert flyout. Using this command, new item can be created on the fly as part of the insert operation.
• Access: It allows you to define roles which can access control. Roles (in the form group identities) can be at Show and Edit level. When control is hidden because you do not have defined role, data associated with this control is not even fetched from server.
• Read Only: Based on the option selected for Read Only, control can become read-only even if you can edit the properties used inside the page with lock. You can select one of the options like ‘Yes’, ‘No’, ‘Expression’, or ‘Script’. If Read Only is selected as ‘Yes’, you can only navigate structure, and when the node is double clicked its properties are shown in the flyout. If Read Only is selected as ‘No’, along with the navigation, you can also edit the structure as well as properties of the selected node. Expression allows you to define a Boolean expression using properties from the current and previous pages (in case of multi-page application) to conditionally make the control read-only if expression is evaluated to true. Expression will be evaluated based on the cached property values on the client. Script allows you to write custom JavaScript code that should return Boolean value. If returned value is true, the control will be read-only. In order to see graph control in edit mode, you need to put context item in edit mode.
  

  • Read Only: Yes

    

  • Read Only: No

    

• Display Condition: Based on the option selected for Display Condition, the control will be shown or hidden in the wizard at runtime. You can select one of the options like ‘Always Show’, ‘Always Hide’, ‘Expression’, or ‘Script’. Expression allows you to define a Boolean expression using properties from the current and previous pages (in case of multi-page application) to conditionally display the control if expression is evaluated to true. Expression will be evaluated based on the cached property values on the client. Script allows you to write custom JavaScript code that should return Boolean value. If returned value is false, the control will be hidden.
• Font: It allows you to set the required font and size for the node names and form field values of the Graph control.
• Margin: It allows you to set the required top, right, bottom, left margins with respect to adjacent controls.
• On Load: OnLoad event allows you to write custom logic that will be executed after the data in the control is loaded. Please refer to the Template Customization section for more details.
• On Insert: On Insert event will be launched after Item has been inserted in the Graph control. Event handler will receive inserted item details via eventData, this object will be available in the scope of the event handler code. Please refer to the Template Customization section for more details.
• On Select: On Select event will be launched after selecting the item in the Graph control. Event handler will receive selected item details via eventData, this object will be available in the scope of the event handler code. Please refer to the Template Customization section for more details.