Conditionally Hide a Column in a Grid

Interface patterns give you an opportunity to explore different interface designs. To learn how to directly use patterns within your interfaces, see How to Adapt a Pattern for Your Application.

Goal

Conditionally hide a column in a read-only paging grid when all data for that column is a specific value.

This recipe uses an employee data structure and objects created through the Use the Write to Data Store Entity Smart Service Function on an Interface recipe. Make sure that recipes has been built first in order to see data in this recipe.

In this case, only display the "Department" column when a user has not yet selected a department.

This scenario demonstrates:

  • How to conditionally hide a column in a grid based on a user's interaction
  • How to use the showWhen parameter in a!gridTextColumn()
  • How to configure the filter parameter in a!queryEntity()

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
=load(
  /* In a real app, these values should be held in the database or in a constant */
  local!departments: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 10,
    sort: a!sortInfo(
      field: "id",
      ascending: true
    )
  ),
  /*  
  * localselectedDepartment is being used to populated a queryFilter. When a department
  * is selected in the dropdown, the department column will be hidden, while the phone
  * number column appears as a replacement grid column.
  */
  local!selectedDepartment,
  with(
    local!datasubset: a!queryEntity(
      entity: cons!EMPLOYEE_ENTITY,
      query: a!query(
        selection: a!querySelection(columns: {
          a!queryColumn(field: "id"),
          a!queryColumn(field: "firstName"),
          a!queryColumn(field: "lastName"),
          a!queryColumn(field: "department"),
          a!queryColumn(field: "title"),
          a!queryColumn(field: "phoneNumber")
        }),
        /* The query filter is applied conditionally if the user chooses to filter by department */
        filter: if(isnull(local!selectedDepartment),
          null,
          a!queryFilter(
            field: "department", 
            operator: "=", 
            value: local!selectedDepartment
          )
        ),   
        pagingInfo: local!pagingInfo
      ),
      fetchTotalCount: true
    ),
    a!sectionLayout(
      contents:{
        a!dropdownField(
          label: "Department ",
          placeholderLabel: "-- Filter By Department -- ",
          choiceLabels: local!departments,
          choiceValues: local!departments,
          value: local!selectedDepartment,
          saveInto: local!selectedDepartment
        ),
        a!gridField(
          emptyGridMessage:"No employees meet this criteria",
          totalCount: local!datasubset.totalCount,
          columns: {
            a!gridTextColumn(
              label: "ID",
              field: "id",
              data: index(local!datasubset.data, "id", null)
            ),
            a!gridTextColumn(
              label: "First Name",
              field: "firstName",
              data: index(local!datasubset.data, "firstName", null)
            ),
            a!gridTextColumn(
              label: "Last Name",
              field: "lastName",
              data: index(local!datasubset.data, "lastName", null)
            ),
            /* Department is only shown when no department is selected in the dropdown */
            a!gridTextColumn(
              label: "Department",
              field: "department",
              data: index(local!datasubset.data, "department", null),
              showWhen: isnull( local!selectedDepartment)
            ),
            a!gridTextColumn(
              label: "Title",
              field: "title",
              data: index(local!datasubset.data, "title", null)
            ),
            /* Phone Number is shown when a department is selected in the dropdown */
            a!gridTextColumn(
              label: "Phone Number",
              field: "phoneNumber",
              data: index(local!datasubset.data, "phoneNumber", null),
              showWhen: not( isnull( local!selectedDepartment ) )
            )
          },
          value: local!pagingInfo,
          saveInto: local!pagingInfo,
          rowHeader: 2
        )
      }
    )
  )
)

Test it out

  1. Select a department value. Notice that the department column is no longer visible.

Notable Implementation Details

  1. Department values would typically be stored in a constant or lookup table, not hard-coded in a local variable. This was done to reduce the number of dependencies in this expression.
  2. A null value is being passed into the filter parameter when no department is selected. When local!selectedDepartment is null, we don't want to be applying a filter to our query.
FEEDBACK