Navigation Patterns in Enterprise VBCS Applications

The navigation building blocks in VBCS

VBCS navigation is built on three components: Flows (groups of related pages), Routers (the navigation container), and Navigate actions (what triggers movement between pages). Understanding how these work together is the foundation of a well-structured app.

Flow-based organisation

Group related pages into flows:

• orders-flow: OrderList, OrderDetail, OrderCreate, OrderEdit
• invoice-flow: InvoiceList, InvoiceDetail, InvoiceApproval
• settings-flow: UserProfile, Preferences, SystemConfig

Flows have their own variable scope and can pass parameters when navigated to. This is the key to multi-step workflows where context must persist across pages.

Shell layout with the navigation list

For multi-module enterprise apps, use VBCS’s Shell template with oj-navigation-list for the sidebar:

<oj-navigation-list
  selection="{{ $variables.selectedModule }}"
  on-selection-changed="[[ $listeners.navigate ]]">
  <li id="orders">Orders</li>
  <li id="invoices">Invoices</li>
  <li id="reports">Reports</li>
</oj-navigation-list>

Each selection triggers a Navigate action that opens the corresponding flow.

Tab navigation within pages

For detail pages with multiple sections (details, history, attachments), use oj-tab-bar:

<oj-tab-bar
  selection="{{ $variables.activeTab }}"
  on-selection-changed="[[ $listeners.onTabChange ]]">
  <li id="details">Details</li>
  <li id="lines">Lines</li>
  <li id="history">History</li>
</oj-tab-bar>

Show/hide content sections based on $variables.activeTab using visibility expressions.

Drill-down navigation with parameters

When navigating from a list to a detail page, pass the record identifier:

// Navigate action parameters
{
  "inputParameters": [
    { "name": "orderId", "value": "{{ $page.variables.selectedOrderId }}" }
  ]
}

The detail page receives the ID via its input parameter and fetches the record on page load.

Back navigation consistency

Always provide a consistent back navigation mechanism. VBCS has a goBack() action, but browser history and SPA navigation don’t always align. For critical workflows (multi-step forms), use explicit flow navigation with a “Cancel” that returns to the list page, rather than relying on browser back.

Breadcrumbs for deep navigation

For apps with deep hierarchy (Organisation → Department → Employee → Timesheet), implement breadcrumbs using a flow-level array variable that tracks the navigation path. Update it on every navigate action.