Question
CTS
IN
Last activity: 7 Jun 2017 11:06 EDT
Need to close a tab by putting a close icon in that tab (Note:The tab is appearing as a tab group in a section )
Hi Team,
I have a tab group in a section e.g X1 then X2. My requirement is to close X2 tab by putting the close icon in the tab.
As this tab is appearing in a tab group of section, OOTB close icon is not appearing by default that is why Pega OOTB close is not working in this scenario.
Can you please help me how to make the Close icon functional in this context(Note: If I put a close icon beside the tab name and try to make it functional).
Thanks
Sudarshan
***Updated by Moderator: Marissa to update categories***
-
Like (0)
-
Share this page Facebook Twitter LinkedIn Email Copying... Copied!
Pegasystems Inc.
IN
Hi Sudarshan,
I have tried the requirement you asked for but, the requirement seems to be confusing the tab group layout is designed to have static content. If you are trying to delete or add any tab this must be done at the design level.
If you want the close a tab or open a tab on UI level we suggest you to go for dynamic containers with the tabbed layout.
Also, please elaborate on your requirement why exactly are you looking for closing static tabs ?
CTS
IN
Hi,
My requirement is: I have a tab group in a section say X1 and then X2. Now I am opening a portal and as per our design, the section will load by default(Which contains the tab group). As it is loading as a tab group of section, it is not providing any OOTB cross icon.
I have to implement the similar Pega OOTB cross icons functionality for X2 tab, So that it can be closed on click of the cross icon.
Note: The cross icon has to appear by default when the section is loading, so that it can be click and close the tab.
How to implement this ?
Thanks
Sudarshan
Virtusa
IN
Hi Sudarshan,
As per my knowledge Cross Icon in Pega OOTB tab group is not possible. I suggest you to Use a Repeating Tab layout using a Pagelist property.
We had done similar Usecase earlier in pega 6.2. Below are the steps we followed.
1. Create a Pagelist Porperty in Data-Portal/Any class which meets your situation.
2. Use Repeating layout of type Tab Repeat and refer the Pagelist property in it.
3. Before loading the Screen set you section Name X1 in PageList(1).XYZProperty and X2 in PageList(2).XYZProperty and Follow below steps to render the Sections.
Create Rule-Html-Fragment with below code.
<%
String pageReference="";
ClipboardPage myStepPage = tools.getStepPage();
ClipboardProperty parent = myStepPage.getParentProperty();
if (parent != null) {
pageReference = pageReference + parent.getReference();
} else {
pageReference = myStepPage.getReference();
}
%>
<pega:save name="PageRef" value="<%=pageReference%>" />
2. create a control with below code:
<pega:include name="Get_PageRef" type="Rule-HTML-Fragment" />
Hi Sudarshan,
As per my knowledge Cross Icon in Pega OOTB tab group is not possible. I suggest you to Use a Repeating Tab layout using a Pagelist property.
We had done similar Usecase earlier in pega 6.2. Below are the steps we followed.
1. Create a Pagelist Porperty in Data-Portal/Any class which meets your situation.
2. Use Repeating layout of type Tab Repeat and refer the Pagelist property in it.
3. Before loading the Screen set you section Name X1 in PageList(1).XYZProperty and X2 in PageList(2).XYZProperty and Follow below steps to render the Sections.
Create Rule-Html-Fragment with below code.
<%
String pageReference="";
ClipboardPage myStepPage = tools.getStepPage();
ClipboardProperty parent = myStepPage.getParentProperty();
if (parent != null) {
pageReference = pageReference + parent.getReference();
} else {
pageReference = myStepPage.getReference();
}
%>
<pega:save name="PageRef" value="<%=pageReference%>" />
2. create a control with below code:
<pega:include name="Get_PageRef" type="Rule-HTML-Fragment" />
<pega:when test='$this-value != "" '>
<div id='RULE_KEY' NAME='BASE_REF' BASE_REF='<pega:reference name="$save(PageRef)" mode="normal" />' node_type='SECTION_BODY' body_type='INCLUDE' node_name='DispSection' classname='<pega:reference name=".pxObjClass" mode="normal" />' body_index='1'>
<pega:include ref="$this-value" type="Rule-HTML-Section" />
</div>
</pega:when>
4. In repeat layout use the created control with Property which holds the section Names.
5. Change the default delete icon to appropriate cross icon. also based on the pagelist count you can disable or Enable delete icons on Section X1 or X2.
Delete the Add Icon in Repeat layout to avoid the user click.
Though it is not right approach to proceed. you can give a try by get it reviewed by your LSA.
Thanks,
Kiran
Ruletronics
IN
Hi GARAPATIKIRAN,
Can you please tell me how to keep that X2 icon in middle (allignment) of tab. Is there any pega option to keep it middle or can you suggest me any method to do that. thanks!
prasanth
Virtusa
IN
Hi Prasanth,
Just replace the OOTB image with your image. Find the attached document for design time and run time screenshots.
if you have only alignment problem you can achieve by styling the cell(padding-top or padding-bottom might help you).
Thanks,
Kiran
CTS
IN
Hi Kiran,
If we put the cross icon similar to above way which u have suggested, will it close the tab ?
Will it work the same way as Pega OOTB does ?
Please let me know.
Thanks
Virtusa
IN
Yes. If you are using Tab Repeat layout.
CTS
IN
Hi Kiran,
I have tried the approach which you have mentioned. but unfortunately it is not working in my scenario. However I am using tab group layout.