Skip navigation

Application Builder Cloud Service 17.1.3 release allows users to expose an external web service as a business object by creating a custom business object provider (BOP). In this blog we will create a Business object leveraging the REST APIs provided by GitHub using the custom BOP template that comes out of the box.

 

Evaluate the REST resource

 

GitHub exposes a set of REST APIs to fetch information regarding the user’s account.The complete list of all resources that can be fetched and the authentication schemes available can be seen here https://developer.github.com/v3/

For the purposes of this blog I have chosen https://api.github.com/users/shraybansal/repos to fetch the repositories information for the user shraybansal, whose account consists of two public test repositories.  If the user provides the Basic Auth credentials during authentication, then the REST request fetches information regarding private and public repositories associated with the authenticated user. Note that the REST API only fetches information of public repositories the user is associated with if no credentials are provided.

 

Even though GitHub supports Cross Origin Resource Sharing (CORS) and allows AJAX requests from all origins, an important detail to note is that in this blog we have leveraged the BOP Authenticator which implicitly takes care of the CORS request made through BOP. If BOP Authenticator is not leveraged during configuration then CORS will have to be enabled on the server to allow AJAX requests from the ABCS instance. Moreover, the REST APIs should be SSL enabled (https).

 

To begin, invoke your REST endpoint in a REST client to evaluate the fields that you require in your Business Object. I have used Postman, which provides a Chrome plugin, to invoke the GET request for the GitHub repository resource and selected id, repo_name and git_url to represent fields in the ABCS business object.

 

Field

Data Type

Description

id

Number

Id of the repository

repo_name

String

Name of the repository

git_url

String

The URL to access the repository

 

 

Configure showcase BOP Provider

 

In the Extensions section of the Application Settings create a new BOP Extension and give the package name as com.test

Note: In case any other package name is used then replace com.test references used in this blog with the package name provided.

 

25.PNG

Click on Template and choose the showcase BOP provided with the ABCS instance. The showcase BOP is an example of how the Application Builder APIs are being used in the BOP configuration through Employee and Department entities.

This action creates the files required for configuring a BOP and arranges the files in a defined structure in the Resource Browser.

 

 

Modify the Entity Provider

 

To add the entity definition we will have to include the github repository entity to the existing entity definitions in the MyCustomEntityProvider.js file

In the existing code add the call to the _createGitHub method just before the _createDepartment method.

 

var github = this._createGitHub();

 

Add the github variable to the _entities array.

 

this._entities = [github, employee, department];

 

Define the GITHUB_ID variable and add the implementation of the _createGitHub entity in the code just before the _createEmployee method.

 

MyCustomEntityProvider.GITHUB_ID = 'com.test.github';
MyCustomEntityProvider.prototype._createGitHub = function() {
        var id = DataModelFactory.createProperty({
            id: 'id',
            name: 'ID',
            type: PropertyType.KEY
        });
        var repo_name = DataModelFactory.createProperty({
            id: 'name',
            name: 'repo_name',
            type: PropertyType.TEXT
        });
        var git_url = DataModelFactory.createProperty({
            id: 'git_url',
            name: 'git_url',
            type: PropertyType.TEXT
        });
        return DataModelFactory.createEntity({
            id: MyCustomEntityProvider.GITHUB_ID,
            singularName: 'GitHub Detail',
            pluralName: 'GitHub Details',
            description: 'BO representing details of GitHub Repo of the user',
            properties: [id, repo_name, git_url]
        });
    }; 

The code should look like this in the Resource browser

Click on Save before proceeding.

 

Create the implementation file

 

Create a Github.js file under the js directory.This file will hold the implementation of the READ operation which will be defined in the operations provider.

 

   

Add the implementation code to the file. This code is similar to the Employee and Department javascript files.

 

