ADF BC REST Service from ADF Library JAR

I had assignment to enable ADF BC REST for existing ADF application, which was developed with multiple ADF libraries. ADF BC REST was supposed to be enabled for one of the ADF libraries and then accessed through Master application. All ADF BC REST samples usually show how to enable REST inside Master application itself. I was curious if it will work to enable ADF BC REST and package it into ADF library, which is consumed from Master application. It worked and I would like to share sample app.

Sample app is based on two JDEV projects - library and master applications. Library application contains ADF BC REST implementation for Employees VO:

ADF Library is generated out of ViewController project, ADF BC REST is packaged through dependency:

Model (enabled with ADF BC support) project in Master application imports ADF library:

Run Master application by running REST project. There is improvement in JDEV 12.2.1.3 comparing to 12.2.1.2 - re-deployment works even if dependent ADF library was changed (this is very useful fix - saves a lot of time during development):

REST response is received:

Download sample application - adfbcrest.zip.

Oracle JET List Implementation based on WorkBetter Alta UI

During weekend I was playing with JET WorkBetter sample app. I thought it would be nice to extract People list UI into my own app - so that it will be easy to reuse this UI pattern in our own JET applications. I succeeded to achieve my goal and would like to share WorkBetter Alta UI list sample with you.

This is how my own JET list UI looks like, based on sample app:

Header block is implemented in separate div, this contains title and toolbar for buttons. List content is rendered out of template located in its own div:

Template renders JET list component. List in turn is based based on item template:

Item template defines list row content and structure - through set of JET and custom CSS styles. Data attributes are referenced directly from template structure:

For this sample I'm using basic set of mock data defined in JS module, but obviously it can fetch data from REST service too:

Set of custom styles (created based on WorkBetter example) is located in override.css file within JET application structure:

Sample JET list application can be downloaded from GitHub - jetlistapp.

To build this application, I was using JET CLI commands. Especially useful I found options to strip application leaving only sources and then to restore JET environment - this helps to share code.

Here is the sequence of commands how I was using JET CLI:

ojet create jetlistapp --template=navdrawer (creates JET application)

ojet serve (runs JET application)

ojet strip (removes all files except your sources)

ojet restore (brings back JET environment, after application was stripped)

ojet serve (you can run application again, after it was restored)

Oracle JET Simple Table with Fake JSON Server

What if you want to build JET UI, but there is no back-end REST service ready yet. You could use static JSON data inside JET app and load it from the JSON file. This works, but data retrieval logic will need to be changed after REST service will be ready. This is not productive. Ideally you would like to have fake REST service to simulate REST calls from JET UI, until real REST back-end is ready.

This can be achieved with JSON Server. It provides full fake REST API to be used by front-end client. It is extremely easy to setup JSON Server with NPM. Run npm install to setup JSON Server:

npm install -g json-server

Create simple JSON file with data structure - this will be served from JSON Server:

Run JSON Server with this command, pointing to JSON file:

json-server --watch db.json

You should see REST endpoint URL displayed in the log. Use this URL in JET application to define collection:

JET CollectionTableDataSource can be created on top of collection backed by REST:

JET UI table component renders data directly from CollectionTableDataSource:

Table UI is rendered based on REST call:

To verify REST call, go to developer console and check network request. You should see request executed against fake JSON Server:

Response is visible too:

Download JET sample application with JSON file for JSON Server from my GitHub repository - jetsimplecrud.

ADF 12c Table CRUD Fix for Auto Focus

I had a post about how to improve user data entry for ADF table with auto focus for new row - Improving ADF UI Table CRUD Functionality with Auto Focus. If you follow comments thread for that post - you will see described approach doesn't work exactly as it should in ADF 12c (focus is set for new row but later is lost after tab navigation - it should move focus to another column). Thanks to the community we have simple fix for this issue, read OTN Forum thread - Set Focus on CreateINsert row in ADF Table. I hope Oracle will fix this functionality in the next ADF versions (currently they say it is expected behaviour, and I don't agree with this). But for now - fix does the job.

 Sample app was updated to 12.2.1.3 and it contains fixes described on OTN Forum - ADFTableFocusApp_v2.zip. Focus is set for first column of new row to avoid extra mouse click:

After tab is pressed - focus moves to the next column:

Fix simulates row selection through ADF JS API. After focus was set for the first column in current row - we execute row selection based on active row key. This allows ADF Faces to move focus to the next column on tab, because it knows currently selected row on client side:

Make sure to set active row key in the bean method, same place where focus ID is calculated (otherwise there will be JS error):