---
schema_version: "1"
id: 40880c5712311ca3684f330c7e2f94f74bcd4379673c204236339b523becaf1f
title: Add Conditions to a Flexcard Element (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_conditions_to_a_flexcard_element.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_element.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 850cae3d451333c5734c792088110350680936ef345f61f2fb80a986b85e33a7
description: 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.
products:
  - Omnistudio
release: "264"
---
# Add Conditions to a Flexcard Element (Managed Package)

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.

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

Applying conditions to a state works differently than with other elements. See [Add Conditions to a Flexcard State (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_state.htm&release=264.0.0&type=5 "For the managed package runtime, Flexcard states enable the presentation of different CRM interactions for each state. Set conditions to determine if, when, and how data displays on a Flexcard.").

Beginning Winter '22, apply conditions to an action on an event listener or individual actions on the Menu element.

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

Applied conditions are visible in Preview only.

1. From the Flexcards tab, click a version of a Flexcard to open the Flexcard Designer.
2. Depending where you add a condition, perform one of the following tasks.
    - To add a condition to an element, select the element from the canvas and click **+Add New** next to **Conditions** in the Properties panel.
    - To add a condition on an action on an event listener, click Setup, click **\+ Add New** in the **Event Listener** section, and click **+Add New** next to **Conditions**.
    - To add a condition to an action on a Menu element, select a Menu element on the canvas. In the Properties panel select an action to edit (or click **\+ Add New Action**), and click **+Add New** next to **Conditions**.
3. (Optional for conditions applied to an Element) Beginning Winter '22, deselect the **Preload Conditional Component** checkbox to improve performance on conditional elements.
    
    By default, all elements on a Flexcard are preloaded. They’re added to the rendered HTML and, if the condition is false, are hidden with CSS. See [Disable Preload on Conditional Elements (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_disable_preload_on_conditional_elements.htm&release=264.0.0&type=5 "For the managed package runtime, improve performance on Flexcards with conditional elements by removing hidden elements from the Document Object Model (DOM), or the rendered HTML. By default, all elements on a Flexcard are preloaded, which means they’re added to the DOM and then, if the condition is false, are hidden with CSS. The element's HTML is still rendered.").
    
    If the condition returns false, the element isn’t rendered in the HTML.
4. Click **\+ Add Condition**.
5. Create basic conditions.
    1. Click **Data Field**, and from the list of data fields, select a data field to filter.
        
        For example, select Status for a Case record.
    2. To define the relationship between the data field and a value, select the **Operator** from the dropdown, such as **\=**.
    3. In the **Value** field, enter the value to check against. For example, enter Escalated. Variables aren’t supported.
        
        Only the `Parent.attr` context variable is supported for conditions on a State element in a child Flexcard.
        
        ![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 check against an empty value, enter undefined as the **Value** or leave **Value** blank.
    4. If adding another condition, click **\+ Add Condition** and select **AND** or **OR** between conditions.
        
        Select **AND** if all conditions must be met. For example, Status is Escalated and Priority is High.
        
        ![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 have only one condition, that condition must be met to display cards.
        
        Select **OR** if any condition can be met. For example, Status is Escalated or Priority is High.
        
        ![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 have only one condition, that condition doesn’t need to be met to display cards.
6. If needed, build nested conditions.
    1. Click **\+ Add Group** after creating a condition.
    2. Click **\+ Add Condition** and enter values for all fields for each condition.
    3. Select **AND** or **OR** from the dropdown between conditions.

- **[Disable Preload on Conditional Elements (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_disable_preload_on_conditional_elements.htm&release=264.0.0&type=5)**  
    For the managed package runtime, improve performance on Flexcards with conditional elements by removing hidden elements from the Document Object Model (DOM), or the rendered HTML. By default, all elements on a Flexcard are preloaded, which means they’re added to the DOM and then, if the condition is false, are hidden with CSS. The element's HTML is still rendered.
- **[Flexcards Conditions Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_conditions_properties.htm&release=264.0.0&type=5)**  
    For the managed package runtime, the properties for conditions are configurable for all elements in the Properties panel in the Flexcard Designer. Conditionally display Flexcard elements based on the value of a data field.