Free cookie consent management tool by TermsFeed

Filter a Grid Using a Dropdown

On This Page

Tip:  Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.

Goal

Configure a dropdown for users to filter data in a read-only grid.

This design pattern is not recommended for offline interfaces because reflecting immediate changes in an interface based on user interaction requires a connection to the server.

Note:  This expression uses direct references to the Employee record type, created in the Records Tutorial. If you've completed that tutorial in your environment, you can change the existing record-type references in this pattern to point to your Employee record type instead.

This scenario demonstrates how to use the filter parameter in the a!recordData() function to filter a grid based on the selection in the dropdown. This type of user filter is considered single-use because it is not configured in the record type.

Tip:  Consider creating a records-powered grid and adding user filters to the grid instead.

/SAIL Recipe Filter Records in a Grid Manual

Expression

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

a!localVariables(
  /* In your application, replace the values used in local!titles with a 
   * constant that stores the filter values you want to use in your grid. 
   * Then use cons!<constant name> to reference the constant in 
   * local!titles. */
  local!titles: {"Analyst", "Consultant", "Director", "Manager", "Sales Associate", "Software Engineer"},
  
  /* Use a local variable to hold the name of the title filter the user  
   * selects in the filter dropdown. This example, uses 
   * local!selectedTitle */
  local!selectedTitle,
  
   a!sectionLayout(
       contents: {
         a!columnsLayout(
           columns: {
             a!columnLayout(
               contents: {
                 a!richTextDisplayField(
                   label: "",
                   labelPosition: "COLLAPSED",
                   value: {
                     a!richTextItem(
                       /* We used ampersand (&) to concatenate the title 
                        * text we want to display at the top of the grid. 
                        * When the user selects a title filter in the 
                        * dropdown list, the grid will display "ALL 
                        * <local!selectedTitle> EMPLOYEES". If no filter 
                        * is selected, the grid * will display "ALL 
                        * EMPLOYEES". */
                       text: {
                         "All"& " "&if(isnull(local!selectedTitle),"EMPLOYEE", upper(local!selectedTitle))&"S"
                       },
                       
                       size: "MEDIUM_PLUS",
                       style: {
                         "STRONG"
                       }
                     )
                   }
                 ),
                 a!dropdownField(
                   label: "Title",
                   labelPosition: "ABOVE",
                   placeholder: "-- Filter By Title --",
                   choiceLabels: local!titles,
                   choiceValues: local!titles,
                   value: local!selectedTitle,
                   saveInto: local!selectedTitle
                 )
               },
               width: "MEDIUM"
             )
           }
         ),
         a!gridField(
           labelPosition: "ABOVE",
           data: a!recordData(
             recordType: recordType!Employee,
             filters: a!queryFilter(
               field: recordType!Employee.fields.title,
               operator: if(isnull(local!selectedTitle), "not null", "="),
               value: local!selectedTitle
             )
           ),
           columns: {
             a!gridColumn(
               label: "Name",
               sortField: recordType!Employee.fields.lastName,
               value: a!linkField(
                 links: a!recordLink(
                   label: fv!row[recordType!Employee.fields.firstName] & " " & fv!row[recordType!Employee.fields.lastName],
                   recordType: {
                     recordType!Employee
                   },
                   identifier: fv!row[recordType!Employee.fields.lastName]
                 )
               ),
               width: "1X"
             ),
             a!gridColumn(
               label: "Title",
               sortField: recordType!Employee.fields.title,
               value: fv!row[recordType!Employee.fields.title],
               width: "1X"
             ),
             a!gridColumn(
               label: "Department",
               sortField: recordType!Employee.fields.department,
               value: fv!row[recordType!Employee.fields.department],
               width: "1X"
             )
           },
           pageSize: 10,
           showSearchBox: false,
           showRefreshButton: false,
        )
      }
    )
  )

Test the filter and grid

You can follow along with this pattern by creating the Employee record type from this pattern.

Then, you can test this pattern:

  1. Replacing the record type references with the Employee record type in your environment.
  2. Click the reset button reset icon to reevaluate the interface.

  3. Select a title from the dropdown. Notice that only the employees that match the selected title are visible in the grid.

    /SAIL Recipe Filter Records in a Grid Test

Notable implementation details

This type of manual filter can work with URL parameters to:

To enable this, you would design your interface to use a rule input to set the value of the filter. For an example interface expression, see Use URL Parameters for Site and Portal Navigation.

Feedback