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)