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

In this lesson we'll look at how to dynamically hide or display items in a VBCS application. Although many components have a "hidden" HTML attribute, many times the value there can be overridden by some parent control. To explicitly control any component's visibility, use the <oj-bind-if> tag.

 

Updating Your Project

This lesson builds on the Expense Report project we have been using in the VBCS Learning Path.

  1. Download this ZIP file to your computer.
  2. If you are continuing from a previous chapter and already have the Expense Report project, open the project, click Import, and drag and drop the file into the dialog.


     
  3. If you are starting at this lab and not continuing from a previous lab, go to the Visual Builder home screen, click Import > Import from File, and upload the ZIP there.

Dynamically Displaying Fields

Let's wrap Exchange Rate and Amount in USD in an <oj-bind-if> that only displays if the currency is not USD.

  1. Go back to the Page Designer for CreateExpenseAccount and switch into Code view.
  2. Insert the following <oj-bind-if> statement above the Exchange Rate <oj-input-number> 
    <oj-bind-if id="oj-bind-if--862244262-2" test="[[ $variables.expenseReport.country !== 1 && 
$variables.expenseReport.country !== undefined &&
$variables.expenseReport.country !== null &&
$variables.expenseReport.country !== '']]">
  3. Put a closing </oj-bind-if> tag after the Amount in USD tag.

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