---
schema_version: "1"
id: f2199393adad9b311484aa14637384b9032835f8bc74d17ffa54f3cf33b76cba
title: Kanban Board Screen Input Component (Beta)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/automate_flow_ref_elements_screencmp_kanban_board.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.automate_flow_ref_elements_screencmp_kanban_board.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: ca319c1eaed70859b144825fdbb3965035da37d55f5a9dcf7ce8afe8b5bb7350
description: Use the new Kanban Board component to show records as cards in columns that represent workflow stages, without custom Lightning implementations. Your users gain instant visibility into record progress and record details without leaving the flow. The Kanban Board is read-only, so users can’t drag cards between stages at run time.
products:
  - Flow Builder
  - Salesforce Platform
release: "264"
---
# Kanban Board Screen Input Component (Beta)

Use the new Kanban Board component to show records as cards in columns that represent workflow stages, without custom Lightning implementations. Your users gain instant visibility into record progress and record details without leaving the flow. The Kanban Board is read-only, so users can’t drag cards between stages at run time.

### 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 feature is a pilot or beta service that is subject to the Beta Services Terms at [Agreements - Salesforce.com](https://www.salesforce.com/company/legal/agreements/) or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the [Product Terms Directory](https://ptd.salesforce.com/). Use of this pilot or beta service is at the Customer's sole discretion.

## Configure the Kanban Board

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e82 ">
              <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="d130874e79 ">
              <strong class="uicontrol">Label</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e82 ">The user-friendly text that appears above the component.</td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e79 ">
              <strong class="uicontrol">Hide kanban board header</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e82 ">Indicates whether to hide the Kanban Board header and label when you run the
              flow.</td>

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

## Select the Kanban Board Data Source

 
| Attribute | Description |
| --- | --- |
| **Source Collection** | A collection of records to show on the Kanban Board. |

## Configure the Kanban Board Columns

<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="d130874e195">Attribute</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d130874e198">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e195 ">
              <strong class="uicontrol">Column Source Field</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e198 ">A picklist field from the source collection to use for the Kanban column
              headings.</td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e198 ">
              <p>The visual style of the Kanban header.</p>
              <dl>

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

                <dd style="padding-left:1.5rem;padding-bottom:.5rem;">Shows the header as plain-text heading.</dd>


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

                <dd style="padding-left:1.5rem;padding-bottom:.5rem;">Shows the header as a progress bar.</dd>

              </dl>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e198 ">A field from the source collection used to group the Kanban Board column
              cards.</td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e195 ">
              <strong class="uicontrol">Group Columns Cards by</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e198 ">A field from the source collection to use to group Kanban Board column cards. This
              field is available only when you select Show Group column.</td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e198 "> Indicates whether to summarize the records in the column and column card
              groups.</td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e198 ">A field from the source collection used to calculate totals for the records in each
              column and column card group. This field is available only when you select Show Summary
              field.</td>

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

## Configure the Kanban Board Cards

To add a card to the kanban board, select a card header field and configure these fields. To add subsequent cards, click **Add Field**. Select up to five fields to show on the card. Drag the cards to reorder them.

 
| Attribute | Description |
| --- | --- |
| **Card Header Field** | Required. A Field from the source collection to use as the card header. |
| **Source Field** | A field from the Source Collection object to display in the card. |
| **Use custom field label** | Indicates whether to display a custom label label instead of the field label. |
| **Custom Label** | The text to display for a field instead of the field label. Screen readers can read the custom label. |
| **Show card footer** | Indicates whether to display a field from the source collection in the card footer. |
| **Card Footer Field** | The field from the source collection to show in the card footer. This field is available when you select Show card footer. |

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

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

## Specify the Behavior of Values on Revisited Screens

Specify what this component does when a user enters a value, navigates to a previous screen, and then returns to the screen with this 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="d130874e524">Option</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d130874e527">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e524 ">
              <strong class="uicontrol">Use values from when the user last visited this screen</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e527 ">The component retains the values that the user specified and doesn’t update the
              values to reflect changes made on previous screens.</td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e524 ">
              <strong class="uicontrol">Refresh inputs to incorporate changes elsewhere in the flow</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d130874e527 ">
              <p>The component updates the user-specified values to reflect changes made on
                previous screens.</p>
              <p style="margin-bottom:0;" id="automate_flow_ref_elements_screencmp_kanban_board__d3649e119"><a name="automate_flow_ref_elements_screencmp_kanban_board__d3649e119"><!-- --></a>If you pause and then
                resume the flow, the flow retains user-specified values only in Checkbox, Checkbox
                Group, Currency, Long Text Area, Multi-Select Picklist, Number, Password,
                Picklist, Radio Buttons, and Text components.</p>
            </td>

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