define([
    'operation/js/api/OperationResult'
], function (
        OperationResult
    ) {
    'use strict';
    var Github = function() {
    };
  
    Github.getRepos = function(url, authenticator, operationData) {
       var ajaxObj = {
            method: 'GET',
            url: url,
            dataType: 'json'
        }; 
          
    // Include REST call here which performs the real operation retrieving your Github data
  var self = this;
        return new Promise(function (fulfil, reject) {
         authenticator.invoke( ajaxObj ).then(function (response) {
                var arr = Github._parseDetails(response);
                return fulfil(OperationResult.success(arr));
            });
        });
  };
     Github._parseDetails = function (response) {
        var res = [];
        var data = response.getData();
        data.forEach(function(items) {
            res.push(items);
        });
        return res;
    };
    return Github;
});

The code in the Github.js file should look like this:

Click on Save before proceeding.

 

Modify the Operations Provider

 

The next step is to modify the operations provider MyCustomOperationProvider.js to define the operations allowed on the github entity.For simplicity sake we will add just the READ operation in the MyCustomOperationProvider.js file

Add the BOPAuthenticators and Resource APIs in the define block along with the reference to the Github javascript file created in the previous step to the array of dependencies

'bop/js/api/operation/BOPAuthenticators',  
 'bop/js/api/resource/Resource',
  'com.test/js/Github'

 

The define block should look like this:

 

The dependencies will be passed to the definition function as function arguments, listed in the same order as the order in the dependency array. The function is called to define the module once all dependencies have loaded.

function (
        BOPAuthenticators,
        Resource,
        OperationBuilder,
        OperationInput,
        Pagination,
        Operation,
        Department,
        Employee,
        Github 
    ) 

 

Add the dependencies parameter as the argument in the function that is referenced by MyCustomOperationProvider variable. The dependencies parameter is a required attribute in the authenticator implementation.

var MyCustomOperationProvider = function(dependencies)

 

Declare _resources array variable and the _authenticator, which holds the instance of the default authenticator for invoking rest services returned by the getDefault method of BOPAuthenticators, in addition to the _operations array

var self = this;
this._resources = [];
this._authenticator = BOPAuthenticators.getDefault(dependencies, {

            getResources: function() {
                return self._resources;
            }
   });

 

Add _initForGithub() call just before the _initForEmployees() method

After the additions the function would resemble

 

var MyCustomOperationProvider = function(dependencies) {
       this._operations = [];
       var self = this;
       this._resources = [];
        this._authenticator = BOPAuthenticators.getDefault(dependencies, {
            getResources: function() {
 return self._resources;
            }
        });
        this._initForGitHub();
        this._initForEmployee();
        this._initForDepartment();
    };

 

Define the GITHUB_ID variable, which should be the same as defined in the MyCustomEntityProvider.js.

Add method getAuthenticator and associate a function which returns an instance of the _authenticator variable

 

MyCustomOperationProvider.GITHUB_ID = 'com.test.github';
MyCustomOperationProvider.prototype.getAuthenticator = function() {

        return this._authenticator;
    };


After the modifications the code should look like this:

 

 

Add the method _initForGithub that internally calls _getAllRepos method, which associates a function that returns an Operation instance based on the current builder configuration provided by the user. The operation type Operation.Type.READ_MANY is leveraged for retrieving collection data and is available for example when client drops the Table into an empty page.

Moreover, we will also add the list of resources to be whitelisted that are exposed by this BOP in the _getAllRepos method.

 

MyCustomOperationProvider.prototype._initForGitHub = function() {
        var github = Abcs.Entities().findById(MyCustomOperationProvider.GITHUB_ID);
        if (github) {
            this._operations.push(this._getAllRepos(github));
        }
    };
  
   MyCustomOperationProvider.prototype._getAllRepos = function(github) {  
                var self = this;  
                var url = 'https://api.github.com/users/shraybansal/repos';  
        this._resources.push(  
            Resource.create({  
                id : 'github.fetch',  
                template : url,  
                entity : MyCustomOperationProvider.GITHUB_ID  
            })  
        );  
       
        return new OperationBuilder({  
            name: 'Get all Repos',  
            type: Operation.Type.READ_MANY,  
            performs: function(operationData) {  
                return Promise.resolve(Github.getRepos(url, self.getAuthenticator(), operationData));  
            }  
        }).description('Fetch all registered employees with all relevant information.').  
            takes(new OperationInput({  
                entity: github  
            })).  
            returns(github).  
            build();  
    };  

 

