---
schema_version: "1"
id: 35ae308ae2773e5809af4c5223e7799095824ebfb1e51641c7278ddb88f2e6a4
title: File Preview Screen 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_file_preview.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.flow_ref_elements_screencmp_file_preview.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: acfb17a101b055d40ec6cc585de758499bb8e4531fffccfe315ea91fbc112342
description: Display a preview of a file in a screen flow.
products:
  - Flow Builder
  - Salesforce Platform
release: "264"
---
# File Preview Screen Component

Display a preview of a file in a screen flow.

### 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 File Preview 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="d77790e68">Attribute</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d77790e71">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d77790e68 ">
              <strong class="uicontrol">API Name</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d77790e71 ">
              <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="d77790e68 "><strong class="uicontrol">Content Document ID</strong></td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d77790e71 ">Required. The ID of the ContentDocument object to preview.</td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d77790e71 ">
              <p>The label that appears before the file preview.</p>
              <p style="margin-bottom:0;">This attribute accepts single-value resources. The value is treated as text.</p>
            </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="d77790e144">Option</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d77790e147">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d77790e144 ">
              <strong class="uicontrol">When to Display Component</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d77790e147 ">
              <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

In a customer service flow, display a preview of an uploaded receipt or document so agents can verify information without downloading the file.