---
schema_version: "1"
id: 397fb86062e741832851b45a7c5d8b966bc2ea38dbfddc3f722acc8ac457baa6
title: Creating an LWC 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_an_lwc_flyout.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_creating_an_lwc_flyout.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: f629bff4c2cad385c57e5e50a083497c92a1c3a6d9002790f5f2f577753fef15
description: 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.
products:
  - Omnistudio
release: "264"
---
# Creating an LWC Flyout (Managed Package)

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.

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

With an LWC flyout, choose any LWC enabled component to use as a flyout, such as an LWC card layout, an LWC Omniscript, and a custom LWC you've created.

Alternatively, create an LWC enabled flyout layout as you would [create an Angular flyout](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.").

1. Go to the Vlocity Cards tab and click **New** to create a new card layout.
2. On the **New Layout** screen, in the **Type** field, select **Flyout**.
3. Click **Enable LWC** in the Layout pane.
4. (Optional) Configure the flyout **Data Source** if your flyout does not need to use data from the parent context variable of the card layout where you'll add your flyout. 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.").
5. Click **Activate** on the Layout pane and on each card.
6. To add the LWC flyout to a card state:
    1. Go to the Vlocity Cards tab and open a card.
    2. In the **Flyout** section of a card state, select an LWC flyout or any LWC enabled component from the dropdown list.
        
        ![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
        
        You must activate the LWC enabled component for it to appear in the dropdown list. 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.").
    3. To set the attributes of the LWC enabled component, click **Add Attributes** in the **Flyout Properties** section.
        
        For example, the [dataTable](https://help.salesforce.com/s/articleView?id=xcloud.os_datatable_lightning_web_component_readme.htm&release=264.0.0&type=5 "For the managed package runtime, this page contains the DataTable LWC ReadMe as of the Summer '21 release.") component requires values for both records and columns attributes whose values must be data references. Enter records and $scope.records as the first key-value pair to get the list of records and then enter columns and $scope.session.columns as the second key-value pair to set column titles.