Build a list page

Build a list page to show all items available in your workflow. This can be defined, for example, as all issues belonging to a particular user (personalized) or all in a particular project. This article assumes that you have already created your microapp for this workflow. For step-by-step details, see Add a new microapp.

To add a list page for your microapp, select from the starting templates then customize the page in the builder. For this List page, start with a Table template which has the Table builder components already available. Then add a Text Input component to search the table. This page uses the following builder components:

  • Table - Add a table by defining table source, filters, and defining columns. Page link actions can be added. Personalized queries must be set to limit data exposure.
  • Text Input - Define text source and default to load to the page.

The following image shows an example list page showing ticket details with a link to a detail page that we built with the components listed above:

Example of a list page

Important:

A table without a personalized query exposes all records that match a table filter regardless of the data relation to subscribers. Your potentially sensitive data may be exposed to all microapp users unless you limit data exposure. Control data access for pages using the Personalize feature.

In a page, select the table in the component builder pane. Select Table Properties and select PERSONALIZE. Then select +Add Condition and add the constraints as required.

Follow these steps:

  1. Select the microapp that you want to add a page to. Select Pages, and Add New Page.
  2. Give the Page a name, select the Table template.
  3. Confirm your Data source and select the Data table you want to access. Select Add. The new page is added to the Pages list and is ready to be customized.
  4. To add a search box, drag a Text Input component to the builder and place it above the table component.
    • Select the Text Input Properties tab. In the Label field, enter Search.
    • Disable the Map to Data Column toggle.
    • For this field, do not activate the Required toggle.
  5. Select the Table component that is already available in the builder.
    • Select the Table Properties tab. In the Label field, enter Tickets.
    • Activate the Use Records Related to Detail Page toggle.
    • Select the Data Table that you want the table to show. You must add the columns that you want to display in the table. See the screenshot above for a model of what we want to add.
    • Under Data Filter, select SET FILTER to map to the columns where the search is performed.
      1. Select Add.
      2. Select a value for Select column.
      3. Select contains for Action. This retrieves more results for partial or unfinished string inputs.
      4. Select component value for Value type.
      5. Select Text input for Component.
      6. Enable Only with value toggle.
      7. Select Save.
    • Select Columns, and select the first item you see listed. Under Column Title give the column a name. For example, we’ll name the column Ticket Number, but the data column we map to is labeled issue_key. Select a value for Data Table, which is pre-populated, and Data Column to map to the correct column.
    • Select +, and repeat for the following columns that we label: Description, Issue Type, and Priority.
    • Select the Actions tab, and select the Details page we already created. This places a View Details link on the right-hand side, and builds a link to a page populated with details of the given issue.

    The list page is now ready.

Build a list page