Build a list page 编辑

Build a list page to show all records available in your system of record. 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 - Use this component as a search input. This means that you do not define text source or default.

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:

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 Data filter feature.

In a page, select the table in the component builder pane. Select Table Properties and select Data filter. 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 the records in the table to be from. Select Select Fields to choose fields that populate your page. Select Add.

   The new page is added to the Pages list and is ready to be customized. The builder page populates with the fields we selected. Now let’s customize the page.

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.
   • Do not set a Default Value.
   • 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.
   • 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 Search Text input for Component.
     6. Enable Only with value toggle.
     7. (Optional) You can add additional filters. For example, filter for active records. Also, you can combine the filter rules either by selecting ALL, ONE OFF, or by writing logical expressions.
     8. 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.

   You finished building the list page. As a final step, let’s select this page as the action page for the microapp, and make it visible in the list of actions for this integration.

6. Select Properties. This is the cog on the left when you are in the builder.

7. Under Actions, select the Enable as Action toggle and select this page in the Action page menu.

   This list page is now ready.