One of the new features of Oracle Application Builder Cloud Service (ABCS) in the May 2017 release is integration with Oracle JET's Composite Components Architecture (JET CCA).
Based on the Web Components standard, JET CCA provides a way to define reusable UI components (with logic) that can easily be incorporated into multiple applications.
The new feature in ABCS allows you to pick such components as extensions to the ABCS design time, providing an easy standard way to extend your UI capabilities. For example in the screenshot below you see a new slider component in the common components section, and how it looks like when added to the visual designer.
In this blog entry we'll start by creating a very simple JET CCA component and then see how to add it to Oracle ABCS. (Thanks goes to John Brock who helped get this sample working).
To learn more about JET CCA have a look at their developer guide, and the sample in the Oracle JET Cookbook. We are going to start from that sample and build a very basic component. (For a deep guided tour of Oracle JET CCA check out Duncan's series of JET CCA blogs)
There are 5 files needed to define a component.
We'll start with the loader.js file - this file provides info on the other files involved in the component. Note that in the sample we are registering "slider" as the name of the component, in this file we are also indicating which jet components we are going to use and including them in the define section. Specifically we are adding the ojs/ojslider component here.
The next file we'll create is the component.json file. This file describes the meta data about our component. One of the key things you can define here is a set of properties that users of the components can set when they add it to their application. The nice thing in the ABCS integration is that these will show up at design time as properties in the visual editor.
In our component we are defining four properties that control the title, minimum, maximum, and actual value of a slider. Note that right now ABCS is using Oracle JET 2.3 and we need to specify this in the file.
{ "name": "Slider","description": "A sample Oracle JET Slider CCA","version": "1.0.0","jetVersion": ">=2.3.0","properties": {"title": {"description": "Name of slider","type": "string" },"min": {"description": "Numeric minimum","type": "number" },"max": {"description": "Numeric maximum","type": "number" },"value": {"description": "Slider value","type": "number" } } }Next we'll define the html file (demo-cca.html) that includes our UI. We are using regular HTML code here along with knockout.js binding of properties to values. You can use the $props prefix to refer to values of attributes we defined in the components.json file.
<div data-bind="text: 'Title: '+$props.title"></div>
<input id="slider-id"
data-bind="ojComponent: {
component: 'ojSlider',
max:$props.max,
min:$props.min,
step:10,
value:$props.value
}"/>
Next there is a css file - controlling the look and feel of the component. Since we are not doing any customization on the look and feel we'll create an empty file called demo-cca.css.
Next is the model file (demo-cca.js) - this file contains data and logic that can be accessed from the component. We'll create a basic file without any logic code in it.
define(['knockout'], function (ko) { function model(context) { var self = this; return model; } } )Now that you have created the 5 files - simply zip them into a single zip file. This zip file is the file you'll give to your component users. In this case to the ABCS developer.
Go into your Application Settings -> Extensions in Oracle ABCS and choose to create a new UI component from zip file. Upload the zip file you just created. Then make sure to enable the component using the boolean control on the page.
Switch over to the UI Designer and you'll see that there is a new component in the component palette.
Drag and drop it into your page - and you'll see the HTML code. Set the properties in the property inspector and you'll see them influencing the content of your page.
You can also bind the properties to the values of fields in your custom business objects.