---
schema_version: "1"
id: c2763ed62867d9952bfdc7de8a808ac6ba77077a6959b21abb305e3225dd18b8
title: Display Text Screen Output Component
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/flow_ref_elements_screencmp_display_text.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.flow_ref_elements_screencmp_display_text.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 0f02aa74449db1146b5d09dbdeadfd71cd8040d753813451c3d4a9b2d1b159f0
description: Display information in a flow screen.
products:
  - Flow Builder
  - Salesforce Platform
release: "264"
---
# Display Text Screen Output Component

Display information in a flow screen.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;"><a href="https://help.salesforce.com/s/articleView?id=platform.flow_ref_supported_editions.htm&amp;release=264.0.0&amp;type=5" title="Learn about the editions and user interfaces that support Flow Builder. Some Flow Builder features integrate with other Salesforce products that require additional licenses.">View supported editions.</a></td></tr></tbody></table>

## Configure the Display Text Component

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:24%">
          <col style="width:76%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d348182e68">Attribute</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d348182e71">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e68 ">
              <strong class="uicontrol">API Name</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e71 ">
              <p>The API name of the component.</p>
              <p style="margin-bottom:0;">An API name can include underscores and alphanumeric characters without spaces.
                It must begin with a letter and can’t end with an underscore. It also can’t have
                two consecutive underscores.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e68 "><strong class="uicontrol">Text box</strong></td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e71 ">
              <p>The text shown to the flow user. </p>
              <p>If you include a uniform resource
                identifier (URI), use one of these supported URI prefixes:</p>
              <ul>
                <li>
                  <p><code>http:</code></p>
                </li>

                <li>
                  <p><code>https:</code></p>
                </li>

                <li>
                  <p><code>//</code></p>
                </li>

                <li>
                  <p><code>/</code></p>
                </li>

                <li>
                  <p><code>file:</code></p>
                </li>

                <li>
                  <p><code>ftp:</code></p>
                </li>

                <li>
                  <p><code>mailto:</code></p>
                </li>

                <li>
                  <p><code>sfdc:</code></p>
                </li>

                <li>
                  <p><code>data:</code></p>
                </li>

              </ul>
            </td>

          </tr>
        </tbody>
      </table>

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-platform_automation-264-0-0-production-enus/60568438-ec7e-4665-acd1-7c80dcbe60d5/images/icon_note.png)

Note When you use a choice in a Display Text component, the component shows the choice label instead of the choice value.

## Format Text by Using the Rich Text Editor

