Skip navigation

On his blog Oracle JET expert Geertjan Wielenga shows you how to leverage Oracle JET to extend Oracle Application Builder Cloud Service.

From adding a custom components to creating a reusable component - learn cool techniques with these examples.


UI Component Extensions for ABCS (Part 1: Custom Components)


UI Component Extensions for ABCS (Part 2: Reusable Components)


UI Component Extensions for ABCS (Part 3: Property Inspectors)


UI Component Extensions for ABCS (Part 4: Drop Dialogs)



Application Builder Cloud Service (ABCS) allows business users to configure extensions, which can be integrated into the User Interface to provide a custom look and feel that can be applied to pages in an application.

These UI Extensions are a collection of files that provide a custom function or resource that can be used to extend an application and can be shared between applications in the tenant space.

Documentation regarding the Extensions can be found here -…


Timeline Extension Blog


Timelines are graphical representation of events in a chronolgical order and are useful in visualising time lapse between important events in businesses.

This blog will show you how to create a chronological Timeline UI extension using the event information stored in a custom ABCS business object. This blog will create a UI extension leveraging the timeline component example shown in the Javascript Extension toolkit cookbook -




Creating the Custom Business Object


1. Timeline events information such as title and date resides in ABCS custom business object. Click on the "Main Menu" on the top left hand corner and click on "Data Designer". From the options select "Business Object" in order to create a new custom Business Object.

The structure for the data should look like Figure 1. The Business object “EventsTimeline” has three additional fields EventId(Text field), Title(Text field) and EventDate(Date field) in addition to the out of the box fields for a custom business object.


Figure 1: EventTimeline Business Object


2. The sample data for the business object can be imported using the excel sheet which is available here - EventsSampleData

Import the data in the excel sheet using the Data Manager and the data in the Business object would look similar to Figure 2.


Figure 2: Business object with sample data


Creating a UI Extension


1. UI Extensions can be configured through Extensions page available in the main menu. Click on the main menu toggle on the top left corner and select “Application Settings”. In the settings menu choose “Extensions” in order to configure the UI extensions (Figure 3)


3.png 4.png

Figure 3: Main Menu and Application Settings Page


2. Select “New UI Components” and select “Create New”. The wizard provides other options like Import from ZIP and Share from Another Application for creating UI components as well.

A wizard pops up which requests the users with information necessary to proceed. Fill in details for the Extension Name, package name and ID as shown in the figure 45.png 6.png

Figure 4: Extensions Creation Wizard


3. Click on the “Template” button to choose the template to start the configuration. For the purposes of this blog we choose the “blackbox” template which comes with pre-existing configuration that allows the user to quickly begin with extensions. The “Sources” subtab in the extension window shows the file tree structure and is divided into js for the view model, style for the css, templates for the view and images for the image resources (Figure 5)


Figure 5: Directory structure for UI Component


4.  Add the view code in the blackbox.html file, replace the existing code in the file with the following code and Save Changes.

The view code configures data-bind attribute to create an ojComponent with component set to ojTimeline.

<div id="tline"
  aria-label="Single Series Timeline Demo"
  data-bind='ojComponent: {
  component: "ojTimeline",
  minorAxis: {
  scale: "weeks",
    zoomOrder: ["months", "weeks", "days"]
  majorAxis: {
    scale: "quarters"
  start: new Date("Jan 1, 2010").toISOString(),
  end: new Date("Dec 31, 2010").toISOString(),
  selectionMode: "single",
  referenceObjects: [{value: new Date("Feb 1, 2010").toISOString()}],
  selection: ["e4"],
  series: [{ 
    id: "s1",
    emptyText: "No Data.",
    items: seriesData(),
    label: "Oracle Events"
  overview: {
    rendered: "off"
}' style="width: '100%';height: 350px"></div>


5. Similarly add the view model code by replacing the current content of the Initializer.js file and Save Changes

The Javascript file contains code to fetch the data from the custom business object and bind the data to the timeline knockout observables.

], function (Constants, ko, template) {

    'use strict';

    var logger = Logger.get('extensions.dt/templates/extensions/uicomponent/com.extensions/js/Initialiser');

    ko.components.register(Constants.COMPONENT_ID, {
        viewModel: function (params) {
            var self = this;  
      self.seriesData = ko.observableArray([]);
      var eventstimeline = Abcs.Entities().findById('EventsTimeline');
            var operation = Abcs.Operations().read({
  entity: eventstimeline
           operation.perform().then(function(result) {
    for (var i = 0, len = result.getData().length; i < len; ++i) {
              self.seriesData.push({id: result.getData()[i].EventId,
  title: result.getData()[i].Title,
  start: result.getData()[i].EventDate,
  description: result.getData()[i].EventDate});
            self.message = ko.observable(params.message);
            self.clear = function() {
            self.submit = function() {
        template: template
    });'registered \'' + Constants.COMPONENT_ID + '\' custom component.');



The data from the business object is leveraged through Javascript API's provided by ABCS, details of which are provided in the blog Leveraging the JavaScript API in Oracle Application Builder Cloud Service

The data is the binded to a knockout observable Array which is referred in the view HTML file.

(Optional) Modify the blackbox.css file as per style preferences.


6. Click on Reload Extensions in order to activate the Extensions. The UI extensions will now be available in the components palette.


7. Create a new Details page and associate any business object with this page in the subsequent wizard window.

Drag and drop the blackbox component from the components palette onto the blank details page (Figure 6)


Figure 6: Adding UI extension component to details page


Adjust the UI component width and Click the play button on the top right corner to preview the component (Figure 7)



Figure 7: Preview of the timeline component


Through this blog we have seen the flexibility provided by ABCS to create and configure UI components that supplement the out of the box components. With a small amount of code rich UI components will enhance the applications created in Application Builder Cloud Service.These components can created in one application which can be shared and reused in other application within the tenant space.