The Visual Builder Cloud Service Blog

  • May 24, 2018

Adding New Oracle JET UI Component to Visual Builder Cloud Service

Shay Shmeltzer
Director of Product Management - Oracle

Oracle Visual Builder Cloud Service is an extendable platform - you can add your own UI components to the list of around 70 UI components that already show up in the component palette of your visual editor.

In this blog and video we show you two ways to add additional Oracle JET components to the editor.

In the first part of the video we show how to add a "core" Oracle JET components, specifically the train component. In the second part of the video (starting at minute 9) we show you how to add an Oracle JET Composite Component.

For the core component, the main thing to know is that you also need to add the component to the json file that describes your page. This way VBCS will know to load this component into your pages. (This is needed since VBCS is optimized to only load needed resources - leveraging require.js for smart resource management).

code for json file

In the video we also show how to create a new data type and array of that type to store a data structure needed to populate the train steps, and how to hook up data from a business object to populate that object when the page loads.

In the second part of the video we show how easy it is to pick up an Oracle JET Composite Component and add it to a page. A JET CCA Component is a complex UI component that can include multiple UI elements along with logic. This is based on the Web Components standard architecture, and allows developers to share UI components.

Train and Card Components

Join the discussion

Comments ( 3 )
  • Omri Sunday, May 5, 2019
    Hi Shay ,
    Coul'd you upload more videos of more complicated UI components ?
    for example visualizations etc.
  • Yazan Tuesday, June 23, 2020
    Hi Shay,

    Thank you for your valuable videos. Could you provide us with some complex components in Oracle jet and embed those components in VBCS, please?
  • Shay Shmeltzer Tuesday, June 23, 2020
    Omri, Yazan - the complexity of the JET component doesn't change how you add it to the VB app. If you are having issues adding a specific component - let us know on our forum - https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.