Configuration Examples

This section contains examples of how to configure buttons, context menus, toolbars, and Tree Grid rows to use in Tree Grid View. The configuration items in this section are examples of advanced functionality.

You can use the Data Template to select data to be used for Configurable User Interface (CUI) handlers. The following example shows the data template associated with a Part:

You can add or change icons in either Tree Grid View or Query Builder. In the following example, icons identify both Part BOM and User in a query:

You can use the Change Icon Template to change the icons that appear. Use the following procedure:

1. Right-click the first row in the grid. The context menu appears.

2. Click Change Icon. The Image Browser dialog box appears.

3. Click Icon Template and then click {Part.thumbnail} in the Helper area to change to the {.} icon.

4. Return to the Part Grid and right-click the Part BOM row.
5. Click Change icon in the context menu. The Image Browser dialog appears.
6. Click Innovator and then click an icon.

The following procedure is an example of how to create a configurable button:

1. Click the PresentationConfiguration ItemType in the grid, click the TOC Access tab, and add Administrators.

2. Open the TOC and click Presentation Configuration.

3. Click CreateNew Presentation Configuration. The Presentation Configuration form appears.
4. Enter tgv_part in the Name field and select a color such as orange.

5. Click the New Command Bar in the Command Bar Section relationship tab to add a new related Item.

6. Enter tgv* in the Name cell of the Search grid and add the tgv_part_toolbar and tgv_part_ContextMenu Items:

7. Make sure to add the Items to the relationship grid.

8. Add an identity to the For Identity column. The specified Identity determines which users have access to the buttons and menus.
9. Click the button to save the tgv_part Presentation Configuration Item.
10. Right-click tgv_part_toolbar and select Open from the context menu:

The tgv_part_toolbar presentation configuration item appears. It contains the tgv_view button.

11. Click the New Command Bar Item button in the Command Bar Item tab. The Select Item Type dialog appears:

12. Select Button and click OK to add it to the command bar.
13. Right-click the Item to access the context menu and click Open. The tgv_view Presentation Item appears.

Additional logic can be added to the context menu or toolbar items when they are initialized by adding an Init Method. Users can review the rb_viewItemHandler Method code and develop similar code for their own uses.

You can select an image for the toolbar button you created using the following procedure:

1. Click the Image button and click the Select an image link. The Image Browser dialog appears.

2. Select the appropriate image and click the button.
3. Click to save the Presentation Configuration.

Once you save the Presentation Configuration you need to link it to a Tree Grid View definition before you can use it. Use the following procedure:

1. Go to Contents --> Administration --> Configuration --> Tree Grid Views and click the Search button. A list of Tree Grid views appears in the search grid.
2. Click Part TGV.

3. Click the ellipses in the Linked Toolbar/Context Menu field. The Presentation Configuration search dialog appears.

4. Select tgv_part and click .

5. Save the Tree Grid View.
6. Load an Item configured for TGV to see the new toolbar button. For example, Figure below shows a Part Item.

The following is an example of how to configure a context menu using custom code:

1. Select the tgv_part Presentation Configuration Item, right click tgv_part_context in the Command Bar Section grid and select Open in the context menu.

The tgv_part_context_menu Item appears.

2. Click to edit the tgv_part_context_menu Item.
3. Click Create New Presentation Configuration. The Presentation Configuration Item appears.
4. Enter tgv_part in the Name field and select the orange color.

5. Click the New Command Bar button in the Command Bar Section to add a new related Item.
6. Enter tgv* in the Name cell of the search grid and add both tgv_part_toolbar and tgv_part_ContextMenu Items.

7. Make sure to add the Items to the Relationships grid.

8. Add an identity in the For Identity column. This Identity determines which users will have access to the buttons/menus.
9. Click to save the tgv_part Presentation Configuration Item.
10. Right-click tgv_part_toolbar and select Open from the context menu.

The tgv_part_toolbar Presentation Configuration Item appears. It contains the tgv_view button.

