Question

On click of "x" next to case need to display a custom popup

Hello All,

We have some requirement in my project. When we initiate the case, on click of "x" mark next to case id need to display a custom popup with "Cancel" and return to "Return to work". On click on Cancel, need to navigate to the dashboard screen. On click of "Return to work", stays in the same screen.

Could any of you have the similar requirements? please help us.

Thank you.

***Edited by Moderator Marissa to update platform capability tags****

Correct Answer
November 18, 2019 - 2:47pm

Hello @KiranG34,

Thanks for providing the details.

I've tried the scenario in PEGA 7.2.1 and found that the code of PEGA 8 is not working. Please update the non-auto generated section with following code.

  1. <script type="text/javascript">
  2.  
  3. if(pega){
  4. if(pega.u){
  5. if(pega.u.d){
  6. pega.u.d.attachOnload (function(){pega.u.d.gDirtyOverride = true;
  7. }, true);
  8. }
  9. }
  10. }
  11. </script>

Also, I see that you are trying to include the non-auto generated section where the code present in "User Portal" harness instead of work object harness. The work object harness usually would be Perform unless it is customized with a different name in application. So better, open the work object as a dynamic container tab and open your Live UI tool to find the harness by pointing the Live UI to rules with in the work object content. Open the most recent harness found in Live UI and include the non-auto generated section.

It works for me in PEGA 7.2.1 too with same approach. The only difference is code snippet. which I have given here. Hope you are able to achieve the functionality this time.

Please feel free to reply if you have any questions.

Thank you,

Regards, Cherb.

Comments

Keep up to date on this post and subscribe to comments

Pega
November 13, 2019 - 2:20pm

Hello @KiranG34,

Please follow the following steps to achieve the requirement. I assume that you are on PEGA 8 (the solution should work for all versions of PEGA) and DynamicContainer is used to show tab dynamic tabs.

I'm making use of "Dirty popup" concept to achieve the requirement. Usually, the dirty popup shown when we try to close the work object with unsaved data and the popup is promoted to challenge the user to discard the changes or save the changes and close. I'm customizing this feature with minimal code effort to achieve the requirement and the popup should be shown irrespective of the form is dirty or not (always)

Prerequisites :

On your perform harness or any harness that is showing in the tab content should have the following setting "unselected" always

Open Harness > Go to Advanced tab > Do not display dirty warnings (checkbox should be unselected)

Solution :

1) Open the rule work-pyDirtyCheckConfirm and save into application rule set and update the button lables and actions as needed

Cancel button Actions configuration :

Return to work button configuration of actions tab :

Now popup that to be shown is ready. This will be shown when we click on X icon of the tab only when form is dirty. So, now we have to take make sure that form is always dirty.

Create a non-auto generated section and copy and paste the following code snippet. [The following code is copied and edited from the section @KiranG34.pxDisableClientDirtyDetection. if you are different PEGA version, open the rule and update the code set("gDirtyOverride", true) instead of   set("gDirtyOverride", false) ]

<script type="text/javascript">

  if(pega){

    if(pega.u){

      if(pega.u.d){

        pega.u.d.attachOnload (function(){

          pega.ui.HarnessContextMgr.set("gDirtyOverride",true);

                                         }, true);

      }

    }

  }

</script>

 

My section after implementing the code looks like,

 

 

Embed this section in the harness header section or somewhere in the harness. The goal is this should be the first one in the harness while render.

 

Thats it ! 

 

When we try to close the work object (Clicking X icon) you should see the popup always

 

 

If you want to update the modal header and content, please do that in the pyDirtyCheckConfirm section as mentioned in STEP1.

 

Please feel free to post reply if you have any questions.

 

Thank you,

 

Regards, cherb.

November 13, 2019 - 6:09pm
Response to cherb

We are using pega 7.2.1. I have tried you approach but not able to get it. Here is my implementation.

1).Open Harness > Go to Advanced tab > Do not display dirty warnings (checkbox should be unselected) //Done

Harness rule: Class: Pega-CRMPortal

                        Name: SPMPortalWorkSpace

2). I have saved pyDirtyCheckConfirm  to my work specific layer with button configuration.

3). I have modified the auto-generated section: pxDisableClientDirtyDetection  , i also tried with creating new section with the code you have provided.

4). Embedded the section "pxDisableClientDirtyDetection" section inside the harness "SPMPortalWorkSpace"

Testing:

I have open the portal-->initiated the multiple transaction-->Without entering any data tried to close, the work object is closing without popup. 

I have entered some information(unsaved) in the work object and tried to close by click on the "x" mark, i was able to see the customized popup with 2 buttons.

Please let me know if i am missing anything here.

Pega
November 14, 2019 - 3:00pm
Response to KiranG34

Okay, Now you are good with one scenario. Showing the modal when closing the work object tab and making functionality around cancel and return to work button.

You need to show the same modal even when the form is not dirty. If you we done with this, you may be all set !, Am I correct ?

If yes, Please paste the code that you have in pxDisableClientDirtyDetection or in your non-auto generated section and the screen print of where you have included in the harness. 

This is the key step to show the modal always when clicking X icon

I will review and let you know the steps based on that.

Thank you,

Regards, Cherb.

November 14, 2019 - 5:27pm
Response to cherb

If yes, Please paste the code that you have in pxDisableClientDirtyDetection or in your non-auto generated section and the screen print of where you have included in the harness. 

--This is where the issue is i guess. DiertyCheck is not setting always. This is why on click of "x" i dont see the customized pyDirtyCheck popup.

 

Thank you.

Pega
November 15, 2019 - 10:16am
Response to KiranG34

Hi @KiranG34,

Please post the code snippet as reply this post. Also, Please take a screenshot of the harness where you embed the non-autogenerated section with code and post/upload the screenshot as/in reply.

I will review those and let you know where it is breaking.

Thank you,

Regards, Cherb.

November 15, 2019 - 3:23pm
Response to cherb

Hello @cherb,

I have attached the screenshots, please let me know if you need any information from my end.

Thank you.

Pega
November 18, 2019 - 2:47pm
Response to KiranG34

Hello @KiranG34,

Thanks for providing the details.

I've tried the scenario in PEGA 7.2.1 and found that the code of PEGA 8 is not working. Please update the non-auto generated section with following code.

  1. <script type="text/javascript">
  2.  
  3. if(pega){
  4. if(pega.u){
  5. if(pega.u.d){
  6. pega.u.d.attachOnload (function(){pega.u.d.gDirtyOverride = true;
  7. }, true);
  8. }
  9. }
  10. }
  11. </script>

Also, I see that you are trying to include the non-auto generated section where the code present in "User Portal" harness instead of work object harness. The work object harness usually would be Perform unless it is customized with a different name in application. So better, open the work object as a dynamic container tab and open your Live UI tool to find the harness by pointing the Live UI to rules with in the work object content. Open the most recent harness found in Live UI and include the non-auto generated section.

It works for me in PEGA 7.2.1 too with same approach. The only difference is code snippet. which I have given here. Hope you are able to achieve the functionality this time.

Please feel free to reply if you have any questions.

Thank you,

Regards, Cherb.

November 18, 2019 - 2:53pm
Response to cherb

@cherb It worked. Thank you so much.

Pega
November 18, 2019 - 3:48pm
Response to KiranG34

Hi @KiranG34

I'm glad that it worked and you are able to achieve your requirement.

Please make this post as "Answered" so that other members can find the right answer instead of going through the all replies.

Thank you,

Regards, Cherb.