X

The Visual Builder Cloud Service Blog

Filtering and Sorting Lists in VBCS Applications

John Jullion-Ceccarelli
Product Manager

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 select expenseReportListSDP.
  6. In the Property Inspector, click filterCriterion and set map the following values to in filterCriterion:
  • item[0] -> attribute: name
  • item[0] -> op: $co
  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.expenseReportListSDP.filterCriterion.criteria[0].value }}

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. Make sure it is set as an Expression and not as a Static value.
  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.

Join the discussion

Comments ( 3 )
  • postak Friday, June 15, 2018
    in the Open the mapper for Input Parameters and set the following in filterCriterion
    - attribute: "Title"
    is wrong. It must be:
    - attribute: "name"
  • Tilak Friday, May 3, 2019
    The above steps works fine with the page based on Business Object but it is not working for the page based on Rest service for example, countryall.
  • John Ceccarelli Tuesday, May 7, 2019
    Tilak make sure your REST API supports filtering. Go to the Transforms tab of your service connection and enable filtering, pagination, and sorting. Then enter the javascript function for creating the URL based on the query parameters. Blog coming soon.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.