Over a million developers have joined DZone.

Leveraging Oracle JET Composite Components in ABCS

DZone's Guide to

Leveraging Oracle JET Composite Components in ABCS

Oracle's Application Builder Cloud Service now integrates with JET's Composite Components Architecture, enabling you to define reusable UI components.

· Cloud Zone
Free Resource

Get the Metrics Collection and Monitoring Essentials tutorial collection. A 4-part tutorial series from DigitalOcean.

One of the new features of Oracle Application Builder Cloud Service (ABCS) in the May 2017 release is support for 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.

ABCS Design TimeIn 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 five files needed to define a component.

5 files in a directoryWe'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.

define(['ojs/ojcore', 'text!./demo-cca.html', './demo-cca', 'text!./component.json', 'css!./demo-cca','ojs/ojcomposite', 'ojs/ojslider'],
    function(oj, view, viewModel, metadata) {
        oj.Composite.register('slider', {
            view: {inline: view}, 
            viewModel: {inline: viewModel}, 
            metadata: {inline: JSON.parse(metadata)}

The next file we'll create is the component.json file. This file describes the metadata 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',

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.

        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 a ZIP file. Upload the ZIP file you just created. Then make sure to enable the component using the boolean control on the page.

Component extension

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.

Here is a quick video showing it:

Get a free in-depth tutorial: How to Automate Backups with DigitalOcean Spaces.

cloud ,web components ,oracle abcs ,oracle jet ,tutorial

Published at DZone with permission of Shay Shmeltzer. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}