Online Help | Web App

Customizing preview pane content

Introduced in 2025.2

The preview pane shows summary details for the record selected in the data view. For example, the preview pane for Tickets shows the Ticket's summary, description, status, the latest activity details, and the details about its requester, including the name, person picture, and contact information. For an illustration, see Web App Help: Web App user interface.

If you want to change what the preview pane shows, you can customize its content in the Admin Center, under Customization > General > Preview. This is where you build a template that contains all the elements of the Preview Pane, both static text and dynamic placeholders that will be populated with actual values at runtime.

TIP: The appearance of the Preview Pane (colors, fonts, etc.) is controlled by standard cascading style sheet (CSS) rules. For details, see Customizing Preview Pane styles.

Configuring horizontal and vertical previews

Each object class offers two configuration options:

  • Horizontal Preview: Defines the content when the pane is shown at the bottom of a data view.

  • Vertical Preview: Defines the content when the pane is shown on the right side of a data view.

You can configure both positions independently, ensuring the preview looks good regardless of where users place it in the Web App.

Editing preview pane templates

To customize the preview pane templates:

  1. In the Admin Center, go to Customization > General > Preview > [Object Class].

  2. Choose either Horizontal Preview or Vertical Preview.

  3. Design your HTML template using the built-in HTML editor integrated into the Preview page. For details, see Using the HTML editor.

    If you want to directly edit the HTML code, click Design > HTML Code to switch to the HTML code mode.

  4. Add, reorder, or remove elements as needed.

    To insert a placeholder for dynamic content, place the cursor in the position where you want the element to appear, click Insert Placeholder, and use the Select Placeholder window to choose a placeholder that will be replaced with the actual value at runtime.

  5. Click Save.

Related Information:

Customizing Preview Pane styles

Customizing Web App preview forms