Question
Anthem Inc
US
Last activity: 17 Feb 2021 10:20 EST
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
Accepted Solution
Pegasystems Inc.
IN
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
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.
Pegasystems Inc.
US
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.
Pegasystems Inc.
AU
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
Pegasystems Inc.
US
Hi Santosh
Please take a look at this PSC post and try to do somthing similar at your end.
https://collaborate.pega.com/question/how-show-busyindicator-click-button-section
Bhuvana
Accepted Solution
Pegasystems Inc.
IN
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
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.
Pegasystems Inc.
US
Thanks Santosh for letting us know that the response from Tilak worked! I've marked their reply as the Correct Answer to help others!
Pegasystems Inc.
IN
Thanks for the reply @SureshB4947. I'm glad that it worked for you.