How to use any Oracle JET Component in VBCS

Herman Mensinga

Oracle JET has more components than available in VBCS. Using Web Components you can extend VBCS yourself with the missing JET components.

In Oracle JET you can add a Paging control to a table. For that you have to use a PagingDataSource. The Paging Control and PagingDataSource are (out of the box) not available in VBCS .
By using a Web/Composite Component I am able to add a Paging control to a Table component.

Creating the Web Component

For this use case I have created a Web Component with some properties:

  • columns, array of columns to display in the table (structure you would normally use for columns attribute of table component
  • id column, name of column that contains the row identifier
  • size, number of rows to display on one page
  • tabledata, array with row objects (data object from an ArrayDataProvider)

These properties are defined in the component.json file.

As the component is based on the oj-paging-control inside an oj-table, you could also add properties like mode and slot. You can find more on the paging-control in the Oracle JET Cookbook.

The component can also be further improved with icons, default values for properties, enumerations etc. Duncan Mills has created a nice blog describing what is possible.

In the Web Component the crucial part is in the Javascript. You can find this piece of code in the file paging-table-viewModel.js. In there I create a PagingDataSource based on the provided Array.

In the html I put an oj-table component with an oj-paging-control component. Both components use the pagingDataSource created in the javascript.

The resulting Web Component can be found on GitHub

Using the Web Component

To test the Web Component I create a Web application that uses a Business Service created from a csv-file.

The REST Service is invoked and mapped to an Array based on a type created from the REST endpoint.

The Web Component can be imported from the Component Pallet (scroll to the bottom).

Creating Business Object

Using the Data Manager you can create a Business Object based on a csv-file. The csv-file used in this blog can be found on GitHub

For this Business Object I first created a Type (on the flow), based on the items[] array from the GET/CarTransactions Endpoint. In the code I removed the items[] array level, resulting in the getall_CarTransactions object-type.

Based on this type I created an Array. On this blog it well described how you can call the Rest endpoint and assign the result to an Array.

Adding the Web Component

The Web Component can be dropped from the Pallet onto your page.

On the right you can specify the properties.

The columns Property I have taken from a table that I created completely using drag and drop.

The application export for this application can also be found on Github

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Next Post

IoT is silo integration using Azure Reference Architecture

In IoT, we bridge the gap between the physical world and the enterprise IT systems to unlock the data and create real business value.
%d bloggers like this: