Saturday, May 14, 2016

Oracle JET Input Search with ADF BC REST

LOV is popular component in ADF, it allows to seach for data entry in the list, select it and assign to the attribute. I was researching, how similar concept can be implemented in Oracle JET, based on data from ADF BC REST service. JET Input Search component seems to be useful for LOV like behavior implementation.

Job ID field is implemented with Input Search. It is based on value/label pair, user enters label and in the background selected value is returned and assigned to the attribute:


Watch this recording, to see how was it is. Search is performed on client side and value selection is instant:


List is being filter when user types value (you can configure it, to start filtering after user enters certain number of charachters):


Try to select a value from the list and update record:


In the background it is using key value SA_REP for update, we can track it in ADF BC log, where actual DB update takes place (through REST PATCH):


Let's take a look into implementation. In HTML I'm using ojInputSearch component with value and options properties. Property options provides list entries and property value holds selected value key:


Options are defined in JavaScript as observableArray, this allows to synch collection data to the UI. There is collection for options and REST service URL (pointing to Jobs ADF BC REST resource):


Data structure is defined by parseJob function, it contains JobId and JobTitle attributes - this will help to map REST response into JET collection:


JET collection is configured with REST URL for Jobs, unlimited fetch size (to fetch list of all jobs) and data structure mapping for REST resource:


Main part - we need to populate JET collection with data, this can be done by executing fetch method (see JET API documentation). In the success callback (executed asynchronously), we can access returned collection and push all entries into observableArray variable, attached to Input Search UI component:


Make sure to set RangeSize = -1 in ADF BC REST service resource definition for Jobs. This will enforce ADF BC to return all rows:


Download sample application (archive contains ADF BC REST sample and JET implementation with NetBeans, you must add JET runtime distribution to run JET sample) - JETCRUDApp_v7.zip.

3 comments:

Anonymous said...

Hi, I am new to adf and jet. I am not receiving all the rows from the table even after setting fetch size and range size as -1.Is there anything else I need to set?

Anonymous said...

How can we bind JSON to a table without paging.
Setting dataSource as below does not bind data.
self.datasource = new oj.CollectionTableDataSource(self.collection())

Does it need more processing ?

Andrejus Baranovskis said...

There is example on JET cookbook. Also you can check my JET sample which is using table without pagination - http://andrejusb.blogspot.lt/2016/10/oracle-jet-example-implementing.html

Andrejus