---
schema_version: "1"
id: 13a609ca85329ffd3d54d8aba34a51a9937a5db4b86a7d5acbf6aa8e951d0f6c
title: Add Elements to a Flexcard (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_elements_to_a_flexcard.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_elements_to_a_flexcard.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 34bcc23a2bd84d6a10727b4eba7fabf67f84519994519f2830cd6e8c2349bc01
description: For the managed package runtime, add data fields, states, actions, and other elements to your Flexcard. Style an element and configure its properties in the Flexcard Designer.
products:
  - Omnistudio
release: "264"
---
# Add Elements to a Flexcard (Managed Package)

For the managed package runtime, add data fields, states, actions, and other elements to your Flexcard. Style an element and configure its properties in the Flexcard Designer.

![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, add Input elements on a Flexcard to enable users to enter data or select from a list of options you provide. Configure an action to update the data source with the user selected data.

Beginning with Vlocity Insurance and Health Summer '20 , the Flexcard Designer enables you to preview while you build dynamic context-specific user interfaces for customer interactions using a drag interface with WYSIWYG editing. The Flexcard Designer is LWC only and does not support Angular. See [Flexcard Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcard_designer.htm&release=264.0.0&type=5 "For the managed package runtime, the Flexcard Designer is a declarative tool with a drag interface and WYSIWYG editing that makes it easy to build user interface (UI) Lightning web components without code. Build interfaces rich in information and with actions relevant to your customer's context. You can also create the look and feel of your Flexcard by styling individual elements from graphic user interfaces (GUIs) built into the designer.").

Before You Begin

1. Create a Flexcard, and configure basic settings and a data source. See [Create a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, configure basic settings and data source options when creating a Flexcard in the Flexcard Designer. After creating a Flexcard you can update additional options and start building your user experience.").
2. Configure Setup options as needed. See [Flexcard Setup Reference (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcard_setup_reference.htm&release=264.0.0&type=5 "For the managed package runtime, the Setup panel in the Flexcard Designer provides multiple configuration options that enable a user to define the behavior of the Flexcard further. For example, update the data source and add session variables.").

1. From the Flexcards tab, click a version of a Flexcard to open the Flexcard Designer.
2. (Optional) To adjust the width of the canvas while building your Flexcard, select a size from the canvas size dropdown. See [Flexcards Element Responsiveness (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_element_responsiveness.htm&release=264.0.0&type=5 "For the managed package runtime, in the Flexcard Designer, enable responsiveness on one or more elements to set the width to change as the visible area of a page, called the viewport, changes. By default, the width of an element is the same regardless of the width of the viewport device on which the user views the Flexcard. The width of an element is 1 to 12 parts of a 12 column grid. For example, a field element that is 6 columns wide takes up 50% of the available horizontal space.").
    
    ![FlexCard Designer viewport breakpoint dropdown](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/canvas_size_dropdown.png)
3. To add an element to a state from the Build panel, perform one of these tasks:
    
    - To add an element from a search:
        
        1. In the search field, enter the name of an element, such as **Action**. You can also search for a specific Field element generated from your data source and available in the Fields section of the Build panel. For example, if your data source returns data field named Email, search for the Email Field element.
        2. Drag the element from search results into a state on the canvas.
    - To add an element from the lists of available elements:
        
        - To add data fields, perform one of these tasks:
            
            - Click **Fields**, to view a list of data fields available from the data source, and drag one or more fields into a state on the canvas.
            - From the **Elements** list, drag the **Field** element into a state on the canvas.
        - To add a display component such as an Action, drag the element from the **Elements** list into a state on the canvas. See [Flexcards Display Elements Reference (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_display_elements_reference.htm&release=264.0.0&type=5 "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.").
        - Beginning Winter '22, to add an input component such as a Typeahead, drag the element from the **Inputs** list into a state on the canvas. 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.").
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png)
    
    Note
    
    When you drag an element next to another element, it takes up the remaining width of the container. For example, if you drag an Icon element next to a Field element whose width is 10 parts of the 12-column grid, the Icon element takes up the remaining 2 columns. See [Flexcards Element Responsiveness (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_element_responsiveness.htm&release=264.0.0&type=5 "For the managed package runtime, in the Flexcard Designer, enable responsiveness on one or more elements to set the width to change as the visible area of a page, called the viewport, changes. By default, the width of an element is the same regardless of the width of the viewport device on which the user views the Flexcard. The width of an element is 1 to 12 parts of a 12 column grid. For example, a field element that is 6 columns wide takes up 50% of the available horizontal space.").
4. To configure the element, click the element to update its properties from the Properties panel.
    
    ![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_tip.png)
    
    Tip
    
    To easily distinguish between elements, update the **Element Name**. When you hover over or click an element on the canvas, the element name is viewable in a blue tab with white text.
    
    Beginning with the Summer '21 release, hover over the element to see its name.
    
    ![FlexCards element name tab](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcard_element_name_tab.png)
5. (Optional) To adjust the width of the element, hover over the square box on the right border until your mouse pointer icon becomes a drag icon. Click and slide the square box right or left to increase or decrease the width.
    
    ![FlexCards adjust width](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcards_adjust_width.png)
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png)
    
    Note
    
    To make the width of the element responsive to the viewport, see [Create Responsive Elements on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_responsive_elements_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, enable an element's width to change when the viewport updates. For example, make the widths of the fields for First Name and Last Name of a Contact take the full width of the page on smaller devices, but shrink to 50% on larger devices such as laptops and desktops.").
6. (Optional) To style your element, click **Style** to open the Style panel, and see [Style Flexcard Elements (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements.htm&release=264.0.0&type=5 "For the managed package runtime, configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states. From the Style panel in the Flexcard Designer, design backgrounds, text, and borders; adjust heights, widths, and spacing inside and between elements; apply classes and inline styles; make your element responsive; and more.").
7. (Optional) To add conditions that must be met for the element to display, see [Add Conditions to a Flexcard Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_element.htm&release=264.0.0&type=5 "For the managed package runtime, display or hide data based on the value of a data field. For example, display an alert icon or supplemental text for escalated Cases. Apply conditions to any element listed in the Build panel of the Flexcard Designer.").
8. (Optional) To add another state, drag the State element from the **Elements** list in the Build panel onto the canvas, and follow steps 4 through 7. See [Add a State to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_state_to_a_flexcard.htm&release=264.0.0&type=5 "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.").
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png)
    
    Note
    
    Each Flexcard has a default state that can’t be deleted.
9. To rearrange, duplicate, or delete elements, see [Arrange, Duplicate, and Remove Elements on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_arrangeduplicateand_remove_elements_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, arrange, duplicate, and delete elements on the canvas of a Flexcard in the Flexcard Designer. Drag elements onto the canvas, and rearrange them by dragging them below, above, and next to other elements. Duplicate and remove elements with one click.").

What’s next: Preview your Flexcard. See [Preview a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_preview_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, preview your Flexcard's appearance and functionality before publishing it to a Lightning page or Experience Builder site. In Preview, test how your Flexcard looks on multiple devices and test the functionality of action links and other interactive elements.").

- **[Flexcards Common Display Element Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_common_display_element_properties.htm&release=264.0.0&type=5)**  
    For the managed package runtime, Flexcard elements have properties shared by all Flexcard elements. For example, any element can be shown or hidden based on conditions set with the Conditions property.