Building Custom Oracle JET Components in VBCS

VBCS ships with a rich set of Oracle JET components — tables, forms, charts, trees. For most enterprise UIs, these are sufficient. When they’re not, you can build custom components and import them into VBCS using the JET Pack system.

When you actually need a custom component

The bar should be high. Custom components add maintenance overhead. Build one when:

• You have a UI pattern needed in more than three places across the app
• The built-in components require so much configuration per instance that it becomes error-prone
• You need to encapsulate a complex interaction that doesn’t map to any built-in component

Don’t build custom components for minor visual differences — CSS classes handle those.

Custom component anatomy

A VBCS-importable JET component requires:

• A component.json metadata file declaring the component’s properties, events, and slots
• An index.html or a JavaScript module defining the component’s structure and behaviour
• A loader.js that registers the component with the JET component registry

The metadata file is the contract between your component and the VBCS designer — it determines which properties appear in the property panel and which events are available for action chain binding.

Properties and events

Define properties for everything a consuming page might need to configure:

"properties": {
  "value": {
    "type": "string",
    "description": "The current selected value"
  },
  "items": {
    "type": "array",
    "description": "Array of selectable items"
  }
}

Define events for outputs back to the consuming page:

"events": {
  "ojValueChanged": {
    "description": "Fired when user selects a new value"
  }
}

In the component’s JavaScript, dispatch the event using the standard CustomEvent API.

Importing into VBCS

1. Package the component into a JET Pack (a structured folder with component.json at root)
2. In VBCS: Components → Import → Choose the pack folder
3. The component appears in the component palette and can be dragged onto pages

Keeping custom components maintainable

Version your component metadata. When a consuming page is bound to a specific property name and you rename it, bindings silently break. Increment the component version in component.json when making breaking changes and update consuming pages explicitly.