Setting up a Report List Widget

Report List widget is easy to set up and customize with Sorting and Pagination options.

After adding a Report List widget to the canvas, you can change the Sorting and Pagination options

Sorting

You can apply the following Sorting options to the Report List widget by clicking inside the "Sort Column" field:

• Name

• ID

• Last Accessed

• Last Published

• Last Published By

By clicking the Up or Down arrows, you can also sort by Ascending or Descending.

Pagination

In the Pagination settings, you can choose between:

• Infinite Scroll: New reports are loaded continuously as you scroll down the Reports List

• Paging: Reports are divided into pages, which can be navigated using the arrows at the bottom of the Reports List.

• None: Disables navigation in the Reports List

Example Setup of a Reports List Widget

Setting up a report list widget

Resulting report list widget with the above setup

Customizing List Columns using CDL

Using CDL you are able to customize the columns of a report list widget.

When customizing list columns via CDL, you can control various aspects such as the label, visibility, and content of each column.

Tip: Use show: false flag to hide default columns that you don’t want to display in the table.

Note on Custom Tables

To use a custom table in the reportList widget (e.g., project_reports in the example CDL below), you must first add the custom table in Hub. Ensure that the table contains the columns you wish to display or use in the report list. Once the table is set up in Hub with the relevant data, it can be referenced by name in the table attribute of the CDL to customize the columns accordingly.

Example CDL:

widget reportList #reportListWidget1 {
  label: "View your results"
  sortOrder: descending
  cardCorners: 20px
  paginationType: none
  size: large
  table: project_reports:
  mappingKey: "reportID"
  column value #name {
    label: "Name"
    value: ''
    show: false
  }
  column value #id {
    label: "ID"
    value: ''
    show: false
  }
  column value #reportID {
    value: project_reports:reportID
    show: false
  }
  column value #reportLabel {
    value: project_reports:reportLabel
    label: "Results"
  }
  column date #sf_admin_start {
    value: project_reports:sf_adminStart
    label: "Survey Start Date"
  }
  column date #sf_admin_end {
    value: project_reports:sf_adminEnd
    label: "Survey End Date"
  }
  column link #openInNewTab {
    value: ''
    width: '72px'
    sortable: false
    view: openInNewTabIcon
  }
  column date #accessed {
    value: "accessed"
    show: false
  }
  column date #created {
    value: "accessed"
    show: false
  }
  column value #createdBy {
    value: "accessed"
    show: false
  }
}