Use the options in the rich text editor to format your text. Change the font family, size, and color. Make text bold, italic, or underlined. Indent and align your text for better structure. Use paragraph styles to make the text accessible to screen readers. Add images to enhance your content. Add alternate text to informational images. Finally, clear all formatting to start over.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d348182e198">Option</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d348182e201">Use It To</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td class="slds-cell-wrap" colspan="2" style="vertical-align:top;" headers="d348182e198 d348182e201 ">Font Control</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Font Family</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Apply specific fonts to the selected text</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Font Size</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Change the text size</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Font Color</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Change the text color</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" colspan="2" style="vertical-align:top;" headers="d348182e198 d348182e201 ">Text Styling</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Bold</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Make the text bold</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Italic</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Make the text italic</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Underline</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Add underlines to the selected text</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" colspan="2" style="vertical-align:top;" headers="d348182e198 d348182e201 ">List formatting</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Bulleted List</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Create unordered lists if the sequence of the items in the list isn't
              important</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Numbered List</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Create numbered lists if the sequence of items in the list is important</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" colspan="2" style="vertical-align:top;" headers="d348182e198 d348182e201 ">Text Alignment</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Indent</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Move the text further to the right</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Outdent</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Move the text closer to the left margin</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Left Align Text</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Left-align the text</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Center Align Text</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Center-align the text</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Right Align Text</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Right-align the text</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Link</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Add a hyperlink at the cursor position or add the hyperlink to the selected
              text</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Image</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">
              <ul>
                <li>Upload Image: Upload an image from your computer to <a href="https://help.salesforce.com/s/articleView?id=experience.collab_salesforce_files_parent.htm&amp;type=5&amp;language=en_US" target="_blank">Salesforce Files</a>. Images uploaded to
                  Salesforce Files don't always render correctly on Experience Cloud sites.</li>

                <li>Add Image from Static Resources: When you add an image from static resources,
                  perform one of the these tasks:<ul>
                    <li>Upload an image as a <a href="https://help.salesforce.com/s/articleView?id=platform.pages_static_resources.htm&amp;type=5&amp;language=en_US" target="_blank">static resource</a> from within Display
                      Text. <ul>
                        <li>Enter a name and select the cache control settings. The static
                          resource image name must start with a letter and contain only
                          alphanumeric characters and non-consecutive underscores. The name must
                          not include any spaces.</li>

                        <li>If the uploaded image is informative, add alternate text.</li>

                      </ul>
                    </li>

                    <li>Search for and select an existing static resource image. If the selected
                      image is informative, add alternate text.</li>

                  </ul>
                  <p>Static resource images are packageable and render correctly on
                    Experience Cloud sites. </p>
                </li>

              </ul>
            </td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Alt Text</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Add alternative text for informational images. To add alt text for
              informational images, select a single image from the screen properties editor of the
              Display Text Component component and enter alternate text. Skip the alternative text
              if the image is decorative.</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Paragraph style</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">
              <p>Use header styles Header 1 through Header 6 for headings. Use the Normal style
                for body text. Paragraph styles apply semantic HTML to text that screen readers can
                use to interpret the content structure accurately.</p>
              <p style="margin-bottom:0;">To apply a paragraph style to a
                word or phrase, place your cursor on the word or select the phrase, and then
                select a style.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e198 "><strong class="uicontrol">Remove formatting</strong></td>

            <td data-label="Use It To" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e201 ">Remove formatting from the selected text.</td>

          </tr>
        </tbody>
      </table>

## Set the Component Visibility

Specify the logic that determines when the flow displays the component.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:24%">
          <col style="width:76%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d348182e474">Option</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d348182e477">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e474 ">
              <strong class="uicontrol">When to Display Component</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d348182e477 ">
              <p>Configure when the component is displayed by using conditional logic. </p>
              <p>You can set the components to:</p>
              <dl>

                <dt style="font-weight:bold;padding-top:.25rem;">Always</dt>

                <dd style="padding-left:1.5rem;padding-bottom:.5rem;">Always display the component.</dd>


                <dt style="font-weight:bold;padding-top:.25rem;">When all conditions are met (AND)</dt>

                <dd style="padding-left:1.5rem;padding-bottom:.5rem;">Display the component when all of the conditions that you define are met.
                  Define at least one condition.</dd>


                <dt style="font-weight:bold;padding-top:.25rem;">When any condition is met (OR)</dt>

                <dd style="padding-left:1.5rem;padding-bottom:.5rem;">Display the component when at least one of the conditions that you define is
                  met. Define at least one condition.</dd>


                <dt style="font-weight:bold;padding-top:.25rem;">When custom conditional logic is met</dt>

                <dd style="padding-left:1.5rem;padding-bottom:.5rem;">Display the component when the condition logic that you define is met.
                  Define at least one condition and specify condition logic.</dd>

              </dl>
            </td>

          </tr>
        </tbody>
      </table>

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-platform_automation-264-0-0-production-enus/60568438-ec7e-4665-acd1-7c80dcbe60d5/images/icon_example.png)

Example Show a confirmation message that summarizes what the flow did on the user’s behalf.

## Considerations

- If you include a reference to another screen component within the text box of the Display Text component, the text is subject to the same character limit as reactive formulas, 3,900 characters. Formatting such as applying bold adds characters that count toward the limit. If the text exceeds the character limit, the Display Text component isn't reactive.
- Static resource image names must be 80 characters or fewer, including the namespace prefix.
- Static resource images uploaded from the Display Text component can be up to 2.5 MB.
- To search static resource images from the Display Text component, you need the View Setup and Configuration user permission. To upload static resource images from the Display Text component, you need the Customize Application user permission.

#### See Also

- [Standard Flow Screen Components](https://help.salesforce.com/s/articleView?id=platform.flow_ref_elements_screencmp.htm&release=264.0.0&type=5 "Salesforce provides several standard screen components that extend the types of input fields available in screens.")