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()
Hi,will u please show some examples in vbcs oj paging control for adp,and master details as adp
ReplyDeleteyes and also sorry for replying late :)
DeleteIn 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
Thanks for sharing this!
ReplyDeleteIf I have to show busy message multiple time in between then how to do it.
ReplyDeleteHi Mohammad Ahshan Danish,
DeleteSorry 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.