Navigation form - Completing the Editor tab

Use the Editor tab to specify the structure of the navigation defined for this navigation rule. Navigation is built as a hierarchy of nodes. Each node in the navigation rule represents an option that is presented within the user interfaces that include this navigation structure (for example, as a menu bar in an end user portal).

Immediately after using the New window to create a new navigation rule, the Editor tab displays a default node as a starting point. You build a navigation structure by adding nodes as siblings or children to the structure, and then specifying the details for each node. Right-click a node in the hierarchy to use the context menu choices on that selected node: Add Above, Add Below, Add Child Node, and Delete. Alternatively, select the node and use the buttons:

  • Add above — Click to add a new node before the selected node and at the same level in the hierarchy (as a sibling).
  • Add below — Click to add a new node after the selected node and at the same level in the hierarchy (as a sibling).
  • Add child node — Click to add a new node as a child of the selected node.
  • Delete — Click to delete the selected node.
  • Refresh — Click to refresh the structure as displayed on the Editor .

Select the Localize labels, tooltips, and descriptions check box to indicate the names for these elements will use field values for localized text. The names you enter serve as the field value's label. The Field Name key values are properties pyCaption for labels, pyToolTip for tooltips, and pySummary for descriptions.

In the Editor tab, the following information about the navigation structure is displayed:

Field Description
Label This column displays the nodes defined in the navigation. The displayed text is the label that is used for this node in the user interface at run-time (for example, as a choice in a menu bar in a portal).

To specify the details associated with a node, such as its label and tooltip, double-click the node in the Label column. The Node Details dialog opens where you make your selections for the node.

Type One of the following node types: Item, Item List, Reference, Custom, Separator, Selected Item. A node's type is specified in its node details.
Action(s) The interaction that happens when the node is selected in the user interface that includes this navigation structure (for example, when the user clicks the node in a portal). A node's action is specified in its node details.

Node Details

When you add a node, the Node Details dialog appears. The available fields and tabs on the dialog are based on the selected Navigation rule type, Standard or Mobile and the Type in the Node Editor. The available types are:

  • Item — When an item is selected, invoke actions defined on the Actions tab.
  • Item List — Auto generate a list of nodes based on the contents of a Page List or Page Group. Provide the page details on the Pages & Classes tab.
  • Reference — Refer to another navigation rule. Appears only on Standard Navigation rules.
  • Custom — Define an activity to control the behavior of the node. Appears only on Standard Navigation rules.
  • Separator — Insert a horizontal separator in place of the selected node. Appears only on Standard Navigation rules.
  • Selected Item — Set the context of the generated menu to one selected item. Use this when defining right-click context menus. Define actions on the Actions tab. Appears only on Standard Navigation rules.

Identifiers

The provision of a unique Test ID to a navigation rule for a test suite supports better automated testing of a Pega application.

When creating a control that supports Test ID, the Test ID field is initially blank. Use a combination of numbers, letters, and underscores, or click the Generate ID button to create a time stamp as a unique ID. The attribute data-test-id is then generated for the selected element.

When you save an existing section, any supported controls that do not have a Test ID will generate the one automatically. You can override these with a custom ID at a later time.

Once generated, you can view your Test ID in HTML or display it in the Live UI panel.

You also have the option to have all controls that support Test IDs in a ruleset updated in bulk.

A standard, out-of-the-box developer role, PegaRULES:SysAdm4, includes the privilege for Test ID. To disable Test ID for this role, modify the pxTestID privilege.

Item

Field Description
Type Item
Label Enter a text description, property reference, or field valueto label the node on a menu.
Tooltip Enter a text description, property reference, or field value to provide a mouseover tooltip for the node.
Description Enter a text description, property reference, or field value to provide a description of the node.
Image Source The image appears to the left of the label in the menu. Enter one of the following to reference an image for this node in a menu:
  • Simple image: A relative URL to an image within the Pega Platform application, including your own uploaded binary file in Dev Studio by clicking Configure > User Interface > Gallery > Images. For images without a CSS class, preface the image name with "images/", and include the file extension. For example, enter "images/pzimagefilename.png".
    Note: CSS image masking is applied to images used in the toolbar navigation menu.
  • Property: The property may refer to a CSS reference or a relative path (URL) to an image within your application.
  • Icon class: The CSS classname that contains an icon with a background image reference, such as a mobile-friendly icon from the Pega-Mobile RuleSet. Over 300 icons compatible for mobile devices are available in Dev Studio > User Interface >Image Library . These icons, prefaced with pzpega-mobile_, may be referenced in the Main or Toolbar Navigation rules. Do not include the .png extension.
