--- schema_version: "1" id: 1c35dd49b789c47df2836770ecba9fbc5458b21dbc08bd4ebd5e60f1976e0a84 title: Creating a Card Layout Using Card Designer (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_card_layout_using_card_designer.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_card_layout_using_card_designer.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 8d7926e7fccacb1648875c300f2fcfe71ec56ccf381253aff4f776fdee04676d description: For the managed package runtime, create a card layout to build visual components to your customer interactions by adding data, enabling actions, and using custom or Vlocity templates to determine the look and feel. products: - Omnistudio release: "264" --- # Creating a Card Layout Using Card Designer (Managed Package) For the managed package runtime, create a card layout to build visual components to your customer interactions by adding data, enabling actions, and using custom or Vlocity templates to determine the look and feel. ![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 Beginning with the Vlocity Summer '19 release, Vlocity supports Salesforce's Lightning Web Components programming model with Vlocity Lightning Web Components. Vlocity Lightning Web Components include components, functionalities, and templates exclusive to LWC Cards. To enable LWC on a card layout, 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."). To create a card layout: 1. Open the Vlocity Card tabs, and click **New**. 2. Enter a unique **Layout Name** and follow Vlocity required naming conventions and best practices. See [Card and Card Layout Naming Conventions (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_card_and_card_layout_naming_conventions.htm&release=264.0.0&type=5 "For the managed package runtime, follow Vlocity's requirements and best practices when naming cards and card layouts."). ![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 Beginning with Vlocity Insurance and Health Spring '20, when creating a card or layout, the name and author must only contain underscores and alphanumeric characters. It must be unique, begin with a letter, not include spaces, not end with an underscore, and not contain two consecutive underscores. Existing layout names and card names are automatically updated to make them compliant. New cards and layouts can not be saved without following these naming requirements. 3. Select Layout from the **Layout Type** 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 create a Flyout, see [Creating a Flyout (Managed Package)](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."). 4. (Optional) Update the author in the **LayoutAuthor** field. See [Understanding the Author of a Card Layout (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_understanding_the_author_of_a_card_layout.htm&release=264.0.0&type=5 "For the managed package runtime, the Author property in templates, layouts, and cards specify the user organization that created the record."). 5. In the **Template** dropdown list, select a template, such as card-canvas-3x-slds to display cards in a 3 column layout. See [Base UI and Card Templates (Managed Package)](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."). 6. Beginning with Vlocity Insurance and Health Winter '20 and Vlocity CME Winter '20, Vlocity Cards supports limiting user access to a card layout by entering a comma-separated list of custom permissions in the **Required Permissions** field. For example, enter Can\_Edit\_Card,Can\_View\_Card to only allow users with at least one of these custom permissions to see the card layout. If this field is left empty, any user can see the layout. See [Custom Permissions](https://help.salesforce.com/articleView?id=custom_perms_overview.htm&type=5&language=en_US). 7. To configure card layout attributes, click the **Add Session Variables** button to enter a variable **Name** and **Value**. For example, the layout template `cardCanvasLayout` has a configurable attribute called `title`, which adds a title to the top of the layout. Enter title in the **Name** field and a value for the title such as List of Accounts in the **Value** field. 8. Select a data source for the layout in the **Data Source** field. The data source holds the master query that returns results in a JSON structure for cards in the layout. For example, you might query every policy associated with an account, then create a card for each policy type. For more information on how to configure a data source and to see a complete list of data sources, see [Configuring Data Sources](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."). ![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 Cards can have data sources different from the layout data source. 9. After configuring your data source, to test data returned, click the **+Add Test Variables** button in the **Test Data Source Settings** section. Enter values for these properties: - **Name**: Enter the name of the variable to test, such as params.id. This gets the ID in a page parameter for a record, such as an account record ID. - **Value**: Enter the value of the variable. For example, the account ID found in the URL parameter of an account record. 10. To use metatags to enable search engine optimization (SEO) options in your metadata, click +Add Metatags. The metatags feature enables the layout to write metatags to a page header. Available card metatags are: - `author` - `description` - `keywords` - `viewport` The metatags are inserted after a layout or card loads, whether or not the data source is set. Vlocity recommends that you replace metatags with the same name. Do not duplicate metatags. Web crawlers ignore duplicate tags. 11. Click **View Data** to display the query results in JSON. 12. Click **Activate**. After editing a layout, activate it before you leave the Card Designer. If you attempt to use an inactive layout, the layout throws this error: `Error: There is no active instance of Layout Name: layout.`