Posts

Web Page is ready when JET says it is

Image
      When you come, then its morning Is the web page really ready? This is the question I always have, and mostly all HTML page developers will have. This situation is specific when a JS code needs to be invoked on page load, or when the page is ready. Its so simple to determine the page's readiness in VBCS (actually its extended JET Framework).  JET is a web application development framework, following the MVVM pattern and has a huge UI component library.  So, during the page load, some framework internal APIs are still interacting with (or preparing the) UI components on the page, thus keeping the page busy. And any code which needs to be triggered, when the page is ready, should wait till the framework makes the page ready. So, how do we determine the page's ready state (or the busy state) in JET? Very Simple. Just use the out-of-the-box convenience APIs which tells if the page is busy. Let's have a look at the below code. define(['ojs/ojcore'], (oj) =...
Post a Comment
Read more

The VBCS Way: Mobile App for Scanning Barcodes \ QR Codes

Image
                                                                                                                                                                    Image by mjuliuss  from Pixabay Hi, Scanning bar codes (QR code too) are both fun and convenience. It eases business processes, especially at PoS, and receiving payments.  Thus, when it comes to develop one such app which scan codes, VBCS, as usual, makes it easy for developers.  VBCS uses c...
Post a Comment
Read more

Oracle JET Custom Component for displaying Notifications

Image
  When this guy rings the door bell, its one of the best notification                                                                                                -Me. Again. Yes, pizzas are tasty and they are one of the few things that can't be waited for. Our monthly salary too, just can't wait for a month to have it :). Be it pizza or salary, we are notified when they arrive. Such notifications can never be missed. And yes, notifications should never be missed, as they have something special, not all the time though, like pizzas and salary... again. Web applications are a platform, for executing things from Salary payment till connecting with friends and many more. Be it developers or users of the web application, we are a team, always. With...
1 comment
Read more

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

Image
We already have a best example given in the Oracle JET cookbook. This post is providing a small yet useful extension to this existing example. Courtesy:   OJET Cookbook example: Detail Row with Tree Table We see the rows are not expanded on the page load, as shown below. Some or most of the times, we have a requirement to expand the first row by default. To do this, we take help of the class  FlattenedTreeDataProviderView  The constructor of this class has a second parameter. This parameter is a JSON object, and it has predefined property called " expanded   ", as shown below. Reference:  oj.FlattenedTreeDataProvider Before we provide the value, we need to make a small change at the line, where the ADP is getting created. The  keyAttributes   should be changed  from   { keyAttributes: 'id' }  to   { keyAttributes: 'attr.id' }. This is because, the JSON structure itself tells that, each paren...
Post a Comment
Read more

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

Image
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....
5 comments
Read more