Sort Data Displayed in a Component

Sorting allows you to arrange your data in ascending or descending order. To sort specific fields in your data set, you can use the sortCriteria parameter in the Service Data Provider (SDP) used to retrieve the data.

Note:

For sorting to work, the REST service backing the SDP must support sorting. If your SDP connects to endpoints from a VB Studio business object or an Oracle Cloud Applications service, sort criteria can work out-of-the-box. If your SDP connects to endpoints from an external service, you need to provide a transform function to translate your sort criteria to the format expected by the service.

Let's say you have a List View component to display country information and a Select Single component to maintain sort criteria that looks similar to this:

Description of the illustration sortlistview.png

(For details on setting this up, see the sorting recipe for a List View component in the Visual Builder cookbook.)

Assuming your Select Single component is wired to the correct variables, here's how you configure the sort behavior:

1. In the Variables tab, locate the SDP variable underlying the List View component, for example, countryListSDP.
2. In the variable's Properties pane, select sortCriteria under Parameters:
   
   
   Description of the illustration sortcriteria.png
   
   
3. On the Target pane of the Map Variables to Parameters dialog, expand sortCriteria and item[i]:
   1. Select attribute, then in the text area, enter the name of the field for which you want data to be sorted; for example, countryName.
   2. Select direction, then specify the sort direction, either asc for ascending or dsc for descending. If you don't specify the direction, the default value (asc) is used.
   
   
   
   Description of the illustration sortcriteria-values.png
   
   
   You can add several sort criteria in the array to define sorting by multiple columns, for example:

   [
    {
     "attribute": "countryName",
     "direction": "asc"
    },
    {
     "attribute": "countryCode",
     "direction": "asc"
    }
   ]

4. Click Save.

Sorting in tables works a little differently. See Sort Data in Table Columns.