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)

https://blogs.oracle.com/geertjan/entry/ui_component_extensions_for_abcs

 

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

https://blogs.oracle.com/geertjan/entry/ui_component_extensions_for_abcs1

 

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

https://blogs.oracle.com/geertjan/entry/ui_component_extensions_for_abcs2

 

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

https://blogs.oracle.com/geertjan/entry/ui_component_extensions_for_abcs3

 

abcs-pi-2.png

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 - https://docs.oracle.com/cloud/latest/appbuilder/CSAPB/GUID-156E9662-2C9D-412A-89C6-20CB786B21F1.htm#CSAPB-GUID-156E9662-…

 

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 - http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=timeline&demo=basicTimeline

 

12.png

 

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.

1.png

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.

2.png

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)

8.png

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.

define([
    'com.extensions/js/Constants',
    'knockout',
    'text!com.extensions/templates/blackbox.html',
     'ojs/ojtimeline'
], 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.message('');
            };
            self.submit = function() {
                alert(self.message());
            };
        },
        template: template
    });


    logger.info('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)

10.png

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)

 

11.png

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.