Lock any action on a page.

Nikhil Shravage

Question

I have developed an application with the Outsystems technology, where-in I present a pop-up to the user and once the user fills the information, the user clicks 'Save' button. Now I need to disable all the page contents as it takes a long time to save and in between that the user may click anything else.

So I need to lock the page using JavaScript, with a message that tells user to wait until the process finishes.(on-click of the 'Save' button)

Any hints ?

Thanks.

04 Sep 2012

Gonçalo Martins

Staff

Hi Nikhil,

To do what you want, you can take several ways.
1- By the box you can use a component called "Feedback_AjaxWait" from the Richwidgets eSpace, that shows a message if Ajax calls take too much time to show.
2- If you want to do it by hand, you can use javascript to disable and then enable the onclick events on the page during the action processing.
3- You can use jQuery to do something similar to the "Feedback_AjaxWait":
One easy way to achieve this is to define a css class like this:

.someName-class
{
   background-color: #F0F0F0;
   filter:alpha(opacity=50); /* IE */
   opacity: 0.5; /* Safari, Opera */
   -moz-opacity:0.50; /* FireFox */
   z-index: 20;
   background-repeat:no-repeat;
   background-position:center;
   width: 100%;
   height: 100%;
   position:absolute;
   top: 0px;
   left: 0px;
}

Use jQuery to add this class to an empty div that is the first child of the body element. Remove the class to disable modal mode.
Your notification should have a z-index higher than the z-index of the dark-class. All items that need to be disabled must have a lower z-index.

Hope this helps..

Best Regards,
G.M.

04 Sep 2012

Evert van der Zalm

MVP

Hello Goncalo,

Just to add one suggestion to choice number 3 since it can also be doen without jQuery:

In the first child div of the body you can set an extended property: class where the value can be set by an localBoolean (for example: disablePageYN). So the value would be: if(disablePageYN, "someName-class", "").

After the popup save action add the notify action (RW), then the action selected in the popup widget will be executed. At the start of the OnNotify action you set the disablePageYN = true and do an ajax refresh of the first child div, then you execute your actions. At the end of that action you can set the disablePageYN=false and do a refresh of the div again.

On this way the page would be disabled when the action is started and enabled when the action is finished.

Kind regards,
Evert

05 Sep 2012

1 reply

24 Sep 2012

Show thread

Hide thread

Gonçalo Martins

Staff

Evert van der zalm wrote:

Hello Evert,

That's also a good approach and complement to my post (I forgot to mentioned it), using the Platform capabilities..good one.
Continue your nice contribution to the community :)

Best Regards,
Gonçalo Martins

24 Sep 2012

Nikhil Shravage

Thanks a ton Evert van der zalm, Gonçalo Martins.

24 Sep 2012

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines