In this lesson, we will add a filter and sort control to our list of Expense Reports.

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, just import the zip file below as a new project.

  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.

Adding a Filter to the List

  1. Open the Page Designer for main-start.
  2. Drop a Label and an Input Text component in the Toolbar next to the Create/Edit buttons.
  3. Change the display text to Filter:
  4. Select the input component. In the All tab of the Property Inspector, set the Placeholder to Name.
  5. Switch to the Variables panel and create a new String variable called searchString.
  6. Select expenseReportListSDP.
  7. In the Property Inspector, click filterCriterion and set map the filterCriterion to name $co $variables.searchString. Click Done, then Save.
  1. Go back to the Page Designer panel.
  2. Select the input text component. In the Data tab of the Property Inspector map the Value to {{ $variables.searchString}}

Adding a Sorting Control

  1. Open the Page Designer for main-start.
  2. Drop a Label and a Select One component in the Toolbar next to the Filter component.
  3. Set the display text on the Label to Sort By:
  4. Select the Select One component, then click the Data tab in the Property Inspector. Then click the + sign next to Sub Elements (oj-ojoption) to add these options:
  • Name: name
  • Start Date: startDate

  1. In the General tab, enter an empty space –  " " – in Placeholder. 
  2. Switch to the Variables panel and select expenseReportListSDP.
  3. Under Input Parameters click sortCriteria.
  4. Enter an empty string – "" – in the sortCriteria > items[i] > attribute. Change the mapping to be an Expression and not a Static String.
  5. Go back to the Page Designer and select the Sort By Select One component in the Toolbar.
  6. In the Data tab of the Property Inspector, set the Value to {{ $variables.expenseReportListSDP.sortCriteria[0].attribute }}

The next lesson in the Learning Path is Client-Side Validations in VBCS Apps.

Also see examples in the Visual Builder Cookbook