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

Post a Comment

Popular posts from this blog

Flutter for Single-Page Scrollable Websites with Navigator 2.0

Image
  Single page scrollable websites are everywhere. In this website design pattern, all the content is presented in one long-scrolling layout that contains multiple sections. Visitors can scroll or jump to a section by clicking buttons of a sticky menu. This pattern is a good fit for small content such as brochure websites, software library documentation, portfolios, and landing pages that are used to convert users [ 1 ]. Designers also love this pattern because it is simple, clean, and enables cool scroll animations. Jetbrains Mono single-page scrollable website Hive docs multi-page scrollable website In this series of articles, we will explore how to build a  single-page scrollable website  using Flutter. We will benefit from the Navigator 2.0 API to provide a good navigation experience to the users. You can find the source code of this series’ sample apps on my  Github page . The implementation details of the sample apps will be explained in the following articles: ...
Read more

A Data Science Portfolio is More Valuable than a Resume

Image
A Data Science Portfolio is More Valuable than a Resume Benjamin Obi Tayo Ph.D. Following Nov 20  · 5 min read D ata Science is a practical field. Hands-on skills are very important especially when you are interested in working outside academia as a practicing data scientist. In academia, you need more theoretical and research skills. While in-depth knowledge in the theoretical foundations of data science is important, as a practicing data scientist, hands-on experience is very crucial and one way to showcase you hands-on skills is via building a very great portfolio. Companies interested in hiring you would definitely be asking you for a portfolio, as it gives evidence of your strengths in fundamental data science concepts. While a data science resume is important, a data science portfolio is more valuable than a resume. This article will discuss 3 important platforms that can be used for portfolio buildi...
Read more

Better File Storage in Oracle Cloud

Image
Use Oracle Application Express with Oracle Cloud Infrastructure REST APIs to upload, download, and manage big files in Oracle Cloud. By Adrian Png November 27, 2019 Oracle Cloud Infrastructure  provides a comprehensive suite of REST APIs for accessing and managing cloud resources. For example, administrators can use REST APIs to create and manage autonomous databases and initiate backups. Oracle Application Express (Oracle APEX)  makes working with REST easy. The  APEX_WEB_SERVICE  package, available since Oracle APEX 4.0, provides developers with a function for consuming REST APIs. Oracle APEX 5.0 introduced the  APEX_JSON  package, allowing easy parsing of JSON responses. Oracle APEX 18.1 introduced the Web Source Module (WSM), which enables developers to access REST services and use the data in APEX components such as reports, interactive reports, and interactive grids. These features, when used together with Oracle Cloud Infrastructure REST ...
Read more