---
schema_version: "1"
id: eea122ac51cddf634777096999b0ef9cfe0cb561a66ff2d7d354a75384617e1d
title: Section 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_section.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.flow_ref_elements_screencmp_section.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 37fd78e7ab79b132f7c8c6415dd204b2bb820c146f6fe9267e5d561d1bf2b12c
description: Organize screen components and record fields to give your users a better experience.
products:
  - Flow Builder
  - Salesforce Platform
release: "264"
---
# Section Screen Output Component

Organize screen components and record fields to give your users a better experience.

### 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>

![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 This screen component requires Lightning runtime.

## Usage

Use sections to organize screen components and fields to give users context and easier navigation. The Section component contains an optional header and up to four side-by-side columns. Each column can contain multiple components and fields. You can place multiple sections on a screen, each with its own header and number of columns.

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

Tip Apply conditional visibility rules to a section to affect all components and fields in that section. Use this method to set visibility rules one time for a large number of components, even if you want only one column.

![Edit Screen window with a section component, calling out the header configuration area, where to add a column, where to configure column width, and where to delete a column](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-platform_automation-264-0-0-production-enus/60568438-ec7e-4665-acd1-7c80dcbe60d5/platform_automation/images/flow/flow_screencmp_section.png)

- Headers (1)—Use section headers to create a visual hierarchy to guide your users to the most important items on a screen. All sections with headers are collapsible and open by default each time a user visits the screen. Also, section header labels can be translated.
- Columns (2)—Use columns to organize your screen and save your users from unnecessary scrolling.
- Column Width (3)—When you add or delete a new column, Flow Builder sets the width of all columns in that section to be equal. To change a column’s width, select a width from the predefined options.
- Column Deletion (4)—When you delete a column, all components and fields in that column are deleted.

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

Tip To center or indent your components and fields, or add padding, include empty columns on your screen.

## 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="d77238e111">Option</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d77238e114">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d77238e111 ">
              <strong class="uicontrol">When to Display Component</strong>
            </td>

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

## Considerations

- Sections are responsive to the size of the window that’s showing the flow. On small form factor devices, columns are stacked vertically instead. However, it isn’t responsive to the width of Lightning page columns and utility bars. For example, if a Lightning page shows a flow in a sidebar, the width of the entire window determines how the columns appear, even though the sidebar is narrower.
- If a screen contains a Section screen component, the screen ignores the Layout property when the flow is distributed in Experience Builder, the Lightning App Builder, or the utility bar. Screens with a Section screen component also ignore the `flowLayout` URL parameter when the flow is distributed via URL.

#### See Also

- [Set the Runtime Experience for URL-Based Flows](https://help.salesforce.com/s/articleView?id=platform.flow_distribute_internal_lexruntime.htm&release=264.0.0&type=5 "Are you distributing a flow via a URL? That includes things like direct URLs, custom buttons, and links in Setup. You can flip one switch to upgrade all those flows to Lightning runtime.")