How to use any Oracle JET Component in VBCS result

How to use any Oracle JET Component in VBCS

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 paging-tables.zip 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.

How to use any Oracle JET Component in VBCS componentjson

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.

How to use any Oracle JET Component in VBCS javascriptPT

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

How to use any Oracle JET Component in VBCS htmlPT

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

How to use any Oracle JET Component in VBCS AddCCA

How to use any Oracle JET Component in VBCS UploadCCA

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.

How to use any Oracle JET Component in VBCS Flow

Adding the Web Component

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

On the right you can specify the properties.

How to use any Oracle JET Component in VBCS Specify properties

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

How to use any Oracle JET Component in VBCS result

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