9/1/2019 How to use any Oracle JET Component in VBCS - AMIS Oracle and Java Blog

TRENDING Tour de France Data Analysis using Strava data in Jupyter Notebook … Search... 

HOME AMIS VISION CAREERS @ AMIS EVENTS ABOUT CONTACT

YOU ARE AT: Home » Cloud » How to use any Oracle JET Component in VBCS

How to use any Oracle JET Component in VBCS 0

BY HERMAN MENSINGA ON FEBRUARY 10, 2019 CLOUD, DEVELOPMENT TOOLS, FRONTEND TECHNOLOGY, ORACLE JET, UNCATEGORIZED

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.

https://technology.amis.nl/2019/02/10/how-to-use-any-oracle-jet-component-in-vbcs/ 1/6
9/1/2019 How to use any Oracle JET Component in VBCS - AMIS Oracle and Java Blog

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

https://technology.amis.nl/2019/02/10/how-to-use-any-oracle-jet-component-in-vbcs/ 2/6
9/1/2019 How to use any Oracle JET Component in VBCS - AMIS Oracle and Java Blog

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

https://technology.amis.nl/2019/02/10/how-to-use-any-oracle-jet-component-in-vbcs/ 3/6
9/1/2019 How to use any Oracle JET Component in VBCS - AMIS Oracle and Java Blog
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.

https://technology.amis.nl/2019/02/10/how-to-use-any-oracle-jet-component-in-vbcs/ 4/6
9/1/2019 How to use any Oracle JET Component in VBCS - AMIS Oracle and Java Blog

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

Related Posts:

5 main building Karma testing with Oracle JET Nested Oracle Applications Some of my
blocks of the new code coverage for Data Grid for Cloud User Solutions for

application development frontend javascript JET low code Oracle Jet vbcs web component

https://technology.amis.nl/2019/02/10/how-to-use-any-oracle-jet-component-in-vbcs/ 5/6
9/1/2019 How to use any Oracle JET Component in VBCS - AMIS Oracle and Java Blog

ABOUT AUTHOR

HERMAN MENSINGA  

Herman Mensinga, active in IT (and with Oracle) since 1993. Consultant and trainer on diverse areas including Oracle JET, Oracle Database (SQL & PLSQL),
Javascript, WebLogic, ADF, Service Oriented Architecture, Apex and many other things.

RELATED POSTS

AUGUST 23, 2019 0 JULY 5, 2019 1 JUNE 27, 2019 0

Running a container in the AWS cloud using Fargate Dynamic tabs with Angular 6+ and ng-bootstrap Test Automation Days 2019

Leave a Reply

Enter your comment here...

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


   

https://technology.amis.nl/2019/02/10/how-to-use-any-oracle-jet-component-in-vbcs/ 6/6