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

This lesson is the first in the series on Dynamic UI. In this lesson we'll learn how to create computed fields in the UI. We will create an Amount in USD field that is computed by multiplying the Amount by the Exchange rate. Simple enough, right?

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.

Creating a Computed Field in the UI

  1. Open my-expense-reports-create-expense-report in the Page Designer.
  2. Select Amount in USD
  3. In the Data panel of the Property Inspector, change the Value property to: 
    {{$variables.expenseReport.amount ? ($variables.expenseReport.exchangeRate * $variables.expenseReport.amount) : 0 }}
  4. Run the page and try entering different values for the Exchange Rate. Amount in USD is updated automatically.

The next lesson in the Visual Builder Cloud Service Learning Path is Dynamic UI.