You are here: Reference > Rule types > Navigations > Navigation form - Completing the Editor tab

Navigation form
Completing the Editor tab
  1. About 
  2. New 
  3. Editor 
  4. Pages & Classes 
  5. History 

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:

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

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 7 Platform application, including your own uploaded binary file in Designer 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 Designer 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 7 Platform application, including your own uploaded binary file in Designer 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 Designer 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 PDN 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 7 Platform application, including your own uploaded binary file in Designer 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 Designer 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 Standard and Mobile.  
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

Open topic with navigation