--- schema_version: "1" id: e978a04287854ef90af99b3890fa9aaa00fe5c2a38605621d77e582d1717a894 title: Preview a Flexcard (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_preview_a_flexcard.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_preview_a_flexcard.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 2bce3f1e1936f08d51810854f0e62e1414dc3ec25b5c64fdc566e98a99b8187c description: For the managed package runtime, preview your Flexcard's appearance and functionality before publishing it to a Lightning page or Experience Builder site. In Preview, test how your Flexcard looks on multiple devices and test the functionality of action links and other interactive elements. products: - Omnistudio release: "264" --- # Preview a Flexcard (Managed Package) For the managed package runtime, preview your Flexcard's appearance and functionality before publishing it to a Lightning page or Experience Builder site. In Preview, test how your Flexcard looks on multiple devices and test the functionality of action links and other interactive elements. ![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). ![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 [Navigate](https://help.salesforce.com/s/articleView?id=xcloud.os_navigate_from_a_flexcard_with_the_navigate_action.htm&release=264.0.0&type=5 "For the managed package runtime, navigate to an external web address, or within Lightning Experience, Lightning communities, or the Salesforce mobile app from a Navigate Action element on a Flexcard. For example, allow a user to navigate to a Policy record page by clicking an action element on a Flexcard that lists Account Policies.") and [Omniscript](https://help.salesforce.com/s/articleView?id=xcloud.os_launch_an_omniscript_from_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, launch an Angular or LWC Omniscript from an Omniscript Action element on a Flexcard. For example, launch a form that updates Account information based on the account Id passed from the Flexcard to the Omniscript.") actions don’t work in Preview. Add them to a Lightning or Digital Experience page to view them. ![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 To prevent the Flexcard Designer from freezing up in Preview, don't use a large data source. Using a Custom data source for testing is recommended. See [Configure a Custom Data Source on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_configure_a_custom_data_source_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, embed custom JSON data directly into Flexcard without depending on any external data source. Configure the Custom data source for testing with temporary static data. For example, when you're waiting for access to an API, or if you want to quickly test a concept."). You can use a larger data source in production. Before You Begin - Create a Flexcard and configure its data source. See [Create a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, configure basic settings and data source options when creating a Flexcard in the Flexcard Designer. After creating a Flexcard you can update additional options and start building your user experience."). - Add elements to your Flexcard. See [Add Elements to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_elements_to_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, add data fields, states, actions, and other elements to your Flexcard. Style an element and configure its properties in the Flexcard Designer."). 1. In the Flexcard Designer submenu, click **Preview**. ![Important](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_important.png) Important If you don't see your content in the Preview canvas, check that you have granted access to your org domains in Remote Site Settings. See [Update Remote Site Settings to Preview Your Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_update_remote_site_settings_to_preview_your_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, grant access to your org domains to enable LWC features such as Preview. When spinning a new org or new installation, the Tooling API calls necessary for LWC may fail if the Remote Site Settings page in your org does not include the URLs required. The required URLs are your org's lightning.force.com URL and the vf.force.com URL of the Visualforce page that contains the Flexcard Designer."). 2. (Optional) To add test parameters, click **Add Test Params**, and perform these tasks: - In **Key**, enter a variable to test how and what data displays on your Flexcard. For example, enter pagelimit to update how many pages display for a Datatable element. See [Flexcards Context Variables (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_context_variables.htm&release=264.0.0&type=5 "For the managed package runtime, global and local context variables are available to a Flexcard to provide context to data sources, actions, and other components. All variables are case sensitive."). - In **Value**, enter a test value. For example, if the **Key** is pagelimit, enter 2 to limit the number of pages to display on a Datatable element to 2. - Click **Add** to enter another parameter as a key/value pair. 3. (Optional) To see how your Flexcard looks on different devices, select from the Viewport Dropdown. ![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 To enable elements to change widths in response to the width of the viewport, see [Create Responsive Elements on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_responsive_elements_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, enable an element's width to change when the viewport updates. For example, make the widths of the fields for First Name and Last Name of a Contact take the full width of the page on smaller devices, but shrink to 50% on larger devices such as laptops and desktops."). 4. (Optional) Beginning Summer '21, view your Flexcard's data JSON from the **Data JSON** panel. See [View a Flexcard's Data JSON (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_view_a_flexcard_s_data_json.htm&release=264.0.0&type=5 "For the managed package runtime, view your Flexcard's data JSON from the Preview tab of the Flexcard Designer. Look for potential issues in how your data source populates elements before publishing your Flexcard or sending data to another component. The Data JSON panel updates when you interact with the Flexcard, such as when entering data in an input field or clicking an action."). 5. (Optional) Beginning Summer '21, debug action and event requests and responses from the **Action Debugger** panel. See [Debug Flexcard Action and Event Requests and Responses (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_debug_flexcard_action_and_event_requests_and_responses.htm&release=264.0.0&type=5 "For the managed package runtime, view your Flexcard's action and event requests and responses from the Action Debugger in the Flexcard Designer's Preview tab. Click an actionable item to display its debug log and associated events. Debug before publishing your Flexcard to a Salesforce page or third-party application."). 6. (Optional) Beginning in Summer '21, to preview your Flexcard at full-width, click the toggle icon (![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_toggle_debug_panel.png)) to close the Debug Panel. What’s next: Activate your Flexcard. See [Activate a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_activate_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, activate a Flexcard to generate an LWC and publish it to a Lightning page or Experience Builder site. After you activate a Flexcard, you can’t edit it or add elements to it.").