Format Data 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

Format the data from a data store entity to display in a read-only paging grid, specifically a first and last name column as a user's display name and a date to a more readable format.

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 scenario demonstrates:

  • How to query data using a!queryEntity()
  • How to format the data that is returned from the query to display in the grid

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
=load(
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 10,
    sort: a!sortInfo(
      field: "firstName",
      ascending: true
    )
  ),
  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")
        }),
        pagingInfo: local!pagingInfo
      ),
      fetchTotalCount: true
    ),
    a!gridField(
      totalCount: local!datasubset.totalCount,
      columns: {
        a!gridTextColumn(
          label: "Name",
          field: "firstName",
          data: a!forEach(
            items: local!datasubset.data,
            expression: fv!item.firstName & " " & fv!item.lastName
          )
        ),
        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: a!forEach(
            index(local!datasubset.data, "startDate", null),
            text(fv!item, "mmm dd, yyyy")
          ),
          alignment: "RIGHT"
        ),
      },
      value: local!pagingInfo,
      saveInto: local!pagingInfo,
      rowHeader: 1
    )
  )
)

Test it Out

  1. Adjust the sorting of name field of live view and make sure the paging info values will reset to descending alphabetical order

Notable implementation details

  • The grid displays the text representation of all types, including Appian Objects such as a user, so we applied our own formatting
  • a!forEach() is used in these formatting cases because the expressions used to format this data will only evaluate the first value in the datasubset. For expressions that can handle arrays, a!forEach() is typically not needed.
  • Sorting for name is currently by first name. This can be adjusted at the field parameter of the first a!gridTextColumn().
FEEDBACK