---
schema_version: "1"
id: d61923cae489812088847a4128725b5101cb8ec9d40f7409537487cc95490625
title: Previewing a Layout (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_previewing_a_layout.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_previewing_a_layout.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: cf25b9b9acc5f6b045a4ed8e2048522895ad7e15da5c5a956bdb3b43ff69e2fe
description: For the managed package runtime, preview a card layout to see how your cards will look once published to a Lightning or Community page.
products:
  - Omnistudio
release: "264"
---
# Previewing a Layout (Managed Package)

For the managed package runtime, preview a card layout to see how your cards will look once published to a Lightning or Community page.

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

1. In your org, click App Launcher, click Vlocity Cards, and click a version of a layout to open the Card Designer.
2. Click the Preview tab.
    
    ![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
    
    Only active cards are visible in **Run Time**. All inactive and active cards are visible in **Design Time**.
3. Click the 'open in new window' icon to view the layout on a Visualforce page.
    
    ![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/preview_open_vf_page.png)
4. Click the refresh icon to reload the layout in the Preview pane.
    
    ![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/preview_refresh.png)
5. To preview how the layout looks on different pages and mobile devices, select a page from the dropdown list of universal and custom pages. **Universal** is selected by default.
    
    ![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/preview_pages.png)
6. To add a custom preview page for your layout:
    
    1. Create a Visualfource page for your preview page. See [Creating Visualforce Pages](https://help.salesforce.com/articleView?id=pages_creating.htm&type=5&language=en_US). Or choose an existing page from Setup > Custom Code > Visualforce Pages.
    2. Click **\+ Add Custom Page**.
    3. In the **Custom Page** modal, click **\+ Add Custom Page** for each new custom page you want to add.
    4. Enter values for these properties:
        
        - **Page Name**: Enter the API name of the Visualforce page.
        - **Page Label**: Enter the label of the Visualforce page.
7. If your card is LWC enabled, you must click **Deploy** to update changes before previewing your layout.

What’s next: Add your card to a Lightning or Community page. See [Adding a Vlocity Card to a Lightning or Community Page (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_adding_a_vlocity_card_to_a_lightning_or_community_page.htm&release=264.0.0&type=5 "For the managed package runtime, configure a Vlocity Cards Lightning component to render a Card Layout on a custom Lightning page or a Community page."). See [Adding an LWC Card to a Lightning or Community Page (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_adding_an_lwc_card_to_a_lightning_or_community_page.htm&release=264.0.0&type=5 "For the managed package runtime, beginning with the Vlocity Insurance and Health Summer '19 and Vlocity Communications, Media, and Energy Fall '19 releases, Vlocity supports the Salesforce Lightning Web Component programming model.").