Oracle JET: Programmatic control over the Page's Busy State


Please wait. Yes, don't got anywhere. The above message proves, always, to make the user wait and  do no action on the keyboard or mouse. And yes, the user waits, although for some time.

In our web application, the logic should be capable to show this message, conditionally. Once the condition has evaluated false, the actual content should get loaded. To achieve this we should always rely on the framework delivered functionality, and not to code by ourselves. All frameworks have it, and let us see how its done in Oracle JET

View: In the HTML lets add the below small piece, as a direct  child to body, above the actual content


<div id='busyDiv' class="oj-flex oj-sm-align-items-center oj-sm-justify-content-center" style="height:100vh;">
<div class="oj-flex-item" style="text-align:center;font-weight:bold;font-size:3em;">
Please wait<p style="font-size:0.5em;">Loading...</p>
</div>

</div>

View Model: In the main.js, lets add the below script

Context.getPageContext().getBusyContext().whenReady()
.then(
(data) => $("#busyDiv").fadeOut(400))
.catch(err => {
$("#busyDiv").text("ERROR;Could not start the application");
console.log("ERROR ", err)
});

Context: This comes by loading/requiring the library in "require" ojs/ojContext and passing its respective object as a parameter in the function as function(Context,.....) 

getPageContext().getBusyContext(): This helps to get the busy state at the page level
The page is in a busy state when the components's DOM in the page is getting ready

whenReady(): This method is active once the pageContext() is no more busy. This is a Promise, which gets resolved after the page's state is changed from busy to active

As we can see, then() fades out the busy <div>
Incase there was an error, obviously its handled by catch()

Comments

  1. Hi,will u please show some examples in vbcs oj paging control for adp,and master details as adp

    ReplyDelete
    Replies
    1. yes and also sorry for replying late :)

      In your Index.html, add the below piece of HTML

      div class="oj-flex oj-sm-align-items-center oj-sm-justify-content-center" style="height:100vh;" id="busyDiv"

      h1 class="oj-flex-item oj-sm-2" style="text-align:center;"Please Wait /h1
      /div


      In the JS, add the below piece of script. This is just above the PageModule function, the first line inside the define() callback function


      let busyContext = oj.Context.getPageContext().getBusyContext();
      busyContext.whenReady().then(function (){
      $("#busyDiv").fadeOut(500);
      });

      Please put the HTML tags correctly in the above example, if you decide to include the same in your VBCS app


      Delete
  2. If I have to show busy message multiple time in between then how to do it.

    ReplyDelete
    Replies
    1. Hi Mohammad Ahshan Danish,

      Sorry for a late reply.

      If you want to show a busy message, say when doing a GET on a REST Service, and you want to keep the whole page busy, so that the user should not do anything else till the response comes, then you can open a Modal Dialog which says "Please Wait" inside the body slot
      The Modal Dialog should have the cancel-behavior set to none, so that the user cannot close the dialog

      The dialog can be opened at the beginning of the function, i.e. the first line of the event listener function that gets called on the button click event (or any other event) and closed when there is a logical end.

      Delete

Post a Comment

Popular posts from this blog

Oracle JET: Detail Row with Tree Table; Expanding rows on page load

Oracle JET Custom Component for displaying Notifications