Click on Save Changes. After adding the two methods the code should look like this:

 

 

Modify the manifest.json file

 

We will now modify the manifest.json file to include the GitHub.js file to the runtime list of resources.

"resources": [
            "js/Department.js",
            "js/Employee.js",
            "js/Github.js",
            "js/MyCustomConditionVisitor.js",
            "js/MyCustomEntityProvider.js",
            "js/MyCustomOperationProvider.js"                          
        ]

 

The manifest.json file should look like this

 

Click on Save Changes and Reload the extension to complete the BOP configuration process.

 

Create Business Object

 

Navigate to Business Objects by going through the Menu and clicking on the Data Designer.

 

    

 

Click on the Business object from external service button and you will see your Business Object Provider (BOP) in the REST Services catalog. Select the BOP and click on Next.

Select the GitHub Detail Business Object and click on next.

 

Drag and drop git_url and repo_name to the Selected fields column. Click Next

Provide Basic Authentication credentials required for accessing the REST resource. Click Next.

 

22.PNG

Wait for the Changes Saved pop up to appear and click Finish.

Check the Data tab to see the data from the REST API

 

More information regarding the Business Object Provider can be seen through the documentation: Creating Business Objects

ABCS Extension APIs are documented here: JavaScript Extension Development API for Oracle Application Builder Cloud Service: Home

Subscribe to the ABCS Youtube channel: https://www.youtube.com/channel/UCFMTiIZAE6f3Ib91sY6Ms3g

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.

oow-logo-2015.png

 

 

Oracle Application Builder Cloud Service (ABCS) is Oracle’s offering that empowers business users to create and publish web and mobile applications

quickly with a no-coding required browser based development experience.

 

 

Oracle will showcase the product at Oracle Open World 2016 San Francisco through the following Sessions, Hands-on Labs and Demo Booths

                                                                                                                                                                                                                                                                                 

Visual Application Development and Data Mashups for Busy Professionals [CON7296]                                                                                                     

Thursday, Sep 22, 12:00 p.m. - 12:45 p.m. | Marriott Marquis - Golden Gate C3

 

Solving IT Backlogs with Next-Generation Citizen Developer Tools [CON2888]                                                                                                  

Thursday, Sep 22, 9:30 a.m. - 10:15 a.m. | Marriott Marquis - Golden Gate B                                                                                                                                    

 

Dashboards and Custom Application Development for Oracle Customer Experience Users [CON2891]

Wednesday, Sep 21, 3:00 p.m. - 3:45 p.m. | Moscone West - 2016

 

No Code Required: Application Development and Publishing Made Easy [HOL7402]

Tuesday, Sep 20, 11:30 a.m. - 12:30 p.m. | Hotel Nikko - Nikko Ballroom III (3rd Floor)

Monday, Sep 19, 4:15 p.m. - 5:15 p.m. | Hotel Nikko - Nikko Ballroom III (3rd Floor)

 

HTML5 and JavaScript User Interface Development with Oracle’s Platform, Tools, and Frameworks [CON6492]

Wednesday, Sep 21, 12:15 p.m. - 1:00 p.m. | Moscone South - 306

 

Extend Digital Experiences through Component-Driven Integrations [CON7265]

Thursday, Sep 22, 9:30 a.m. - 10:15 a.m. | Moscone West - 2014

 

Simplified Multichannel App Development for Business Users [CON2884]

Monday, Sep 19, 1:45 p.m. - 2:30 p.m. | Moscone West – 2005

 

ABCS demos at the mobile mini-theater

Tuesday, Sep 20 10:30 a.m. - 11:30 a.m | Moscone Mobile mini-theater

Wednesday, Sep 21 10:30 a.m. - 11:30 a.m | Moscone Mobile mini-theater

 

Meet the product experts at Demogrounds

Monday-Wednesday, Sep 19-21, 10:15 a.m – 5:15 a.m. | Moscone South and Moscone West

 

More details regarding the session can be found here: http://bit.ly/OOW16ABCS

