---
schema_version: "1"
id: 948489e439b5246d8d33904f20fe859c0da68f815a7bc73d1ce0c5e9c6e6c0f9
title: Adding a State to a Card (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_adding_a_state_to_a_card.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_adding_a_state_to_a_card.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 0a06f93619951109128a99ff45a61ef427581d0ee148afd46b5a6eda759ba7c2
description: For the managed package runtime, add card states to display data fields from the card or card layout data source, to present different interactions and layouts based on specified conditions, to add actions, and to add flyouts to display additional information about a record. For example, for cards displaying past due policy information, use a card state template, and display actions, fields, and flyouts different from those on cards displaying information for active policies in good standing.
products:
  - Omnistudio
release: "264"
---
# Adding a State to a Card (Managed Package)

For the managed package runtime, add card states to display data fields from the card or card layout data source, to present different interactions and layouts based on specified conditions, to add actions, and to add flyouts to display additional information about a record. For example, for cards displaying past due policy information, use a card state template, and display actions, fields, and flyouts different from those on cards displaying information for active policies in good standing.

![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).

**Before you begin**

- Create a card layout. See [Creating a Card Layout Using Card Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_card_layout_using_card_designer.htm&release=264.0.0&type=5 "For the managed package runtime, create a card layout to build visual components to your customer interactions by adding data, enabling actions, and using custom or Vlocity templates to determine the look and feel."). See [Creating an LWC Card Layout (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_creating_an_lwc_card_layout.htm&release=264.0.0&type=5 "For the managed package runtime, create an LWC card layout to enable Vlocity Lightning web components.").
- Add a card. See [Adding a Card to a Layout (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_adding_a_card_to_a_layout.htm&release=264.0.0&type=5 "For the managed package runtime, beginning with the Vlocity Insurance and Health Summer '19 and Vlocity Communications, Media, and Energy Fall '19 releases, Vlocity supports the Salesforce Lightning Web Component programming model.").
- Select a data source for the layout or a card on the layout. See [Configuring Data Sources for Cards Components (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_configuring_data_sources_for_cards_components.htm&release=264.0.0&type=5 "For the managed package runtime, configure a data source on a card, layout, or flyout to retrieve data from a Salesforce object or an external database. Display the returned data on cards in a layout or flyout.").

1. In your org, click the App Launcher, click Vlocity Cards, and click a version of a card layout to open the Card Designer.
2. In the Cards pane, click the black arrow on a card to expand it.
3. In the States pane, click **\+ Add State**.
    
    ![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
    
    When adding multiple states with similar settings, click the **Clone State** icon to create a copy of the card state. The cloned card state appears below the original card state.
4. (Optional) To create a card state to display when there are no records available, select the **Blank Card State** checkbox. For example, if an Account or Contact does not have an insurance policy, create a state with a **card-open-slds** template to display a linked action to add a policy.
5. (Optional) Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, if your card is LWC enabled, select the **Custom LWC** checkbox to embed any Vlocity Lightning Web Component inside an LWC card state. See [Embedding a Vlocity Lightning Web Component Inside an LWC Card State (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_embedding_a_vlocity_lightning_web_component_inside_an_lwc_card_state.htm&release=264.0.0&type=5 "For the managed package runtime, beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, LWC Cards support embedding any Vlocity Lightning Web Component, such as an LWC Omniscript, an LWC enabled card, or any other custom LWC, inside an LWC Card state and setting the attributes of the embedded component.")
6. In the **Name** field, enter the name of the state, such as Active Policy.
    
    ![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
    
    The state **Name** is for internal use and does not appear on the card.
7. Select a card state template:
    
    - To select a card state template for an Angular card:
        
        - Select a template from the **Template** dropdown, such as card-active-slds. See [Base UI and Card Templates (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&release=264.0.0&type=5 "For the managed package runtime, the following tables list the base templates that are available for use with Vlocity Cards. When editing a template, it’s best practice to clone the existing template first and to edit the cloned version.").
    - To select a card state template for an LWC enabled card:
        
        - Select a template from the **State LWC** dropdown, such as card-active-state. See [Base LWC Card and Layout Templates (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_base_lwc_card_and_layout_templates.htm&release=264.0.0&type=5 "For the managed package runtime, the following tables list the LWC card templates and LWC layout templates available in Vlocity Cards. When editing a template, it is best practice to make a copy of the existing template first and to edit the cloned version. For more information on creating and cloning LWC card templates, see Creating Custom LWC Card Templates.").
    
    ![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
    
    If you want to display data fields, only actions, or both, choose the appropriate template. Some card templates display only actions, only data fields, and both.
    
    For example:
    
    - Select **card-active-slds** for an active card, such as a policy card that displays policy information and related actions.
    - Select **card-open-slds** for a Blank Card State, such as a policy card that only displays a Create New Policy action link for an Account or Contact without a policy.
8. (Optional) If the selected template has a placeholder, see [Adding a Placeholder to a Card State (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_adding_a_placeholder_to_a_card_state.htm&release=264.0.0&type=5 "For the managed package runtime, add additional fields to a card state by adding placeholders created in the Template 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
    
    Your card state template must have a placeholder merge field. See [Creating a Placeholder (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_placeholder.htm&release=264.0.0&type=5 "For the managed package runtime, create placeholders in the Template Designer to insert additional fields into card states in the Card Designer. For example, to add a unique title for escalated case cards, select the card-active-placeholders-slds card template, and enter Escalated for the value of the Title placeholder.").
9. To add data fields:
    
    1. Select a field from the **Fields** dropdown, and click **Add**.
        
        ![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
        
        Fields come from the layout data source unless the card has its own data source.
        
        ![Important](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_important.png)
        
        Important
        
        If you do not see a list of available data fields, click **View Data** in the Card pane or the Layout pane, whichever has the data source configured.
    2. (Optional) To enter a field not listed in the dropdown, but that does exist in your data source, select **<<Custom Field>>**, and click **Add** For example, if the current record used in the **Test Data Source Settings** does not have a Description in the JSON schema, but is available in the associated Omnistudio Data Mapper, the new field may not display in the Fields list.
    3. (Optional) If you selected <<Custom Field>> from the **Fields** dropdown, in the first column, enter the name of the field, such as \['Policy Description'\].
    4. To update the field type, in the middle column, delete the default string, and choose from the available types in the picklist. For example, if the field is a date, select date.
    5. To update the visible label of the field, in the last column, enter a label. For example, if the field is \['Created Date'\], enter Policy Created.
10. (Optional) To add actions to the card state, see [Using Actions with Cards (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_using_actions_with_cards.htm&release=264.0.0&type=5 "For the managed package runtime, cards use Vlocity Actions, OS Actions, and Custom Actions to launch procedures. For example, a card can launch an Omniscript, run an Apex class, redirect to a URL endpoint, and so on.").
11. (Optional) To add a flyout to display additional information about the record displayed on the card, see [Adding a Flyout to a Card State (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_adding_a_flyout_to_a_card_state.htm&release=264.0.0&type=5 "For the managed package runtime, add a flyout to a card state to display additional information about the record displayed on the card when you click the card. For example, the base Vlocity flyout template flyout-grid-slds displays overflow actions from the parent card.") or [Creating an LWC Flyout (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_creating_an_lwc_flyout.htm&release=264.0.0&type=5 "For the managed package runtime, flyouts in Vlocity Cards provide additional information about the record displayed on the card when you click the flyout. For example, a flyout can display information from long text strings that do not fit in the standard card field, or data from child records, such as open cases for an account, or additional actions.").
12. (Optional) To set conditions that must be met for the card state to be visible, see [Adding Conditions to a Card State (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_adding_conditions_to_a_card_state.htm&release=264.0.0&type=5 "For the managed package runtime, set conditions to determine which card state is displayed on a layout or to change appearance based on conditions. For example, on a card that displays policy information, one card state shows action links to update profile and account information for all policies, while another card state includes a renew action link if the policy is about to expire.") .
13. To preview the card, and check that card states are working as expected, click the **Preview** tab.
14. Click **Activate** on each card.

What’s next: Preview your cards. See [Previewing a Layout (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_previewing_a_layout.htm&release=264.0.0&type=5 "For the managed package runtime, preview a card layout to see how your cards will look once published to a Lightning or Community page.").

- **[Adding Conditions to a Card State (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_adding_conditions_to_a_card_state.htm&release=264.0.0&type=5)**  
    For the managed package runtime, set conditions to determine which card state is displayed on a layout or to change appearance based on conditions. For example, on a card that displays policy information, one card state shows action links to update profile and account information for all policies, while another card state includes a renew action link if the policy is about to expire.