From Zero to Hero: A guide for the non-IT developer to rapidly deliver UIs using the Oracle JET framework

Introduction

Oracle JET is a great tool to develop web and mobile applications. However, it fits for different developers in different ways. This blog article discusses how the capabilities of Oracle JET can be used to work together between citizen developers and traditional application developers.

Main Article

What is a “Citizen Developer”?

“Citizen Developer” is a new buzzword and many people have their own definition of it.

Here is mine:

A “Citizen Developer” is a resource belonging to the business department with some kind of technical knowledge and is the answer of the business department if resources from the IT department are not available and a quick start is needed. Having said that, the profile of a citizen developer can still be quite different in terms of the technical development knowledge he/she has.
However, citizen developers are not replacing developers from the IT department. Instead they are able to prototype solutions mostly without IT help and they are able to work together with IT by developing base functionality and let IT support with more advanced features and detailing the solution. Citizen developers often demand less coding and a more configuration/UI based approach for their work. This also means there is no clear separation of what kind of tasks a citizen developer and what an IT developer does. Therefore, key to success of the citizen developer approach is a good interface between those two types of developers.

Side note: Another reason why you might want to consider to have a citizen developer in place is the deeper business affinity they enjoy with the business department.

So, how can Oracle JET now be useful in this regard?

As already said there is a broad range of skill sets of citizen developers.Typically citizen developers have a slightly technical end user background, a deeper understanding of technical architectures and concepts and understand the business aspects of IT solutions. However, one existing differentiator between them is the depth of development skills they have. Some can code using programming languages, others work with more declarative development tools.
With Oracle JET a citizen developer needs to have some basic web development and programming skills, otherwise it’s the wrong tool for him/her.

Here is the typical Oracle JET process of interacting between citizen developers and IT developers:

1. Prework: IT provides Oracle JET corporate design templates, prebuilt page and service modules and reusable UI components

2. The citizen developer uses those assets to plug together a base app version by copy&paste of existing files and code snippets and adjusting them

3. Later on the IT developer enhances existing modules and components or provides additional assets and capabilities back to the citizen developer

Example

As a simple use case let’s assume the business department needs a new corporate web app showing service incident data in a list form and the ability of viewing details and editing incident attributes.
Let’s take the Oracle A-Team JET Modularity Template V1.0 as a template which contains a sample list and sample details page as well as a data service to access data through a REST API.

Note: the Oracle A-Team JET Modularity Template is based on the more generic Oracle A-Team JET Template V1.1 which has a stronger focus on examples. So, the Modularity template might contain app elements which are not needed for this use case.

The approach by a citizen developer is to copy&paste the sample pages (each with a ‚view‘ html file and a ‚viewModel‘ javascript file), register those pages in the app and adjust them to the specific use case needs.

Steps

Here are the steps the citizen developer would need to follow:

1. Scaffold a JET web app from the corporate design template

Execute the scaffolding commands

yo oraclejet ateam --template="ateam_jet_modularity_template.zip"
cd ateam
yo oraclejet:add-sass

Test the template app in the browser

grunt serve --theme=ateam

(use Harry.Carson@oracle.com with a random non-empty password when the signin page below appears)

maxf_jetmodularityapp maxf_dashboard maxf_sidebar
signin page dashboard page sidemenu

2. Reuse the list and details sample pages for the incident use case

Simply copy&paste the sample pages

Use either your preferred File Explorer tool or execute the commands shown below in the command shell to copy the relevant files.

cp src/js/views/sample-list.html src/js/views/incident-list.html
cp src/js/views/sample-details.html src/js/views/incident-details.html
cp src/js/viewModels/sample-list.js src/js/viewModels/incident-list.js
cp src/js/viewModels/sample-details.js src/js/viewModels/incident-details.js

Note: Oracle JET pages are JET modules consisting out of a html and a javascript file which reside in the views/ and viewModels/ directories

Register the pages in the app

In the file src/js/appController.js simply add entries for each page to the router configuration (it’s just two lines!) and add the incident list page to the navData structure to make the page visible in the sidemenu (just another two lines!).

maxf_appControllerjs

Note: fa-fire is an icon name from the Font Awesome iconic font toolkit and its usage gives you an very easy possibility to replace the icon with different ones. Other icon names can be found on the Font Awesome Icons webpage

Adjust the page navigation

Change the drilldown navigation in the incidents-list page to the ‘incidents-details’ page by simply setting the right page name in the navigation go() method.

maxf_nav2Details

Test the app with the new pages

grunt serve --theme=ateam

maxf_newSideMenu maxf_newSampleList maxf_newSampleDetails maxf_newSampleEdit
new sidemenu new sample list page new sample details page new sample edit page

3. Implement the view and viewModel logic for those pages

Access incident data through a REST API

To access the incident data just reuse the prebuilt service module called “mcs” which is already provided with the template. In the implementation of this template the “mcs” service module makes use of the Oracle Mobile Cloud Service as a cloud interface to service backend data.

maxf_jet_architecture_v2

Note: Using Oracle Mobile Cloud Service to access enterprise applications in the cloud or on premise is explained in more details in other blogs by the A-Team.

