Can we modify the style in the tab page menu when the menu is selected

Now I have 3 cases in an application.According to the reqirement, I need to click the menu on the header to switch the case.When one case is selected , the style of this menu on the header should change , which is different style from other two cases that are not selected.

I wonder that if there is a property that will contain current case or some information like this , then I can user the value of this property as a visibility condition to show diffrent styles of a case menu.

Also , I will be grateful if you can offer me another way to complete this function.

Thanks in advance!!

***Updated by moderator: Lochan to update Categories***

**Moderation Team has archived post**

This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.


Keep up to date on this post and subscribe to comments

April 25, 2017 - 9:55am

Try this approach. Go to Designer Studio->User Interface->Skin and Portals. Open your application skin rule from there.Under component styles tab, select Menus.Under that you will get different style classes that can be used for menus and select Header Menu.Under that there will be 3 tabs to specify different styles for menu including Active style. Try to change there.

April 25, 2017 - 10:27pm
Response to ArnabGoswami

I‘ve tried this approach, but there is still a problem : I added 'create work' action as a action of clicking menu, then the style of selected menu changed when the section was loading; After the page finished loading, the style of the menu returned to the original style -- the same as the one when the menu was not selected.Can I keep the style of selected menu in the section before another menu is selected?

By the way , I have used layouts in the header as the case's menu to archive this requiement , using javascript to change the style , but the same problem as above appeared.

April 26, 2017 - 12:14pm

I think create a style class for layout with the same details and use the same for that layout.

April 26, 2017 - 11:56pm
Response to ArnabGoswami

Can you give me the detail operations that has been tested OK to achieve this requirement?

Is there any pega rule or expression to record current case's information, such as pyIsMobilePhone (ruleset: Pega-UIEngine:07-10-17 class: @baseclass)


In fact , we have used pyIsMobilePhone rule as a visibility condtion of a layout in another application successfully.

Thank you!

August 3, 2017 - 9:47am
Response to chenc944

Hi Chenc,

we too face the same issue on click the active style is applied and reverted back to inactive style immediately. Please let us the know if the issue is fixed