11. Click the New Command Bar button in the Command Bar Item tab. The Select Item Type dialog appears.

12. Select Menu and click OK. It appears in the Command Bar Item tab.
13. Right-click the Menu ItemType and click Open in the context menu.
14. Right-click tgv_part_menu in the Command Bar Item grid and select View Command Bar Item. The tgv_part_menu Presentation Item appears.

The rb_viewItemInitHandler Method is used to determine whether or not the data template is valid.

You can determine the number of rows that appear in a Tree Grid view using one of the following methods:

• Click the Grow button to temporarily expand the view.
• Select the Auto Grow On Refresh checkbox to keep the view expanded.

These methods are described in more detail in the following sections.

Use the following procedure:

1. Click the Grow button to expand the view. The number of levels that appear is determined by the value you enter in the Grow depth field.

2. Click the Show More link to further expand the number of related Items at any level.
3. You can change the number of levels that appear in the grid either by entering a different value in the Grow depth field or by editing the related Tree Grid View definition.

Any changes you make in the Max Visible Children on Expand and Max Grow Levels fields automatically appear in the associated item screen. For example, if you change the value in the Max Grow Levels field to 4, it will appear in the Grow Depth field for the associated Part:

The Auto Grow on Refresh check box appears on the Tree Grid View form.

Selecting this checkbox keeps the Tree Grid View expanded to the default level whenever you do a refresh. The Max Grow Level property value is used when you:

• Open the tab that displays the Tree Grid View.
• Click .

The Grow Depth value displayed on the tab is used when you:

• Click Apply on either the Display Settings or Modify Parameters dialog boxes.
• Click the following toolbar buttons: , , , .
• Click the button and then click Create New Revision in the drop-down menu.

Clicking the Display Settings or Parameter Mapping buttons also initiates a refresh.

If you do not select the Auto Grow on Refresh check box, the Tree Grid view maintains the default behavior of contracting the Tree Grid view on refresh.

Use the following procedure:

1. Select a row in the Tree grid view.

2. Click the Trim button to collapse the rows.

The Display Settings dialog enables you to change the way information is displayed in the Tree Grid View. Use the following procedure:

1. Go to Contents --> Design --> Parts. In this example, we use RootPart.

2. Click the Display Settings button. The Display Settings dialog appears with the Tree Grid view configuration.

3. Enter a number in the Max Visible Children on Expand field to change the number of child nodes that are returned when the parent Item is expanded.
4. Click the Toggle Visibility button for a related Item to turn it off. The selected Item is highlighted and grayed out. In the example below, the selected part has a recursive association which is also turned off.

5. Click Apply. The grid is refreshed.

6. Click Grow. The grid does not show the related Items; it only shows the Part BOM Relationships.

Once you have created the Query Definition and configured the Tree Grid View, click the Show Parameter Mapping button. The Map Parameters dialog box appears:

Click the green arrow to make the doc_state parameter visible to users in the Tree Grid View. Administrators can also modify the parameter mapping and choose alternative values for the Label and Default Values fields. The Data Type List field is similar to the properties assigned to ItemTypes.

When a query has been running for several seconds, a splash screen similar to the following appears with the Cancel button that, when selected, will stop the request and terminate any server-side processes used to execute the query.

Support for the following cell view data types has been added in Aras Innovator 38:

• List
• Boolean
• Floating Point
• Integer
• Date enhancements for Short/Long Date/time formatting

You can use the List Cell View Type to create list properties in a Tree Grid View as shown in the following procedure:

1. Click the Show Editor button to view the parameters.

2. Right-click an entry in the Authoring Tool column and select Cell Display Settings

3. Select List in the Cell View Type drop-down list and enter the name of the list in the List Name field. When applying the List data type, the List Item label will appear in the Tree Grid View.
4. Click Save. Figure below shows the result when displaying a List Property.

The following example shows how to use the Boolean Cell View Type. The example uses the sample PE_CAD_ReverseItemsPart Tree Grid View Definition:

