Build a detail page 编辑

Build a detail page to view details of one record that is available in your system of record. Remember, you can design and customize these pages for your needs. 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 detail page for your microapp, select from the starting templates then customize the page in the builder. For this Detail page, start with a Detail template which pre-populates the builder with Text components showing the fields we selected. Use the following components to build this sample detail page.

• Text - Define text source and formatting to load from the cache to the page.
• Back Button - Allows users to go back to previous page.
• Static Text - Define static text to appear on the page.
• Flexible Grid - Gives you more control over the positioning of components on your pages. Helpful when you’re designing pages intended for devices with larger screens. Set the label and the total number of cells you want in your grid.
• Table - Add a table by defining table source, filters, and defining columns. Page link actions can be added. Personalized queries based on users’ emails may be set to limit data exposure.

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

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 and select the Detail 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. Select and drag the Back Button element to the top of the builder panel.
5. Select and drag the Static Text element to the top of the builder panel under the back button.
   • Select Static Text Properties, and in the Content field, enter Ticket Detail.
   • Under Text Type, select Header.
6. Select and drag the Flexible Grid element to the builder panel. Use the Grid Items to place our existing Text components.
   • We need to add new cells. Select the Flexible Grid Properties tab, and under Total Number of Cells change the value to 8.
   • Select and drag the existing Text components to the location in the Flexible Grid where you want to place them.
7. Next, select and drag a Table component to the builder. Place it at the bottom.
   • Select the Table Properties tab. In the Label field, enter Comments.
   • Activate the Use Records Related to Detail Page toggle.
   • Select the Data Table that you want the table to show. In this case Comments 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.
   • Select Columns, and select the first item you see listed. Under Column Title give the column a name. For example, let’s name the column Author Name. Select a value for Data Table, which is pre-populated, and select the Data Column to map to the correct column.
   • Select +, and repeat for the following columns that we will label: Body and Created Date. For the date column, select Format to specify the time format used. You can, for example, build an action to a comment detail page, if necessary.
   • Select Set Filter if you need to filter data in your table based on certain conditions.
   • Select Set Order to view your table items in a desired order.

   This detail page is now ready.