Display Data with CDT Fields from 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

Display data that contains CDT fields from in a read-only paging grid.

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 use the report builder to generate a grid.

Using the Report Builder

  1. Open a new or empty interface object and select Report Builder from the list of templates.
  2. In the Source Constant field, select the EMPLOYEE_ENTITYconstant.
  3. Remove the column for id.
  4. Add a column for the title field.
  5. Set the display name for each of the columns as firstName, lastName, department and title, respectively.
  6. Click Generate.

Let's take a look at the expression to see how it relates to what we configured.

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
=load(
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 20,
    sort: a!sortInfo(
      field: "firstName",
      ascending: true
    )
  ),
  with(
    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"),
        }),
        pagingInfo: local!pagingInfo
      ),
      fetchTotalCount: true
    ),
    a!gridField(
      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)
        )
      },
      value: local!pagingInfo,
      saveInto: local!pagingInfo,
      rowHeader: 1
    )
  )
)

Notable implementation details

  • The grid generated by the report builder is already configured to page and sort. Batch size is also set to 20 when report data is not aggregated.
  • Nested fields cannot be added through the report builder, so they must be added after the expression is generated
    • For example, if department was nested in this CDT, my query column might look like this: a!queryColumn(field: "department.name")
    • When indexing nested CDT data, it's necessary to drill into the data sub element, or use an alias in the queryColumn. The index expression would like this to drill into the data sub element, index( local!datasubset.data.department, "name", null)
FEEDBACK