---
schema_version: "1"
id: 5bd867dad8e3c6c2c0e009a5c0bbbb196d948b60144c5703e3a7c118cfcb48f4
title: Flexcards Display Elements Reference (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flexcards_display_elements_reference.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_display_elements_reference.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: b74c092fc6f98e5b6aa71ee4cd995e570553711ccd91c2b94aab7ad9408f9f22
description: For the managed package runtime, select from a number of display elements to add to your Flexcard. Add elements such as data fields, actions, states, data tables, and more.
products:
  - Omnistudio
release: "264"
---
# Flexcards Display Elements Reference (Managed Package)

For the managed package runtime, select from a number of display elements to add to your Flexcard. Add elements such as data fields, actions, states, data tables, and more.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

Beginning Winter '22, to add input elements to enable users to enter data or select from a list of options you provide, see [Flexcards Input Elements Reference (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_input_elements_reference.htm&release=264.0.0&type=5 "For the managed package runtime, add input elements on a Flexcard to enable users to enter data or select from a list of options you provide. When a user enters, selects or updates a value, the change is reflected in the data JSON. You can configure an element to execute an action when a user selects an option or enters data. Input elements are available in the Inputs section of the Build panel of the Flexcard Designer.").

Beginning Winter '22, the Toggle element is available under the Inputs section of the Build panel. See [Flexcards Input Elements Reference (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_input_elements_reference.htm&release=264.0.0&type=5 "For the managed package runtime, add input elements on a Flexcard to enable users to enter data or select from a list of options you provide. When a user enters, selects or updates a value, the change is reflected in the data JSON. You can configure an element to execute an action when a user selects an option or enters data. Input elements are available in the Inputs section of the Build panel of the Flexcard Designer.") for the description and reference link for the Toggle element.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d297881e74">
              <p style="margin-bottom:0;">Element Name</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d297881e80">
              <p style="margin-bottom:0;">Element Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d297881e86">
              <p style="margin-bottom:0;">Element Properties Reference</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">Action</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Renders text or a button that executes an action when clicked. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_action_to_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, add up to six actions to a Flexcard to launch or update an Omniscript, navigate to a web page or application, display a flyout, fire an event, or update data field values. For example, add an action on an account Flexcard that when clicked, displays the contact information for the account.">Add Actions to a Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

          </tr>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">Block</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Enables grouping elements inside a
                collapsible container. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_group_elements_inside_a_block_on_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, combine logical groups of elements inside a collapsible container with the Block element on a Flexcard. For example, group an Account's basic information together, and separately, group the account's Contact information together.">Group Elements Inside a Block on a Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

          </tr>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">Chart</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Displays data as a chart. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_chart_to_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, display data on a Flexcard as a chart with the Chart element. Select from bar, pie, donut, line, and radar chart types.">Add a Chart to a Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

          </tr>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">Custom LWC</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Embeds a Custom LWC inside a Flexcard
                state. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_embed_a_custom_lwc_inside_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, embed a custom LWC, a child Flexcard, or an Omniscript in a Flexcard, and add custom styling and functionality. For example, if you have a carousel component, you can embed it in a Flexcard and then configure its attributes.">Embed a Custom Lightning Web Component, a Flexcard, or an Omniscript in a Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

          </tr>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">Datatable</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Creates a tabular structure from the data provided. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_datatable_to_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, add the Datatable element in Flexcard Designer.">Add a Datatable to a Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

          </tr>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">Field</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Displays the output from a data field. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_field_to_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, display data fields returned from a data source on a Flexcard. For example, display Policy information for an Account.">Add a Field to a Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

          </tr>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">Flexcard</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Embeds a Flexcard inside a state. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_embed_flexcard_inside_another_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, embed a reusable Flexcard as a child inside another Flexcard. The child Flexcard can have its own data source. Or, the parent can override the child's data source with its own data source. The parent can also pass specific data to the child, such as its recordId to use as the child's contextId.">Embed Flexcard Inside Another Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

          </tr>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">Icon</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Displays a custom or Salesforce SVG icon. The icon can be linked to an action. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_icon_to_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, display an SVG Icon on a Flexcard. Select from a Salesforce SVG icon or a custom action. You can also link the icon to an action.">Add an Icon to a Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

          </tr>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">Image</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Displays a custom image from a given URL.
                Upload an image, use an image from your org's library, or use an external
                source. The image can be linked to an action. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_image_to_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, add an image to a Flexcard in the Flexcard Designer. With the Image element, upload an image from your computer, use an image from a Salesforce library, enter a URL, or use a merge field from a data source. Link the image to an action, add classes, and adjust the size of the image relative to the canvas size.">Add an Image to a Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

          </tr>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">Menu</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Displays a list of actions as a dropdown menu. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_menu_to_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, create a menu from a list of actions on a Flexcard. Style the menu button, and each action in the menu's dropdown. Add any action type available in the Flexcard Designer.">Add a Menu to a Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

          </tr>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">State</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Adds a state to a Flexcard. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_state_to_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, add a state to a Flexcard to present different interactions and layouts based on specified conditions. Each Flexcard has a default state that cannot be deleted. Add a State element to the canvas of a Flexcard, or clone a state already on the canvas.">Add a State to a Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

          </tr>
          <tr class="">
            <td data-label="Element Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e74 ">
              <p style="margin-bottom:0;">Text</p>
            </td>

            <td data-label="Element Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e80 ">
              <p style="margin-bottom:0;">Renders text and parses merge fields with a rich text editor. See <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_text_element_to_a_flexcard.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, combine plain text and merge fields inside a rich text editor with the Text element in the Flexcard Designer. Enter a merge field, such as data fields, or context variables, such as session variables.">Add a Text Element to a Flexcard (Managed Package)</a>.</p>
            </td>

            <td data-label="Element Properties Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d297881e86 ">

            </td>

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

- **[Group Elements Inside a Block on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_group_elements_inside_a_block_on_a_flexcard.htm&release=264.0.0&type=5)**  
    For the managed package runtime, combine logical groups of elements inside a collapsible container with the Block element on a Flexcard. For example, group an Account's basic information together, and separately, group the account's Contact information together.
- **[Add a Chart to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_chart_to_a_flexcard.htm&release=264.0.0&type=5)**  
    For the managed package runtime, display data on a Flexcard as a chart with the Chart element. Select from bar, pie, donut, line, and radar chart types.
- **[Embed Flexcard Inside Another Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_embed_flexcard_inside_another_flexcard.htm&release=264.0.0&type=5)**  
    For the managed package runtime, embed a reusable Flexcard as a child inside another Flexcard. The child Flexcard can have its own data source. Or, the parent can override the child's data source with its own data source. The parent can also pass specific data to the child, such as its `recordId` to use as the child's contextId.
- **[Embed a Custom Lightning Web Component, a Flexcard, or an Omniscript in a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_embed_a_custom_lwc_inside_a_flexcard.htm&release=264.0.0&type=5)**  
    For the managed package runtime, embed a custom LWC, a child Flexcard, or an Omniscript in a Flexcard, and add custom styling and functionality. For example, if you have a carousel component, you can embed it in a Flexcard and then configure its attributes.
- **[Display Flexcard Data in a Tabular Structure (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_display_tab_flexcard_vlocity.htm&release=264.0.0&type=5)**  
    For the managed package runtime, display a tabular structure of the data fetched from a data source on a Flexcard. For example, display Account Cases as a sortable table.
- **[Add a Field to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_field_to_a_flexcard.htm&release=264.0.0&type=5)**  
    For the managed package runtime, display data fields returned from a data source on a Flexcard. For example, display Policy information for an Account.
- **[Add an Icon to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_icon_to_a_flexcard.htm&release=264.0.0&type=5)**  
    For the managed package runtime, display an SVG Icon on a Flexcard. Select from a Salesforce SVG icon or a custom action. You can also link the icon to an action.
- **[Add an Image to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_image_to_a_flexcard.htm&release=264.0.0&type=5)**  
    For the managed package runtime, add an image to a Flexcard in the Flexcard Designer. With the Image element, upload an image from your computer, use an image from a Salesforce library, enter a URL, or use a merge field from a data source. Link the image to an action, add classes, and adjust the size of the image relative to the canvas size.
- **[Add a Menu to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_menu_to_a_flexcard.htm&release=264.0.0&type=5)**  
    For the managed package runtime, create a menu from a list of actions on a Flexcard. Style the menu button, and each action in the menu's dropdown. Add any action type available in the Flexcard Designer.
- **[Add a Text Element to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_text_element_to_a_flexcard.htm&release=264.0.0&type=5)**  
    For the managed package runtime, combine plain text and merge fields inside a rich text editor with the Text element in the Flexcard Designer. Enter a merge field, such as data fields, or context variables, such as session variables.