Conditionally Hide a Column in a Grid

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

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

This recipe uses example data 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.

images/SAIL_Recipe_Conditionally_Hide_Column.png

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!gridColumn()
  • 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
a!localVariables(
  /* In a real app, these values should be held in the database or in a constant */
  local!departments: { "Corporate", "Engineering", "Finance", "HR", "Professional Services", "Sales" },
  /*
  * local!selectedDepartment is being used to populate 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,
 {
    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",
      data: 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 */
          logicalExpression: a!queryLogicalExpression(
            operator: "AND",
            filters: {
              a!queryFilter(
                field: "department",
                operator: "=",
                value: local!selectedDepartment
              )
            },
            ignoreFiltersWithEmptyValues: true
          ),
          pagingInfo: fv!pagingInfo
        ),
        fetchTotalCount: true
      ),
      columns: {
        a!gridColumn(
          label: "Id",
          sortField: "id",
          value: fv!row.id,
          align: "END"
        ),
        a!gridColumn(
          label: "First Name",
          sortField: "firstName",
          value: fv!row.firstName
        ),
        a!gridColumn(
          label: "Last Name",
          sortField: "lastName",
          value: fv!row.lastName
        ),
        /* Department is only shown when no department is selected in the dropdown */
        a!gridColumn(
          label: "Department",
          sortField: "department",
          value: fv!row.department,
          showWhen: isnull(local!selectedDepartment)
        ),
        a!gridColumn(
          label: "Title",
          sortField: "title",
          value: fv!row.title
        ),
        /* Phone Number is shown when a department is selected in the dropdown */
        a!gridColumn(
          label: "Phone Number",
          sortField: "phoneNumber",
          value: fv!row.phoneNumber,
          showwhen: not(isnull(local!selectedDepartment))
        )
      }
    )
  }
)

Test it out

  1. Select a department value. Notice that the department column is no longer visible and the phone number column becomes visible.
FEEDBACK