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.

Cheers!

No comments:

Post a Comment