Register for the events to understand how to start creating rapid applications from the comfort of your browser!

Aggregation Function and Data Visualizations

 

Application Builder Cloud Service (ABCS) has introduced important features in its latest versions like giving the user the ability to add chart and gauge component to a page and to add field for aggregating data in a Business Object.

This blog will show the user how to create a quick application where a gourmet store is using aggregation function and charts functionality to analyze the sales data of its products for forecasting purposes.

Charts provide technical and fundamental analysis of data trends which helps business users or analysts make informed decisions in regards to the business strategies to be followed for future growth. For example by studying the product market trends through charts one can understand the supply and demand scenarios and modify pricing for the products. ABCS provides the users to drag and drop various chart components to a page and equipped for analysis within minutes.

 

Field for aggregated data in a Business Object

 

With aggregation the business user can add a field in a business object to show aggregate data in a related or child object. If there were business objects for Products (Figure 1) and Orders (Figure 2) then the user can aggregate data for total quantity sold for each product using the data from orders business object.

aggregation1.png

Figure 1: Products BO

 

In addition to the following fields OrderID(Number), Quantity(Number), OrderDate(Date) “Orders” Business Object(BO) has two additional fields. ProductName is a reference to the field of the same name in “Products” and another field named as Status which is a lookup type object with values “Completed” and “Pending”.

aggregation2.png

Figure 2: Orders BO

 

The creation of reference field also associated the Orders BO with the Products BO and makes it a related Business Object (Figure 3). This relationship is important for the aggregation to function.

Also, note the Figure 2 shows the lookup Object “Status” we created for the look up values.

aggregation3.png

Figure 3: Related Objects for Orders BO

 

We have populated the Products Object with sample data as shown in the figure (Figure 4). Each of the products in this object has an id automatically associated with it.

aggregation4.png

Figure 4: Sample Data in Products BO

 

Now add a few data points to the Orders business object as well. Create new rows for data (Figure 5)

aggregation5.png

Figure 5: Adding new data row in Orders BO

 

The sample data would look like the figure shown (Figure 6). The ProductName field has an id that corresponds to the id of the product in the Product BO

aggregation6.png

Figure 6: Sample Data in Orders BO

 

To calculate how many units of the products were sold we will leverage the aggregation function and aggregate the data from the Orders BO and show it in a field in Products BO.

In the Data Manager navigate to Products BO and add a field of Number data type and name it “TotalSold” (Figure 7)

aggregation7.png

Figure 7: Add field for aggregation in Products BO

 

Edit the field “TotalSold” in the fields tab and create a new aggregation. (Figure 8)

aggregation8.png

Figure 8: Edit Aggregation field to add a new aggregation rule

 

Object to Aggregate dropdown would be automatically configured. The aggregation rule used here is Total of the “Quantities” field in Orders BO. (Figure 9)

aggregation9.png

Figure 9: Aggregate over Quantity field in Orders BO

 

Navigate to the Products BO data tab to check the aggregated data in the “TotalSold” field. (Figure 10)

aggregation10.png

Figure 10: Aggregation Results

Creating Charts using Aggregated Data

 

We can now create charts on this data and use them in further price point analysis. Drag and drop a pie chart to a details page (Figure 11). Change the Chart slices to Percent

aggregation11.png

Figure 11: Add pie Chart component on a create/details page


We can add another chart to the same page which shows products to unit price analysis. Drag and drop a bar chart component to the same page (Figure 12)

aggregation12.png

Figure 12: Add Bar chart component to the same page

 

Now a business analyst can analyze the total sales percentage in correlation to the unit prices. For example it’s easily noticeable how the most expensive product is still one of the most sold ones as well. Further intricate comparison with sales data of different months can give more detailed insights on the market.  (Figure 13)

aggregation13.png

Figure 13: Charts for forecast analysis


More info on Application Builder Cloud Service: https://cloud.oracle.com/ApplicationBuilder

Application Builder Cloud Service Channel: https://www.youtube.com/channel/UCFMTiIZAE6f3Ib91sY6Ms3g