Display a User's Tasks in a Grid With Task Links

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 the tasks for a user in a paging grid and allow them to click on a task to navigate to the task itself.

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:

  • How to use a!queryProcessAnalytics() to query task data
  • How to display a grid based on a process report's configuration
  • How to use the process report's configured formatting in SAIL
  • How to convert the process report's configured drilldown to interface links

Setup

For this recipe, you'll need a constant pointing to a task report. Follow these steps to create a task report with the default columns and associate it with a constant:

  1. From your application, click New, and then click Process Report.
  2. Select Create from scratch.
  3. Name the report Tasks for User A, and provide a description that will be displayed as the label and instructions of the grid.
  4. Under Report Type, select Task.
  5. Under Context Type, select Tasks by owner.
  6. Specify a folder to contain the report, and then click Create & Edit.
    The process report opens in a new tab.
  7. In the toolbar, click Edit.
  8. In the Report Options dialog, click the Data tab.
  9. Click the Name link.
  10. Check the Link to more information checkbox and from the Link to drop-down, select Task Details.
  11. Click Save.
  12. Save the report by clicking Save in the toolbar.

The main expression uses a supporting constant constant, so let's create them first.

  • UC_TASKS_FOR_USER_REPORT: Constant of type Document whose value is Tasks for User A

Now that we've created the supporting rules, let's move on to the main expression.

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

=load(
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 20
  ),
  with(
    local!report: a!queryProcessAnalytics(
      report: cons!UC_TASKS_FOR_USER_REPORT,
      query: a!query(pagingInfo: local!pagingInfo)
    ),
    a!gridField(
      label: local!report.name,
      instructions: local!report.description,
      totalCount: local!report.totalCount,
      columns: {
        a!forEach(
          items: local!report.columnConfigs,
          expression: with(
            local!columnData: index(local!report.data, fv!item.field, {}),
            local!columnDataCount: count(local!columnData),
            /* 
            * Created so a!forEach() below can use configuredFormatting 
            * when evaluating statuses
            */
            local!configuredFormatting: fv!item.configuredFormatting,
            a!gridTextColumn(
              label: fv!item.label,
              field: fv!item.field,
              alignment: if(
                local!configuredFormatting = "DATE_TIME",
                "RIGHT",
                "LEFT"
              ),
              data: if(
                local!columnDataCount > 0,
                a!forEach(
                  items: local!columnData,
                  expression: if(
                    local!configuredFormatting = "TASK_STATUS",
                    index(
                      {
                        "Assigned",
                        "Accepted",
                        "Completed",
                        "Not Started",
                        "Cancelled",
                        "Paused",
                        "Unattended",
                        "Aborted",
                        "Cancelled By Exception",
                        "Submitted",
                        "Running",
                        "Error"
                      },
                      /*
                      * Task status ids start with 0, so add one to reach the first index 
                      */
                      tointeger(index(local!columnData, fv!item + 1, -1 )),
                      "Other"
                    ),
                    tostring(fv!item)
                  )
                ),
                {}
              ),
              links: if(
                fv!item.configuredDrilldown = "TASK_DETAILS",
                a!forEach(
                  items: index(local!report.data, fv!item.drilldownField, {}),
                  expression: a!processTaskLink(task: fv!item)
                ),
                null
              )
            )
          )
        )
      },
      value: local!pagingInfo,
      saveInto: local!pagingInfo,
      rowHeader: 1
    )
  )
)

Test It Out

  1. Sort and (if you have enough tasks) page your grid
  2. Click on a task's name to view the task form

Notable Implementation Details

  • This example shows how to specially handle one kind of formatting and one kind of drill down, but the same pattern can be applied to provide an interface interpretation of other process report configurations.
Open in Github
FEEDBACK