---
schema_version: "1"
id: 870ed1a88fb09625deacf6cf484a2582b83ece3814273769070e4d9e11e05494
title: Creating a Flyout (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_creating_a_flyout.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_flyout.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 140e12d239c7b784726198fe90f97332d3593d4a7a20ccaa623c89cb02f68231
description: 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.
products:
  - Omnistudio
release: "264"
---
# Creating a Flyout (Managed Package)

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.

![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 create a flyout:

1. In your org, click the App Launcher, click Vlocity Cards, and click **New** to create a new card layout.
2. On the **New Layout** screen, in the **Type** field, select **Flyout**.
3. Select the flyout **Data Source**:
    
    - To use the parent context variable of the card layout where you'll add your flyout, select **Parent** as the data source. To display specific data in the flyout:
        
        - Click **View Data** on the Layout or Card pane in the card layout where you'll add your flyout and copy the JSON data by clicking **Copy to clipboard**.
            
            ![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/copy_json_from_card_layout.png)
        - Choose **Sample** as the **Data Source** on your flyout layout and paste the copied JSON inside the input field.
            
            ![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/sample_json_ds.png)
        - Click **View Data** to generate the **Fields** picklist.
        - From the **Fields** picklist in the card state, add data fields.
            
            ![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/fields_cards_state.png)
    - If your flyout does not use data from the parent context variable of the card layout from where you'll add your flyout, add a data source to the layout, and optionally, to a card. 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.").
4. Click **Activate** on the Layout pane and on each card.

- **[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](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.