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.
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.
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?
ReplyDeleteHow can we bind JSON to a table without paging.
ReplyDeleteSetting dataSource as below does not bind data.
self.datasource = new oj.CollectionTableDataSource(self.collection())
Does it need more processing ?
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
ReplyDeleteAndrejus
Hi, Thanks for the details.
ReplyDeleteCan i refresh the typeahead options/filters after user stop typing from REST ???
Example:
At the initial load, show some 5 filters
after user types a string and stops, refresh the filters from REST and show the results.
Initial Load: options: ['One', 'Two', 'Three', 'Four', 'Five'];
User types: 'teen'
Refresh the options from REST and show: ['Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen']
Can you please tell me how to achieve this ?
Hi Andrejus,
ReplyDeleteI tried out this implementation of inputSearch. It works fine. But somehow, if I try to clear the value on a button click, the UI keeps shows the old value. For a normal inputText, the value gets cleared as desired.
This is the data-bind for my inputSearch
data-bind="ojComponent: {component: 'ojInputSearch',
value: inputJobId,
options: jobTags,
rootAttributes: {style:'max-width: 20em'}}"
The value is cleared from the inputJobId. I did a console.log to verify. Any pointers on how to clear this value from the inputSearch?
Regards,
Sarah
Input search value is stored in array, i think you need to reset/clear array value, not simply set null.
ReplyDeleteAndrejus
Hi Andrejus,
ReplyDeleteCan you post a sample of inputSearch where options are populated from REST call after user enters X number of characters?
Regards,
Sarah
May be in the future, now quite busy preparing for Oracle Code conference.
ReplyDeleteRegards,
Andrejus
This comment has been removed by the author.
ReplyDeleteHi Andrejus,
ReplyDeleteDid not want to clutter your blog. Hence, removed my comment. I will mail you my code snippet.
Regards,
Sarah