---
schema_version: "1"
id: 266c31baebc5737a873aa47ee4de7e54415ca55962465ebabb4ae9b1c0db68b1
title: Adding a Flyout to a Card State (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_flyout_to_a_card_state.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_adding_a_flyout_to_a_card_state.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: dd1a606a4bd9c5a6d5592c8ecc97caabb45de2fdf6a0d318f924fd7313f89a19
description: 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.
products:
  - Omnistudio
release: "264"
---
# Adding a Flyout to a Card State (Managed Package)

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](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.")` displays overflow actions from the parent card.

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

To add a flyout to a card state:

1. In your org, click the App Launcher, click Vlocity Cards, and click a version of a card to open the Card Designer.
2. In the **Flyouts** section of a card state, select a flyout layout template from the **Flyout Layout** dropdown. See [Creating a Flyout (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_flyout.htm&release=264.0.0&type=5 "For the managed package runtime, create a flyout to display additional information about the record displayed on the card when you click the card. 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."). Only active flyouts are visible in the list.
3. To display specific records, set the **Flyout Data Object**:
    
    ![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 parent context variable always gets passed into the flyout. See [Creating a Flyout (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_flyout.htm&release=264.0.0&type=5 "For the managed package runtime, create a flyout to display additional information about the record displayed on the card when you click the card. 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.").
    
    - **null**: leave the field blank to pass in the parent context of the card.
    - **$scope.obj.\[children\]**: where \[children\] represents an array inside the data source object such as PolicyLineItems for a Policy.
    
    ![image](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/salesforce_flyout.png)