April 2, 2023

How to create a custom component in Oracle VBCS

In this post, we will see how to create a custom component in Oracle VBCS. 

Assuming a VBCS web application is already created (“mytestapp” is the application created for this example), the below steps will create a custom component in the application.

  • Open application structure under web apps
  • Expand Resources
  • Right-click on the “components” folder and select Create option


  •  Enter an id value for the custom component in the input text field on the dialog opened


  •  Click on Create button
  • This step will create a folder with a set of files as shown below


  • Open each file to understand the content in it
  • Let's try to understand each of these files

o   loader.js: This file helps to register the custom component with the application. So that, it can be used on any page in the application as other common components

o   component.json: This file helps to configure the parameters, methods, and events used in the custom component and exposed outside of the component

o   <name>-view.html: This file is to create the view of the component which will be the face of the custom component

o   <name>-viewModel.js: This file is to handle the logic for the components in the view

o   <name>-style.css: This file is to style the custom components with the css