Question

How to show the OOTB Processing Icon and disable the screen on click of Custom Button

HI There ,

I have a requirement to disable the entire section on click of a button so that user doesn't have an option to choose anything on the screen or submit to move forward. On click of the button we are making back to back SOAP calls to fetch data. To handle this requirement I have added Refresh Current Harness, Refresh section event on click of the button. But by doing so it is not showing Pega OOTB loading image. how do we achieve this requirement.

Thanks in Advance,

Santosh

Correct Answer
September 16, 2019 - 2:28pm

Hello Santhosh,

I see that you are looking to disable the editing capability for end user for the entire section, for that you are looking to show "busy indicator" (processing icon) to appear on the section to make it to convey that it is still loading not to enter anything, If I am correct, the please see my recommendation below.

1) Please dont configure "Refresh current harness", this will make the entire window reload, so that needed parameters to show the busy indicator also reloads here, so there would be a undefined target to show the busy indicator when refresh the harness, so our effort or implementation to show the icon will be undefined or error prone. Hence, you dont see busy icon, please remove this configuration.

2) You can keep the "Refresh section". As per product design, if a section (or any ajax request) takes more than 2 seconds to get the response from server then we show busy indicator by default. So, our goal is make the ajax request (section reload) to take more time to show the icon, this can be done simply by configuration a pre-activity for the "Refresh section" action. Please use step method "wait" in activity step and give some value which suits the requirement. The bad with this is, you should know the wait time when configuring this. If the value always vary, Please follow the non-auto way of implementing the same.

a) Open the harness (the most recent one when you go through live ui) and add "pzShowBusyIndicator" js file to it as shown below

b) Go to the button (where you configure refresh this section) and implement the RunScript action to show busy indicator as shown below  (This action must be very first one in the list of actions)

c) Use following action (This should be the last one in list of actions ) to enforce the busy indicator to disappear 

Thats it !! It should show you busy indicator and then it goes off, This duration of busy icon appearance is based on the time to execute the step RunActivity (in your case "Refresh this section") . If you want to increase the duration of the icon appearance then you would find a different place for the "hide" method call that is last "RunScript" call.

Please feel free to post your thoughts and questions if any.

Thank you !!

Regards, Cherb.

Comments

Keep up to date on this post and subscribe to comments

September 11, 2019 - 9:02pm

Please follow the below steps.

1) On click on the button, set a property. 

2)Use this property on the Disable when condition on the other fields, and check "Run disabled condition on client".

Hope it helps.

September 13, 2019 - 11:44am
Response to Rachit_Agarwal

Hi rachit,

Thanks for your input,tere are many options in the screen and we cannot put disable when on every option. 

 

 

Thanks,

Santosh 

September 13, 2019 - 8:50pm
Response to santosh0115

You can also have two DL's one with disabled and use visibility condition - "on the property".

Pega
September 13, 2019 - 6:35am

HI Santosh,

You can use below two JS API , to show and hide the loader, 

pega.u.d.setBusyIndicator(null,true,null)  // To show the loder icon
pega.u.busyIndicator.hide() //To hide the loader icon 

September 13, 2019 - 11:36am
Response to karma1

HI abhishek,

Thanks for input, I have tried with the script but still did not work any inputs ?

 

Thanks ,

Santosh

 

 

 

 

Pega
September 13, 2019 - 12:11pm

Hi Santosh

Please take a look at this PSC post and try to do somthing similar at your end.

https://community1.pega.com/community/product-support/question/how-show-busyindicator-click-button-section

Bhuvana

September 16, 2019 - 1:18pm
Response to mahab_GCS

HI Bhuvana,

Thanks for the suggestion,I have tried with the approaches mentioned in the url but it did not work for me.

 

 

Thanks,

Santosh 

Pega
September 16, 2019 - 2:28pm

Hello Santhosh,

I see that you are looking to disable the editing capability for end user for the entire section, for that you are looking to show "busy indicator" (processing icon) to appear on the section to make it to convey that it is still loading not to enter anything, If I am correct, the please see my recommendation below.

1) Please dont configure "Refresh current harness", this will make the entire window reload, so that needed parameters to show the busy indicator also reloads here, so there would be a undefined target to show the busy indicator when refresh the harness, so our effort or implementation to show the icon will be undefined or error prone. Hence, you dont see busy icon, please remove this configuration.

2) You can keep the "Refresh section". As per product design, if a section (or any ajax request) takes more than 2 seconds to get the response from server then we show busy indicator by default. So, our goal is make the ajax request (section reload) to take more time to show the icon, this can be done simply by configuration a pre-activity for the "Refresh section" action. Please use step method "wait" in activity step and give some value which suits the requirement. The bad with this is, you should know the wait time when configuring this. If the value always vary, Please follow the non-auto way of implementing the same.

a) Open the harness (the most recent one when you go through live ui) and add "pzShowBusyIndicator" js file to it as shown below

b) Go to the button (where you configure refresh this section) and implement the RunScript action to show busy indicator as shown below  (This action must be very first one in the list of actions)

c) Use following action (This should be the last one in list of actions ) to enforce the busy indicator to disappear 

Thats it !! It should show you busy indicator and then it goes off, This duration of busy icon appearance is based on the time to execute the step RunActivity (in your case "Refresh this section") . If you want to increase the duration of the icon appearance then you would find a different place for the "hide" method call that is last "RunScript" call.

Please feel free to post your thoughts and questions if any.

Thank you !!

Regards, Cherb.

September 24, 2019 - 9:38am
Response to cherb

Hi Cherb,

Thanks for your response. this worked for me.

 

 

Thanks,

Santosh

September 24, 2019 - 10:10am
Response to SureshB4947

Thanks Santosh for letting us know that the response from Tilak worked! I've marked their reply as the Correct Answer to help others!

Marissa | Community Moderator | Pegasystems Inc.

Pega
September 24, 2019 - 10:12am
Response to SureshB4947

Thanks for the reply @SureshB4947. I'm glad that it worked for you.