The Visual Builder Cloud Service Blog

Adding a Navigation Bar to a VBCS Application

John 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="#" target="_blank">Administration</a></li>
  4. The oj-navigation-list component is highlighted with an error. This is because you haven't imported the component in the page's metadata. Hover over the tag until the editor hints appear, then use the Add Missing Dependencies hint to fix the error.

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. In the Property Inspector for the page variable, check Input Parameters and Required
  6. Switch back to the Action Chain view and drop a Navigate action in the chain
  7. Switch to the Metadata View and add the "page": "{{ $variables.page }}" line under the history line. 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. Enter $event.detail.value as the mapping for page, 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.Captcha

Integrated Cloud Applications & Platform Services