Badge Label Enter static text or a property reference, or field value for the label that appears over the image referenced above. For example, enter a property that references work object urgency such that the urgency value overlays the image.
Badge Format Select a formatting option for the badge style.

Enter static text or a property reference for the first line of text that appears on the label.
Visibility Select a when to define when the node is shown.
Visible for privilege Select a privilege rule to define to which operators the node is shown.
Enabled Select a when to define when the node is enabled.
Enable for Privilege Select a privilege rule to define to which operators the node is enabled.
Advanced Settings Add parameters to be used as metadata in a custom user interface element.
Presentation tab  
Selection Select one of the following:
  • None — No selection marks appear.
  • Checkmark — Displays checkmark or radio button next to selected item.
  • Group — Enables users to select a group of items (defined by the Group ID ) with a single selection.
Selected When Optional. Appears when you select Checkmark or Group. Enter a when condition rule that controls when the check box or radio button is displayed on the menu.
Group ID Appears when you select Group. Enter a text value to identify the group.
Actions tab  
After Action Navigation refreshes automatically when the user takes an action from the context menu defined by this node. Select one of the following:
  • Refresh Current Item — Refresh only the selected item (recommended).
  • Refresh All Items — Refresh the entire list. Use this option when information on other rows (or parent nodes in a tree) needs to be updated.

Item List

Field Description
Type Item List
PageList/Group Select the Page List or Page Group on which to construct the item list
Label Enter a text description, property reference, or field value to label the node on a menu.
Tooltip Enter a text description, property reference, or field value to provide a mouseover tooltip for the node.
Description Enter a text description, property reference, or field value to provide a description of the node.
Image Source The image appears to the left of the label in the menu. Enter one of the following to reference an image for this node in a menu:
  • Simple image: A relative URL to an image within the Pega Platform application, including your own uploaded binary file in Dev Studio > User Interface > Image Library . For images without a CSS class, preface the image name with "images/", and include the file extension. For example, enter "images/pzimagefilename.png".
    Note: CSS image masking is applied to images used in the toolbar navigation menu.
  • Property: The property may refer to a CSS reference or a relative path (URL) to an image within your application.
  • Icon class: The CSS classname that contains an icon with a background image reference, such as a mobile-friendly icon from the Pega-Mobile RuleSet. Over 300 icons compatible for mobile devices are available in Dev Studio > User Interface >Image Library . These icons, prefaced with pzpega-mobile_, may be referenced in the Main or Toolbar Navigation rules. Do not include the .png extension.

    To learn how to upload your own icon fonts into an application, see the Pega Community video tutorial Implementing icons fonts in Pega applications.

Badge Label Enter static text or a property reference, or field value for the label that appears over the image referenced above. For example, enter a property that references work object urgency such that the urgency value overlays the image.
Badge Format Select a formatting option for the badge style.

Enter static text or a property reference for the first line of text that appears on the label.
Pre-Activity Specify an activity to run before the item list is populated.
Post-Activity Specify an activity to run after the item list is populated.
Actions tab  
After Action Navigation refreshes automatically when the user takes an action from the context menu defined by this node. Select one of the following:
  • Refresh Current Item — Refresh only the selected item (recommended).
  • Refresh All Items — Refresh the entire list. Use this option when information on other rows (or parent nodes in a tree) needs to be updated.

Reference

Field Description
Type Reference
Navigation Rule Select a navigation rule to insert into the node.
Visibility Select a when to define when the node is shown.
Visible for privilege Select a privilege rule to define to which operators the node is shown.

Custom

Field Description
Type Custom
Class Name Select the class in which the desired activity is located
Activity Select an activity to control the behavior of the node
Visibility Select a when to define when the node is shown.
Visible for privilege Select a privilege rule to define to which operators the node is shown.
Enabled Select a when to define when the node is enabled.
Enable for Privilege Select a privilege rule to define to which operators the node is enabled.

