Monday, 22 April 2019

JET - fetch all rows from ADF BC REST service

JET: 6.0.0
Source: GitHub

Oracle JET and ADF BC REST have a fantastic work relation. Each power-house seems to complement the other. As an example, JET's pagination module handles the entire responsibility of breaking up the data into chunks and fetches them as necessary, as and when the user navigates through the pages. The developer just needs to specify the page-size, and the framework divides the entire row-count into chunks of page-size, and uses the offset value to incrementally fetch the newer sets of data.

However, there might be times, when you need the entire data-set inside your JS array, without having the luxury of any pagination to do the job incrementally for you. In such cases, the below technique might help.

Step 1: Fire a rest call with totalResults=true, to fetch the total row count of your rest query.


Step 2: Use this row count value, and divide it into multiple chunks. E.g., I have decided to fetch 50 records at a time. Hence, the offset values would be 0, 50, 100. Each URL is sent to our helper method, which returns a promise.

You may set the limit value as a configurable option

Offset 0 fetches rows 1 to 50, offset 50 fetches 51 to 100, offset 100 fetches 101 to 107.

Step 3: I now have an array of promises, which I can evaluate all at once.



And there you go. You have the entire data set at your disposal. You may further optimise this process as per your need.

If you are familiar with ADF business components, a similar technique is used there as well. The developers configure the fetch-size for the view objects. The ADF framework gets a hold of the total row count, and then uses these information to decide on the number of database server trips and fetch the required number of rows per trip.

In the end, there are a few points quite worth mentioning:
1. A very high limit value may serve your purpose, but that is just a random guess, and did not seem very efficient to me.
2. This is just a technique to showcase an interesting use of totalResults and offset features of ADF BC REST. Large data sets should always be handled through a pagination or load-more-on-scroll mode. Not only are they performance boosters, they are also helpful from the UX perspective. So unless you really need to work on the entire data set at once (for displaying a chart maybe), this is not recommended.

Cheers!

Thursday, 4 April 2019

JET - ojChart context menu

JET: 6.0.0
Source: GitHub

Sometime back I had written an article - JET - custom event wrappers -  on how to add some custom information to an event raised by a component and then throw the event wrapped under your own custom event.

This article is just an extension of the same thought, which demonstrates how effectively you may use the above concept to solve your problem.

Here is the use-case:
We have an oj-chart component, which has a context-menu. Depending on the bar or pie slice which fired the context menu, we need to capture the chart data and act accordingly when the user clicks on any of the menu options.


However, the action event (on-oj-action) from oj-menu does not capture any information regarding the chart series or group.

But, oj-menu has a beforeOpen event (on-oj-before-open), which fires just before the context menu pops up and, more importantly, which captures all the data that we need.

So how do we make use of this event to solve our problem?

Step 1: Context menu fires beforeOpen event. We get chart related data from this event.
Step 2: We store the chart data in a variable.
Step 3: Context menu option click fires action event. This event is captured, the extra information is attached from the variable in step 2, and thrown again as a custom event.

This custom event now has all the data from the chart, which was captured from a different event. All we did was to combine the data from the two events.

Step 1

Step 2

Step 3

When the user finally clicks on one of the options in the context menu, we see that the chart details have now been captured in the detail part of the custom event, which were not present in the native event.


Cheers!

Tuesday, 2 April 2019

JET - dynamic content with templates

JET: v6.0.0
Source: GitHub

Oracle JET gives us developers a powerful tool - knockout templates - through which we can configure an entire page, using just JavaScript object metdata. The most significant advantages of such a mechanism are re-usability and of course, ease of development.

Imagine I would like to create the below 3 forms:


To make life of developers easier, all I would want them to do is to pass the metadata (fancy name for a JavaScript object), which would contain all the information about the fields, and not worry about the UI at all. This would also ensure a consistent look and feel for the entire application.

So let's see how such a template works. Each template has a declaration section and a definition section.

In the template declaration, I would specify where in my HTML page would I want the template code to be placed.

Template declaration

The template definition defines the exact implementation of the HTML code. It makes use of the metadata to position the HTML elements, which ultimately gives shape to the UI.

Template definition

To make it a bit easier, I have wrapped up the template inside a custom component, to make repitition simpler. This is the metadata I am passing to the template in order to get the desired structure:

Custom component


Cheers!