Question
Merkle UK
GB
Last activity: 12 Feb 2023 3:59 EST
how to hide stage chevron in Pega
We are using Pega 8.6.3 (Theme-cosmos) and want to hide stage chevron based on a condition. There is old post - Hide chevron stage based on condition | Support Center (pega.com) , based on the same issue but it's using UI-Kit.
The section -pzStageName is final and internal so not able to apply the visibility condition.
***Edited by Moderator Marije to add Capability tags***
Areteans
GB
There are two possibilities to achieve this
1. Using JSP tags in User Work Form Mention the required condition in <pega: when> tag by taking any property reference or passing a parameter. then include the styles to hide chevron with visibility attribute as hidden in the same UWF.JSP tags Refer to this for clear info on JSP tags
2. Write a JS code by mentioning the condition under "If" and using CSS selectors tag the parent div and write CSS styles i.e. "content-visibility: hidden, height:0" which hides the chevron based on the condition we passed in the If loop . e.g. If .IsStudent == "true" the apply styles. Then call this JS file on the harness rule.
Refer this Image to tag chevron
CSS Selector is " .workarea-view-scroll-wrapper div:nth-child(2).case-main>.item-1 "
Please Refer following image, When I applied content-visibility: hidden styles chevron got hidden
There are two possibilities to achieve this
1. Using JSP tags in User Work Form Mention the required condition in <pega: when> tag by taking any property reference or passing a parameter. then include the styles to hide chevron with visibility attribute as hidden in the same UWF.JSP tags Refer to this for clear info on JSP tags
2. Write a JS code by mentioning the condition under "If" and using CSS selectors tag the parent div and write CSS styles i.e. "content-visibility: hidden, height:0" which hides the chevron based on the condition we passed in the If loop . e.g. If .IsStudent == "true" the apply styles. Then call this JS file on the harness rule.
Refer this Image to tag chevron
CSS Selector is " .workarea-view-scroll-wrapper div:nth-child(2).case-main>.item-1 "
Please Refer following image, When I applied content-visibility: hidden styles chevron got hidden
You can use same selector and same styles in both the approaches. Hope this will give you an idea how to fulfill this requirment.
Please let me know if you require more info on this.
Thanks!