X

Shay Shmeltzer's Oracle Development Tools Tips

Leveraging Oracle JET Composite Components in Oracle application Builder Cloud Service

Shay Shmeltzer
Director of Product Management - Oracle

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.

ABCS Design Time
 

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).

Note - You are stepping into the "custom code" realm of ABCS when doing this type of integration- which means that you are in control of the integration and future upgradability of your extension. For example in the future when ABCS will adopt a newer JET version, you might need to do adjustments to your component to match the new version. 

There are 5 files needed to define a component.

5 files in a directory

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.

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 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. (Note - don't zip the parent directory, you want the files to be directly at the top level of the 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.

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 the integration.

 

Join the discussion

Comments ( 4 )
  • Ganesh Friday, July 14, 2017
    What could be there in manifest.json

    Extension is getting failed to enable the component.

    It required Extension manager
  • Shay Monday, July 24, 2017
    Ganesh - the manifest file is generated by ABCS for you, you don't need to provide it in your zip file.
  • Anisha Jain Wednesday, April 4, 2018
    Hi,
    I have created the UI component according to the steps you provided. Everything is fine properties and all, but when I drag and drop this component on my page, no slider comes in, just a plain HTML is coming.

    Can you please tell me what might be the issue?
  • Shay Shmeltzer Wednesday, April 4, 2018
    Anisha, It's hard to tell without looking at the actual code - see if the console in the browser's development tools has more info for you on any errors that happened. You can try posting your code on the VBCS discussion forum also.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.