Is there a way to define an event on dynamic tab of the tab group?
We have a requirement to generate an event (to be picked by the browser shell to interface with desktop app) whenever users switches between the dynamic tabs.
For better illustration..here is my dynamic tab from designer studio.
Same from the user portal..
We need to pick the details of the case that is being displayed in the active tab and fire an event so that the desktop app has the information of the case being viewed.
Is there an Out Of the Box way to achieve this? If not, any suggestions?
Accepted Solution
Pegasystems Inc.
IN
Hi Srinivasrao
Just before working on this script inspect the tab elements in DOM and see if the Tab elements are generated in <li> tags because in some cases tab elements may be generated in <td> tags
Write below script and included it in section containing tabs.
<script>
var eles = document.getElementsByTagName("li");
var i=0,count=0;
for(i;i<eles.length;i++ )
{
if(eles[i].hasAttribute("tabGroupName"))
{
var el=eles[i];
count++;
eles[i].onclick=function(){
var ev=this;
var tabSelected =this.title; // this could vary because if we are dirctly using Tab containers then the object will have textContent instead of title
var oSafeURL = new SafeURL("Gous-GCSWorkApp-Work.MyTestActivity");
oSafeURL.put("TestParam", tabSelected);
var strReturn = pega.util.Connect.asyncRequest('POST',oSafeURL.toURL(),'','');
};
}
}
alert("no of tabs are "+count);
</script>
In the below steps:
Hi Srinivasrao
Just before working on this script inspect the tab elements in DOM and see if the Tab elements are generated in <li> tags because in some cases tab elements may be generated in <td> tags
Write below script and included it in section containing tabs.
<script>
var eles = document.getElementsByTagName("li");
var i=0,count=0;
for(i;i<eles.length;i++ )
{
if(eles[i].hasAttribute("tabGroupName"))
{
var el=eles[i];
count++;
eles[i].onclick=function(){
var ev=this;
var tabSelected =this.title; // this could vary because if we are dirctly using Tab containers then the object will have textContent instead of title
var oSafeURL = new SafeURL("Gous-GCSWorkApp-Work.MyTestActivity");
oSafeURL.put("TestParam", tabSelected);
var strReturn = pega.util.Connect.asyncRequest('POST',oSafeURL.toURL(),'','');
};
}
}
alert("no of tabs are "+count);
</script>
In the below steps:
call some activity(in the below case MyTestActivity) and specify it's class . In the activity configure a property "TestParam". In the activity you can set the property of your choice and do the configuration as required.
var oSafeURL = new SafeURL("Gous-GCSWorkApp-Work.MyTestActivity");
oSafeURL.put("TestParam", tabSelected);
Please respond if any issues on this.
Pegasystems Inc.
IN
>> when users switches between tabs
Are you trying to perform actions on click of the tabs in the Dynamic container ?
Tcs
US
Yes, on the click of the tabs created from the dynamic (dynamic container) tab. From the above shown diagram, we need an even when user switches between R-10017514073 and R-100055140277 tabs.
Pegasystems Inc.
IN
Please check this discussion/thread:
Pegasystems Inc.
IN
Hi SrinivasaRao
This possibly can't be achieved using OOTB functionality. But we can achieve this using custom script where we can call an activity(which should accomplish your requirement) or perform some other action.
Accepted Solution
Pegasystems Inc.
IN
Hi Srinivasrao
Just before working on this script inspect the tab elements in DOM and see if the Tab elements are generated in <li> tags because in some cases tab elements may be generated in <td> tags
Write below script and included it in section containing tabs.
<script>
var eles = document.getElementsByTagName("li");
var i=0,count=0;
for(i;i<eles.length;i++ )
{
if(eles[i].hasAttribute("tabGroupName"))
{
var el=eles[i];
count++;
eles[i].onclick=function(){
var ev=this;
var tabSelected =this.title; // this could vary because if we are dirctly using Tab containers then the object will have textContent instead of title
var oSafeURL = new SafeURL("Gous-GCSWorkApp-Work.MyTestActivity");
oSafeURL.put("TestParam", tabSelected);
var strReturn = pega.util.Connect.asyncRequest('POST',oSafeURL.toURL(),'','');
};
}
}
alert("no of tabs are "+count);
</script>
In the below steps:
Hi Srinivasrao
Just before working on this script inspect the tab elements in DOM and see if the Tab elements are generated in <li> tags because in some cases tab elements may be generated in <td> tags
Write below script and included it in section containing tabs.
<script>
var eles = document.getElementsByTagName("li");
var i=0,count=0;
for(i;i<eles.length;i++ )
{
if(eles[i].hasAttribute("tabGroupName"))
{
var el=eles[i];
count++;
eles[i].onclick=function(){
var ev=this;
var tabSelected =this.title; // this could vary because if we are dirctly using Tab containers then the object will have textContent instead of title
var oSafeURL = new SafeURL("Gous-GCSWorkApp-Work.MyTestActivity");
oSafeURL.put("TestParam", tabSelected);
var strReturn = pega.util.Connect.asyncRequest('POST',oSafeURL.toURL(),'','');
};
}
}
alert("no of tabs are "+count);
</script>
In the below steps:
call some activity(in the below case MyTestActivity) and specify it's class . In the activity configure a property "TestParam". In the activity you can set the property of your choice and do the configuration as required.
var oSafeURL = new SafeURL("Gous-GCSWorkApp-Work.MyTestActivity");
oSafeURL.put("TestParam", tabSelected);
Please respond if any issues on this.
Tcs
US
Hi Gouse, Thank you! GCS got an enhancement request ( FDBK-15051) submitted for this. Also, the alternative that you suggest is working with minor tweaks to fit for my scenario (Dynamic Tab). I had to push the script block (section) to the section that gets loaded within the dynamic container so that every time a new tab (dynamic) gets added, the event is added. Thanks Monika and Gouse for participating in the conversation, appreciate it!
Updated: 3 Jun 2016 20:02 EDT
American Express
US
Hi Gouse,
I'm having a similar problem as the OP, but it wasn't resolved with your approach. I have copied your script snippet from earlier in this thread, with a few modifications:
1) I'm using jQuery " $(<elementNameOrIdentifier>).on('click', function() { .... " instead of getElementById, etc.
2) I'm console.log-ing to test the success of the .on(click) event
Here is a relevant code snippet:
( yes, I noticed that "count" is globally declared and fixed it :-D )
Here's an image of what each tab "li" looks like in the DOM. Right now I have 4 tabs open - one called Dashboard, 3 dynamically created. (I notice that the tab "My Workbasket" doesn't have a title attribute... but all the others do. This issue doesn't persist upon every refresh, so I'm not sure what to make of that.)
Hi Gouse,
I'm having a similar problem as the OP, but it wasn't resolved with your approach. I have copied your script snippet from earlier in this thread, with a few modifications:
1) I'm using jQuery " $(<elementNameOrIdentifier>).on('click', function() { .... " instead of getElementById, etc.
2) I'm console.log-ing to test the success of the .on(click) event
Here is a relevant code snippet:
( yes, I noticed that "count" is globally declared and fixed it :-D )
Here's an image of what each tab "li" looks like in the DOM. Right now I have 4 tabs open - one called Dashboard, 3 dynamically created. (I notice that the tab "My Workbasket" doesn't have a title attribute... but all the others do. This issue doesn't persist upon every refresh, so I'm not sure what to make of that.)
Regardless of how many tabs I have open, when I console.log the tabs as a jQuery object, I always get 2 tabs listed. (See 0 and 1 in the console.)
The alert claims that it's only seeing 2 tabs. This also happens when I only have "Dashboard" open, which is a sticky tab so it's always open.
When I click on "Dashboard", I am able to console.log the "title" attribute. When I click on the other tabs, the title doesn't print to the console. (in the image below, I'd clicked on "Dashboard" twice and "My Workbasket" twice. You can see "[2] Dashboard" in the console.)
Any ideas as to why it's not getting at the title attribute in the other tabs? And also why my jQuery object and alert is only registering 2 tabs? How can I get around this?
My ultimate goal is to capture the title value, and set it as the value of a Pega property, but that's not the technical aspect I'm worried about right now, just grabbing the title from the DOM element.