Separator

Field Description
Type Separator
Visibility Select a when to define when the node is shown.
Visible for privilege Select a privilege rule to define to which operators the node is shown.
Enabled Select a when to define when the node is enabled.
Enable for Privilege Select a privilege rule to define to which operators the node is enabled.

Selected Item

Field Description
Type Selected Item
Defer load and always refresh on display Click the Defer load and always refresh on display check box to fetch child-level nodes from the server when the menu is selected or hovered over.
Label Enter a text description, property reference, or field value to label the node on a menu.
Tooltip Enter a text description, property reference, or field value to provide a mouseover tooltip for the node.
Description Enter a text description, property reference, or field value to provide a description of the node.
Image Source The image appears to the left of the label in the menu. Enter one of the following to reference an image for this node in a menu:
  • Simple image: A relative URL to an image within the Pega Platform application, including your own uploaded binary file in Dev Studio > User Interface >Image Library. For images without a CSS class, preface the image name with "images/", and include the file extension. For example, enter "images/pzimagefilename.png".
    Note: CSS image masking is applied to images used in the toolbar navigation menu.
  • Property: The property may refer to a CSS reference or a relative path (URL) to an image within your application.
  • Icon class: The CSS classname that contains an icon with a background image reference, such as a mobile-friendly icon from the Pega-Mobile RuleSet. Over 300 icons compatible for mobile devices are available in Dev Studio > User Interface >Image Library. These icons, prefaced with pzpega-mobile_, may be referenced in the Main or Toolbar Navigation rules. Do not include the .png extension.
Badge Label Enter static text or a property reference, or field value for the label that appears over the image referenced above. For example, enter a property that references work object urgency such that the urgency value overlays the image.
Badge Format Select a formatting option for the badge style.

Enter static text or a property reference for the first line of text that appears on the label.
Visibility Select a when to define when the node is shown.
Visible for privilege Select a privilege rule to define to which operators the node is shown.
Enabled Select a when to define when the node is enabled.
Enable for Privilege Select a privilege rule to define to which operators the node is enabled.
Advanced Settings Add parameters to be used as metadata in a custom user interface element.
Actions tab  
After Action Navigation refreshes automatically when the user takes an action from the context menu defined by this node. Select one of the following:
  • Refresh Current Item — Refresh only the selected item.
  • Refresh All Items — Refresh the entire list. Use this option when information on other rows (or parent nodes in a tree) needs to be updated.
Advanced tab  
Show-When Select a when to define when the node is shown.
Show-Privilege Select a privilege rule to define to which operators the node is shown.
Enable-When Select a when to define when the node is enabled.
Enable-Privilege Select a privilege rule to define to which operators the node is enabled.
Action See Item Node type — Completing the Node Details form.
Advanced tab
Show-When Select a when to define when the node is shown.
Show-Privilege Select a privilege rule to define to which operators the node is shown.
Enable-When Select a when to define when the node is enabled.
Enable-Privilege Select a privilege rule to define to which operators the node is enabled.
Additional Parameters Add parameters to be used as metadata in a custom user interface element.
Selection Select one of the following:
  • None — No selection marks appear.
  • Checkmark — Displays checkmark or radio button next to selected item.
  • Group — Enables users to select a group of items (defined by the Group ID ) with a single selection.
Selected When Optional. Appears when you select Checkmark or Group. Enter a when condition rule that controls when the check box or radio button is displayed on the menu.
Group ID Appears when you select Group. Enter a text value to identify the group.
Advanced tab — Appears on Navigation rules of Type and .  
Show-Privilege Select a privilege rule to define to which operators the node is shown. Not available in Mobile.
Show-When Select a when to define when the node is shown. Not available in Mobile.
Enable-Privilege Select a privilege rule to define to which operators the node is enabled. Not available in Mobile.
Enable-When Select a when to define when the node is enabled. Not available in Mobile.
Additional Parameters Add parameters to be used as metadata in a custom user interface element.
Activity tab —  
Pre-Activity Specify an activity to run before the item list is populated.
Post-Activity Specify an activity to run after the item list is populated.

About Navigation rules