SAIL Recipes give you an opportunity to explore different interface design patterns. To learn how to directly use SAIL recipes within your interfaces, see Adapt a SAIL Recipe to Work with My Applications.
Filter the data in a read-only paging grid using a dropdown. When the user selects a value to filter by, update the grid to show the result. The result displays on page 1 even if the user was previously on a different page number.
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.
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.
This scenario demonstrates:
=load(
/* 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!pagingInfo: a!pagingInfo(
startIndex: 1,
batchSize: 5,
sort: a!sortInfo(
field: "id",
ascending: true
)
),
local!selectedDepartment,
with(
/*
* local!datasubset is pulling data from the employee data store entity
* from the entity backed record tutorial.
*
* To use your data, change the constant from cons!EMPLOYEE_ENTITY to one of
* your own. Then replace the fields in the queryColumns to a
* relevant datapoint from your data store entity
*/
local!datasubset: a!queryEntity(
entity:cons!EMPLOYEE_ENTITY,
query:a!query(
selection: a!querySelection(columns: {
a!queryColumn(field: "firstName"),
a!queryColumn(field: "lastName"),
a!queryColumn(field: "department"),
a!queryColumn(field: "title"),
a!queryColumn(field: "phoneNumber"),
a!queryColumn(field: "startDate")
}),
filter: if(
isnull(local!selectedDepartment),
null,
a!queryFilter(field: "department", operator: "=", value: local!selectedDepartment)
),
pagingInfo: local!pagingInfo
)
),
a!sectionLayout(
contents:{
a!dropdownField(
label:"Department",
choiceLabels: local!departments,
choiceValues: local!departments,
placeholderLabel: "-- Filter By Department -- ",
value:local!selectedDepartment,
saveInto:local!selectedDepartment
),
a!gridField(
label:"Employees",
totalCount: local!datasubset.totalCount,
columns: {
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)
),
a!gridTextColumn(
label: "Department",
field: "department",
data: index(local!datasubset.data, "department", null)
),
a!gridTextColumn(
label: "Title",
field: "title",
data: index(local!datasubset.data, "title", null)
),
a!gridTextColumn(
label: "Phone Number",
data: index(local!datasubset.data, "phoneNumber", null)
),
a!gridTextColumn(
label: "Start Date",
field: "startDate",
data: index(local!datasubset.data, "startDate", null),
alignment: "RIGHT"
),
},
value: local!pagingInfo,
saveInto: local!pagingInfo
)
}
)
)
)
local!pagingInfo
so that the user always sees the first page of results for the selected filter. This is necessary regardless of what the user has selected, so we ignore the value returned by the component (in this case, the value of the dropdown selection) and instead insert our own value.local!data
with the result of your a!queryEntity()
or queryrecord()
. These functions allow you to retrieve only the fields that you need to configure your dropdown. See also: SAIL Designa!queryEntity()
or queryrecord()
, you can remove the filtering step and simply use a filter within a!queryEntity()
or queryrecord()
itself. For examples, see Query Recipes.