---
schema_version: "1"
id: 52af8169d486b62702fcea60881a21b29d60ee1c8f9c3584edb6556c2f136155
title: Flyout Templates (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flyout_templates.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flyout_templates.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: dbc0ccf7fc0b50bc1cb81756ebc7976f7f08acfc278f6c424cba721272f179d2
description: For the managed package runtime, flyout templates enable users to view information or access additional actions for the current record or a child record. To create a flyout layout template, see Creating a Flyout.
products:
  - Omnistudio
release: "264"
---
# Flyout Templates (Managed Package)

For the managed package runtime, flyout templates enable users to view information or access additional actions for the current record or a child record. To create a flyout layout template, see Creating a Flyout.

![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 apply an LWC flyout template:

1. In the Layout pane of a Vlocity Card, ensure the **Type** is set to **Flyout**.
2. Enter a layout name in the **Layout LWC** 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/layout_lwc_flyout_type.png)
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:25%">
              <col style="width:25%">
              <col style="width:25%">
              <col style="width:25%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d261385e90">Card Template</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d261385e93">Description</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d261385e96">Template Preview</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d261385e99">Compatible Card Layout Templates</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d261385e90 ">
                  <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_storyeditstateflyout_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the StoryEditStateFlyout LWC Card Template ReadMe for each Vlocity release.">storyEditStateFlyout</a>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d261385e93 ">Displays the parent story item edit fields in a Lightning
                  form.</td>

                <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d261385e96 ">
                  <div style="text-align:left;">
                    <img src="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/os_classic_cards_storyEditStateFlyout.png" alt="Screenshot of storyEditStateFlyout template">
                  </div>
                </td>

                <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d261385e99 ">storyCardCanvas</td>

              </tr>
            </tbody>
          </table>