Showing posts with label ojTable. Show all posts
Showing posts with label ojTable. Show all posts

Wednesday, 9 January 2019

JET - ojTable with custom date converters

JET: v6.0.0
Source: GitHub

This article talks about applying custom date and time patterns on the date columns of an ojTable component.

For those of you who are familiar with ADF, this is something similar to <af:convertDateTime> converter. Angular achieves similar functionality using pipes.

However, JET does not provide us with an out-of-the-box support for such conversions. We need to make use of oj IntlConverterUtils package.

After applying a conversion, this is the data structure we intend to achieve:

The inital data on the ojTable component looks like this, as fetched directly from an ADF BC REST API:

To achieve this conversion, I have used a template for the HireDate column, which passes the iso-string-date to a date-utils function.

The date-utils creates a converter with the passed pattern, and creates a new string. This is achieved using the following utilities from oj - oj.Validation.converterFactory and oj.IntlConverterUtils.dateToLocalIso methods.

The converter-factory creates a converter with the pattern passed from the template, intl-converter-utils uses this converter to generate a new string date.

You would need ojs/ojvalidation-datetime module in your define block.


Wednesday, 2 January 2019

JET - Handling table selection with Promise

JET: v6.0.0
Source: GitHub

This article explores a simple technique to get the selected data from an ojTable component. The click or selection event on an ojTable can be handled in multiple ways, and this concept can be extended to any event - onOjBeforeCurrentRow or onSelectionChanged.

Be it any of the above events, the data from the selection event on ojTable is of the same type. It consists of an array of objects, each of which has a startIndex and an endIndex. For a table supporting multiple selection, these values denote the index of the first selected row and the last selected row (respectively). For single selection, the start and end index is same. The selection object also consists of the Key attribute of the selected rows.

An interesting note: for multiple selection, when consecutive rows are selected - say row numbers 2 and 3 - the selection data generates a consolidated object, where start index is 2 and end index is 3. 

But, when we select random rows - say 0, 2 and 3 - the selection data event intelligently generates a consolidated array object - one with start index 0 and end index 0, and another with start index 2 and end index 3.

Using these start and end indices, we can locate the data at these indices inside the paging or array collection data source.

However, when we get the data at an index, using, we get back a promise. If we have to loop through all the selected indices and get the data at each node, we would need resolve each individual promise. By the time we do this, the synchronous code will be completed and we will not have any way to handle the promise data.

The solution to this problem is to get all these promises in an array, and then resolve them all at once, using Promise.all.

I have a TableUtils js, which creates this array of promises.

This array of promises is handled all at once, and the data is extracted from the resulting array.