It’s been long since I made a post on user interface rules! In this post, I am going to explain about, how to configure a navigation rule.
What is a navigation rule?
You might have seen this in all the websites where you can click and move to another screen / page.
Let’s see it from the facebook site.
- On the left panel, you can see the navigation points where you can click and open the respective pages.
- So navigation is purely an user interface rule which can be used to navigate in any pega user portal.
First let’s explore how pega used their OOTB navigation rules in their application.
I hope I mentioned this in my previous posts – If you find it difficult with any rule type in Pega, just go and explore the OOTB inbuilt rules.
Which rules can refer the navigation rules?
- Normally section can refer the navigation rule with the help of menu control!
So, now the next question is, Where do we use the menu control?
a) From section rule advanced options.
You can drag and drop the menu control and refer the navigation rule in the menu control properties.
b) In section – action set on control / layout
You can use menu action. In the menu action / control, you can refer the navigation rule.
Now let’s see, how Pega used the navigation rules
How pega used the navigation rules?
a) In designer studio – menu
You can click on the designer Studio and navigate to various options.
Let’s explore how pega built it.
Step 1: Use the live UI.
Place it on the designer studio and click the pointer icon to open the rule.
Step 2: You will the section ‘pzDesignerStudioMenu’.
Now, you should have guessed, how it is implemented?!
Yeah – by action set – Menu control
Step 3: You can verify, by clicking the Designer Studio link properties.
pzMainMenu is the navigation rule. We will check about the configuration points in navigation rule later 🙂
let’s see another example.
Step 1: Launch the default manager portal.
Step 2: Use live UI on the left panel and open the section.
Step 3: you will see the section ‘pyPortalNav’ with menu control.
Step 4: Click and open the menu control properties. You see the menu bar directly refers the navigation rule.
Now, you know the 2 ways of referring the navigation rule – In action set and directly through menu control
What are the configuration points in navigation rule?
Again, I am going to explain it via some existing Pega inbuilt rules 🙂
Step 1: Search and Open the navigation rule ‘pzMainMenu’, which is used in designer studio menu
- You can see now nodes ( rows) and configured. One parent node and one child node – pyMainMenu
Looks very short?? – Cool, one navigation rule can refer other navigation rules.
You see there are 3 main options to configure in an navigation rule
Think about this landing page – You can see three level hierarchy is in place.
a) Label – We all know its usage. To provide description label Eg – Application, Guardrails, Compliance Score etc.
b) Type – you can configure the type as 6 options.
1. Item – It is the normally used type. When a node is defined as type – Item, then it performs the actions configured. Eg – usually when the position is last in the hierarchy, then we can configure them as item.
2. Item List – Same as Item, but when the options has to be sourced from a pagelist / page group property then you can define the type as item list.
3. Reference – This type is used to reference another navigation rule.
In our example – pzMainMenu navigation rule refers to pyMainMenu.
4. Custom – You can specify an activity to control the behavior. Don’t use it often.
5. Seperator – Use to provide a separator line between options.
In the above example, if you need a separator between between the first 5 and last 5, then you can use a node as type separator
6. Selected Item – This is normally used, when you want to define the menu in right click action (context menu) set inside the grid. I will explain it with example, later in this post 🙂
c) Actions – You can configure what actions to be performed when the node is clicked.
Note: Actions are not applicable when node type is reference, separator or Custom.
Let’s see, how pega used the types and actions for the designer studio menu.
Step 1: You have to click and open the referenced rules, till you reach pxMainMenu
pzMainMenu -> pyMainMenu ( this can be customized) -> pxMainMenu
- You can see one node is of type – Item (since not child hierarchy) with actions as run script.
- All other nodes reference other navigation rules.
- You can see for the all the menu items from applications to User interface, Pega specified (reference) separate navigation rules.
Double click on any node to see the configuration.
Step 2: double Click on the first node of type – Item and Label – Search all options.
- On the right side, you see more configuration points.
I believe some are self explanatory – for example – Label, tooltip, description, visibility, image source etc.
I will be concentrating more on configuring the type and actions.
You see the type is configured as Item. Click on the actions tab.
You see some script is getting invoked to support searching.
Step 3: Let’s analyze the last navigation – user Interface. Click on the referenced link pzUserInterfaceMainMenu
You see there are 5 child nodes (hierarchy) for the User Interface.
But from the designer studio -> User Interface, I see only four options!!
JS unit testing is missing. You might have guessed the reason why?!
- There must be some visibility condition for the JS unit testing node. You can double click on the node and check on your own.
You see the actions – Landing page is commonly used in 4 nodes.
Double click on the parent node – User Interface and go to the actions tab.
You see the action set is configured as
On click – Landing page. Landing page action uses Harness to load the screen. I will make a post of harness very soon.
You can see the harness name – pzLPUIUserScreens.
Just to verify, Go the designer studio -> and click on User Interface. Put Live UI on the landing page.
You see the harness is rendered – pzLPUIUserScreens 🙂
Step 4: You can analyze other child nodes under User Interface category.
Expand all the child nodes.
You can see some interesting actions like Wizard configured!!
If you have a requirement something similar to invoke a wizard, mimic the configurations.
Pega developer life can be so easy, when he / she starts exploring how pega built their base product 🙂
I believe, now you can explore all the options in the designer studio menu on your own!
Step 5: Let’s see one more example on the navigation used in Manager portal left menu.
Open the navigation rule – pyCaseManagerLinks.
You will all the options as a list in the manager portal left panel. You can also explore the type and actions of individual node.
It’s time for a tutorial.
Requirement: In a repeating grid, sourced by any list, say countrylist– the user can right click and see a menu where the user can add a new row or delete a new row.
Pre-requisites: I am going to use a data type called countries.
If you had created any data type before – reuse the same.
Please visit the below link, to know more about data types
- Data type – country (or any)
2. Configure a section in the case stage ( I chose ‘pyEnterCaseDetails’ section to display it in the new harness) with the repeating grid sourcing from the editable data page D_CountryList.
From the user portal, it looks like this.
Pre-requisite is ready!
So the requirement is, User can right click and add / delete a row from the menu.
Step 1: Create a new navigation rule to perform the actions – Add / delete in the menu.
Records -> User Interface -> Navigation
Click create and open.
Step 2: Decide how many nodes and relationship and create nodes.
- 2 nodes 1 for Add and another 1 for Delete. No parent child relationship.
- Use the tools to add or delete new nodes
Step 3: Configure the nodes
Double click on the first node and configure the label, type and actions.
Label – Add Item
Type – Selected Item
Actions – Add Item
- Click on action tab and configure an action for click’ event – Under List select Add Item
Then click Ok.
- Do the same steps for node 2 with label – delete item and action as Delete Item
We have successfully created a new simple navigation rule.
Step 4: Now refer the newly created navigation rule in the repeating grid.
- Open the section, where you included the grid and click on the grid(table) layout properties
- Go to actions tab and configure Menu action for Double-Click event.
Include the navigation rule AddorDelete.
We are done with the configurations 🙂
Step 5: let’s test it from the user portal
Create the corresponding case and navigate to the screen where you added the grid.
Right click on any country name. You will see the menu
Oh Wait!! Configure another action as set focus, because I don’t see on which row I clicked.
Note: You can add multiple events / multiple actions
Step 6: let’s test again Right click on USA row.
You can see USA row is highlighted, now click delete item.
So we are at the end of tutorial 🙂
You have seen this right click actions in many places in designer studio.
Remember activity 😀
I just explored and mimicked the same in the tutorial :P.
Hope you liked this post!!
See ya all in my next post. Take care!