Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.
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 you've completed that recipe in your environment first.
In this case, only display the "Department" column when a user has not yet selected a department.
This scenario demonstrates:
a!gridColumn()a!queryEntity()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))
)
}
)
}
)
