Formatted Content

Formatted Content displays read-only information as plain text, formatted text, or a user avatar. Formatted Content is used to display a wide range of read-only content, from static links to related content to user avatars that link to full user profiles.

  • Usage
  • Configuration
  • Examples

Formatted Content offers a flexible way to add read-only content to a screen and to other components (e.g. links to related content). Formatted Content is also used to display user avatars.

Anatomy

  1. Card background

  2. Formatted text

Best practices

  • While Formatted Content can be used to display dynamic system data, avoid using it to display large amounts of information. The Action Form is recommended for this purpose because it's easier to maintain.

Common patterns

With Screen Breadcrumb

Screen breadcrumbs are a required element of all screens (with the exception of top-level screens such as dashboards). Screen Breadcrumb lets you create and configure the breadcrumb path to display in the header.

With Toolbar

Adding a Toolbar to Formatted Content can toggle views of screen content or add other basic functionality.

Properties

  • Data Source field – Required. The query that retrieves the data for the Formatted Content, based on the data model.
  • Label field – Optional. The label that displays for the Formatted Content.
  • Label Color field – Optional. The hex code for the label text color.
  • Display Treatment Properties section – Required. A section of properties used to configure the formatting of the content:
    • Display Treatment field – Required. Specifies the display treatment for the content:
      • Plain Text Display Treatment – The content displays as plain text.
      • Link Display Treatment – The content displays as linked text.
      • Formatted Text Display Treatment – The content displays as formatted text.
      • User Avatar Display Treatment – The content displays as user avatar.
    • Maximum User Avatars field – Optional. The maximum number of user avatars to display. Avatars that exceed this limit are displayed by selecting the View More icon, which displays information for all users on a new screen.
    • Message If No Results field – Optional. The message that displays if there is no data available.
    • Value Highlight Color field – Optional. The hex code for the color that the values are highlighted in. Used for content with the plain text display treatment, link display treatment, or the formatted text display treatment.
    • Value Color field – Optional. The hex code for the color of the content configured to display as formatted text.
    • Link To field – Optional. The screen that displays when users select the link.
    • Display Order for Fields field – Optional. The order to display the fields in.
    • Field Styles field – Optional. Specifies a display style in JavaScript to apply to the content configured to display as formatted text.
  • Fields field – Optional. The fields retrieved from the source specified in the Data Source field.
  • Data Source Conditions field – Optional. The initial set of conditions used when retrieving data from the source specified in the Data Source field.
  • Horizontal Alignment field – Optional. Specifies the horizontal alignment of the content:
    • Left – The content is left-justified.
    • Center – The content is center-justified.
    • Right – The content is right-justified.
  • Visibility Permission field – Optional. The user's permission to access the component. If a user is not assigned a role that includes this permission, they cannot view or interact with the component.
  • Visibility Permission Not Assigned drop-down – Optional. If the user does not have permission to access the component, specifies whether to hide or disable it:
    • Hide – The component is hidden.
    • Disable – The component is visible but not cannot be interacted with.

With avatar display

  • Display Treatment Properties:
    • Display Treatment set to Avatar Display Treatment.
    • Maximum User Avatars not included.
    • Link To included.
    • Display Order for Fields included.
  • Horizontal Alignment set to Left.

With plain text display

  • Display Treatment Properties:
    • Display Treatment set to Plain Text Display Treatment.
    • Maximum User Avatars not included.
    • Link To not included.
    • Display Order for Fields not included.
  • Horizontal Alignment set to Left.