The Visual Builder Cloud Service Blog

Adding a Navigation Bar to a VBCS Application

John Jullion-Ceccarelli
Product Manager

This blog is part of the series Visual Builder Cloud Service Learning Path.

In this lesson we'll add a navigation bar to our application. First it's important to understand what actually gets loaded when you open a VBCS page in the runtime. Here is the heirarchy:

  • index.html - this is the page that actually gets loaded. It's just a wrapper. The only time you'll need to edit this page is when you want to specify a different CSS file.
  • shell page - this is the wrapper you see in the page. It contains the header and footer and the navigation bar that you will add in this lesson. You can have multiple shell pages for different parts of your application. The default shell is specified in the application settings (i.e. click Expenses node in Web Apps panel, then click the Settings panel). Like any other page, a shell page has its variables, actions, events, and so forth.
  • flow - each flow specifies a top-level page and the application settings also specify the default flow to open when the app is accessed.

Currently VBCS only allows you to navigate to the top level page of a flow or to another page inside the same flow. That means that any page that you want linked from the top-level navigation menu must be in their own flows. That's why we created the admin page as its own flow instead of a page in the main flow.

Updating Your Project

This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. If you are starting at this lab, go to Building Your First VBCS Application and follow the steps to import the project, then continue below.

  1. Download this ZIP file to your computer.
  2. In your project, click the menu in the top right and choose Import Resources.
  3. Drag and drop the ZIP file into the dialog. Select Delete existing files and resources and click Import.

Adding the Navigation Bar

  1. Open the Web Apps window and open Expenses > root pages > shell.
  2. Switch to the Code mode.
  3. Add the following code before the closing </header> tag:
      <div role="navigation" class="oj-web-applayout-max-width oj-web-applayout-navbar">
        <oj-navigation-list id="123" aria-label="Choose a navigation item" navigationlevel="application" drill-mode="none" display="all" edge="top" selection="[[$page.currentFlow]]" class="oj-md-condense oj-md-justify-content-flex-end" on-selection-changed="[[$listeners.ojNavigationListSelection]]">
            <li id="main"><a href="#">My Expense Reports</a></li>
            <li id="admin"><a href="#">Administration</a></li>

Creating the navigateToPage Action Chain

  1. Go to the Actions panel of the shell Page Editor
  2. Create a new Action Chain called navigateToPage.
  3. Go to the Variables panel of the Action Chain Editor.
  4. Add a String variable called page.
  5. Add a Boolean variable called navigate.
  6. In the Property Inspector for the page variable, check Input Parameters and Required. Do the same for the navigate variable.
  7. Switch back to the Action Chain view and drop an If action on the action chain. Set the Condition to {{ $chain.variables.navigate }}
    The reason you're doing this is that the selection change event can get dispatched from either a user action, like a click, or by external changes to the selection property. We only want to react to the former - user actions. We will set the navigate property below to ignore external changes.
  8. Drop a Navigate action to the true path of the If action.
  9. Switch to the Metadata View by clicking the { } tab and add the following lines in bold. Don't forget the comma at the end of the history line.
    "actions": {
      "navigateToPage1": {
        "module": "vb/action/builtin/navigateToPageAction",
        "parameters": {
          "history": "push",
          "page": "[[ $variables.page ]]"

Adding the Listener on the Navigation List

  1. Go back to the shell tab and open the Events panel
  2. Click the + Event Listener button.
  3. Click the + button on Other Events and name your custom event ojNavigationListSelection. Click Select.
  4. Select the navigateToPage action chain and click Finish. The event is created.
  5. In the list of Events, click page under Input Parameters
  6. Set the mapping to be an Expression, then enter $event.detail.value as the mapping for page.
  7. Click navigate under Parameters. Enter $event.detail.updatedFrom !== 'external', set it to be an Expression, and click Save.

The next lesson in the learning path is Data Security and Role-Based UI.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.