You are going to use two preconfigured integration methods from src/js/services/mcs.js within the template:

getIncidents()

getIncident(id)

Configure the incident list and details pages

Note: You don’t have to write all the code below yourself. For your convenience sample files in the template with all changes applied can be used for simple copy&paste of the relevant code snippets.

They can be found here:

viewModels/sample-incident-list.js

views/sample-incident-list.html

viewModels/sample-incident-details.js

views/sample-incident-details.html

Provide incident data to the list page

change the handleActivated method in incident-list.js (this is already the whole code which needs to be changed!)

self.handleActivated = function(params) {
    var promise = mcs.getIncidents();
    promise.then(function(response) {
        var responseData = JSON.parse(response);
        if(responseData)
            self.allRecords(responseData.result);
    });
    return promise;
};

Note: You can simply copy&paste this code snippet from the viewModels/sample-incident-list.js file

Show incident data on the list page

change data binding in incident-list.html to display the data fields “priority”, “problem”, “status”, “customer name” and the “creation date”. The fields “priority” and “status” already exist and don’t need to be changed for this sample use case.

maxf_incidentListHtml

Provide incident data to the details page

change the data structure in incident-details.js

self.emptyDataStruct = {
    "problem": "",
    "description": "",
    "status": "",
    "priority": "",
    "createdOn": "",
    "lastUpdatedOn": "",
    "customer": {
        "firstName": "",
        "lastName": "",
        "mobile": "",
        "home": ""
    },
    "location": {
        "formattedAddress": ""
    }
};

Note: You can simply copy&paste this code snippet from the viewModels/sample-incident-details.js file

change handleActivated method in incident-details.js

maxf_incidentDetailsJs2

Note: You can simply copy&paste this code snippet from the viewModels/sample-incident-details.js file

Show incident data on the details page

Note: To make it easy to use for a citizen developer the details page makes use of the Oracle JET composite component capability for the field elements on the details page (“detail-element” composite component)

change the detail elements in incident-details.html

<detail-element data="{{data}}" property="problem" edit-mode="{{editMode}}" label="Problem" icon="fa-info" icon-color="yellow"></detail-element>
<detail-element data="{{data}}" property="description" edit-mode="{{editMode}}" label="Description" icon="fa-file-o" icon-color="orange"></detail-element>
<detail-element data="{{data}}" property="status" edit-mode="{{editMode}}" label="Status" icon="fa-spinner" icon-color="red"></detail-element>
<detail-element data="{{data}}" property="priority" edit-mode="{{editMode}}" label="Priority" icon="fa-thermometer-full" icon-color="pink"></detail-element>
<detail-element data="{{data}}" property="createdOn" type="date" edit-mode="{{editMode}}" label="Created On" icon="fa-plus" icon-color="green"></detail-element>
<detail-element data="{{data}}" property="lastUpdatedOn" type="date" edit-mode="{{editMode}}" label="Last Updated On" icon="fa-calendar" icon-color="turquois"></detail-element>
<detail-element data="{{data.customer}}" property="firstName" edit-mode="{{editMode}}" label="Customer First Name" icon="fa-user-o" icon-color="cyan"></detail-element>
<detail-element data="{{data.customer}}" property="lastName" edit-mode="{{editMode}}" label="Customer Last Name" icon="fa-user-o" icon-color="cyan"></detail-element>
<detail-element data="{{data.customer}}" property="mobile" type="phone" edit-mode="{{editMode}}" label="Mobile #" icon="fa-mobile" icon-color="blue"></detail-element>
<detail-element data="{{data.customer}}" property="home" type="phone" edit-mode="{{editMode}}" label="Home #" icon="fa-phone" icon-color="purple-pink"></detail-element>
<detail-element data="{{data.location}}" property="formattedAddress" edit-mode="{{editMode}}" label="Address" icon="fa-location-arrow" icon-color="purple"></detail-element>

Note: You can simply copy&paste this code snippet from the viewModels/sample-incident-details.html file

Test the final app

grunt serve --theme=ateam

maxf_finalIncidentList maxf_finalIncidentDetails maxf_finalIncidentEdit
incident list page incident details page incident edit page

 

Now the recurring collaboration cycle between the citizen developer and the IT developer begins. As new requirements come up for which the template doesn’t provide easy-enough capabilities the citizen developer reaches out to IT. An IT developer will implement new modules and components and the citizen developer can take up those new assets to change the app to the new requirements. Maybe the IT developer also takes up more complex tasks himself/herself, makes changes to the app, but still leaves the overall control of the app to the citizen developer.

Summary

Oracle JET provides some very interesting capabilities to modularize and reuse code. Oracle JET templates enable a quick project start for new web or mobile applications. Oracle JET page and service modules as well as Oracle JET composite components allow for easy code reuse and create a nice interface between citizen and IT developers.
With the right allocation of responsibilities between citizen developers and traditional application developers and the right granularity of JET artifacts a much better collaboration between the business and the IT department is possible than with a traditional application development approach.

Welcome in the new community world of “Citizen & IT Developers”!

Add Your Comment