1. Click the Show Editor button to view the parameters:

2. Right-click an entry in the Changes column and select Boolean in the Cell View Type drop-down list:

3. Click Save.

The following example shows the use of the Decimal Cell View Type. This Cell View Type enables the user to specify a Precision and Scale for an associated Double or Floating Point property type. In this example, the Cost column in the TGV Definition refers to the Cost property in the associated QD:

1. Right-click an entry in the Cost column and select Decimal in the Cell View Type drop-down list.
2. Enter appropriate values in the Precision and Scale fields and click Save.

The following example also uses the PE_CAD_ReverseItemsPart TGV. This example contains a QD that refers to the Cost floating point property.

1. Click the Show Editor button to view the parameters.

2. Right-click an entry in the Cost column and select Float in the Cell View Type drop-down list.

The Date cell view type now supports the short date, long date, and date with time formats for date properties. A secondary selection drop-down menu is automatically displayed when the Data Cell View Type is selected initially.

In this example, the created_on date type property is displayed as the Long Date Time Cell View Type. The results appear as shown in Figure below.

Selecting Short Date does not provide enough information; see the figure above.

In this example, the created_on date type property is displayed as the Long Date Time Cell View Type. The results appear as shown in the figure below.

The Integer Cell View Type provides an alternative to the conversion of numeric values to text for display in the Tree Grid View. Using Integer, a value is sorted numerically (ascending or descending) unlike Text, whose resulting values are sorted numerically instead.

A common usage for Integer is Version (generation).

Tree Grid View (TGV) supports multi-row selection by default. This enhancement allows users to select multiple rows and apply Grow and Trim commands across all selected items at the same time.

Multi-row selection is enabled automatically for all Tree Grid Views. Users can:

• Use Ctrl+Click to add individual rows to the current selection
• Use Shift+Click to select a continuous range of rows
• Execute Grow and Trim commands on all selected rows

No configuration changes are required to enable this functionality.

If a solution requires single-row selection behavior, multi-select can be disabled using one of the following methods:

1. URL Parameter

Append the following parameter to the Tree Grid View URL: ?multiSelect=false

2. Programmatic API

Use the Tree Grid View grid API to control the multi-select state:

• options.tgvModule.getMultiSelect()
• options.tgvModule.setMultiSelect(isMultiselectEnabled : Boolean)

When one or more rows are selected:

• The system determines the topmost selected parent in each hierarchy chain
• If both a parent and its child are selected, only the parent row is expanded
• Each topmost selected row is expanded based on the configured Grow Depth value
• Expansion operations are executed in parallel for improved performance
• When no rows are selected:
• The Grow command behaves as Expand All and expands all rows in the Tree Grid View

This behavior extends the Grow functionality described in Section “Expanding and Collapsing Tree Grid Rows”, while maintaining backward compatibility.

Before expanding:

After expanding:

When multiple rows are selected:

• The Trim Level command invokes collapseLevel for each selected row
• collapseLevel collapses all expanded items at the same hierarchical level as the selected row
• The behavior for each row is identical to the single-row Trim Level behavior described in Section “Expanding and Collapsing Tree Grid Rows”

Before collapsing:

After collapsing:

Custom client methods that operate on Tree Grid View selections must be updated to support multiple selected rows. Accessing selected rows:

• Retrieve the Tree Grid instance using window.mainPage.getTreeGrid()
• Access the selected row identifiers via treeGrid.settings.selectedRows
• Iterate over the selectedRows array to apply logic to each selected row

Certain actions may not be applicable when multiple rows are selected. Command bar buttons can be conditionally disabled based on the current selection count. Update Client method to disable a command bar button when more than one row is selected:

• Retrieve the Tree Grid instance using window.mainPage.getTreeGrid()
• Access the selected rows using treeGrid.settings.selectedRows
• Check whether selectedRows.length is greater than one
• Return { disabled: true } from the button state handler