--- schema_version: "1" id: 82815720f2e53c36cf49d3933b411457612918e631f4d04ebe22e07f57ffac3c title: Creating Custom LWC Card 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_creating_custom_lwc_card_templates.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_creating_custom_lwc_card_templates.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 518b7086fd6d977251f5f86aed6df854bf7a02ea23f213a704d3a9dc5a00fe31 description: 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. products: - Omnistudio release: "264" --- # Creating Custom LWC Card Templates (Managed Package) 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. ![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). Create a custom LWC card template from an existing template, or from one of Vlocity's base mixins, such as [BaseState LWC](https://help.salesforce.com/s/articleView?id=xcloud.os_basestate_lightning_web_component_readme.htm&release=264.0.0&type=5 "For the managed package runtime, this page contains a BaseState LWC ReadMe for each Vlocity release.") for card states and [BaseLayout LWC](https://help.salesforce.com/s/articleView?id=xcloud.os_baselayout_lightning_web_component_readme.htm&release=264.0.0&type=5 "For the managed package runtime, this page contains a BaseLayout LWC ReadMe for each Vlocity release.") for 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 Custom Lightning web components built outside of the package cannot use any Salesforce Lightning web component that uses Salesforce resources or affects the component at run time. For more information, see [Salesforce Modules](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_salesforce_modules). ## Set Up Your Environment To manage and develop Vlocity Lightning Web Components, use Salesforce DX with Visual Studio or IDX Workbench with Visual Studio. Both development approaches have source control. However, we recommend IDX Workbench because it allows you to deploy Vlocity components between orgs and compare both source and target files. - To manage and develop your LWCs with Salesforce DX, see [Set Up Your Development Environment](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.install_setup_develop). - To manage and develop your LWCs with IDX Workbench, see [IDX Workbench Desktop Application (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_idx_workbench_desktop_application.htm&release=264.0.0&type=5 "For the managed package runtime, IDX Workbench is a desktop application that you use to deploy Omnistudio data packs and Salesforce metadata. Its user interface is built on top of the Omnistudio Build Tool. The application is available for Mac and Linux."). ## Create a Custom LWC Card Template Create a new custom LWC layout template by extending the BaseLayout mixin. See [Create a New Custom LWC Layout Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_new_custom_lwc_layout_template.htm&release=264.0.0&type=5 "For the managed package runtime, create a custom template for an LWC layout by extending the BaseLayout Mixin."). Create a new custom LWC card state template by extending the BaseState mixin. See [Creating a New Custom LWC Card State Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_new_custom_lwc_card_state_template.htm&release=264.0.0&type=5 "For the managed package runtime, create a custom template for an LWC card state by extending the BaseState Mixin. See BaseState Lightning Web Component ReadMe."). ## Create a Custom LWC Card Template From an Existing Template Create a custom LWC layout template by extending an existing layout template. See [Extend a Template to Create a Custom LWC Layout Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_extending_a_template_to_create_a_custom_lwc_layout_template.htm&release=264.0.0&type=5 "For the managed package runtime, extend a template to create a custom LWC layout template. For example, use the CardCanvasLayout LWC template to overwrite methods and HTML templates. To see what methods can be overwritten for your extended component, view its ReadMe file. See Vlocity Cards LWC ReadMe Reference and Base Omnistudio LWC ReadMe Reference."). Create a custom LWC card state template by extending an existing state template. See [Extending a Template to Create a Custom LWC Card State Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_extending_a_template_to_create_a_custom_lwc_card_state_template.htm&release=264.0.0&type=5 "For the managed package runtime, extend an existing template to create a custom LWC card state template. For example, use the CardActiveState LWC template to overwrite methods and HTML templates."). - **[Create a New Custom LWC Layout Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_new_custom_lwc_layout_template.htm&release=264.0.0&type=5)** For the managed package runtime, create a custom template for an LWC layout by extending the BaseLayout Mixin. - **[Extend a Template to Create a Custom LWC Layout Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_extending_a_template_to_create_a_custom_lwc_layout_template.htm&release=264.0.0&type=5)** For the managed package runtime, extend a template to create a custom LWC layout template. For example, use the CardCanvasLayout LWC template to overwrite methods and HTML templates. To see what methods can be overwritten for your extended component, view its ReadMe file. See Vlocity Cards LWC ReadMe Reference and Base Omnistudio LWC ReadMe Reference. - **[Creating a New Custom LWC Card State Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_new_custom_lwc_card_state_template.htm&release=264.0.0&type=5)** For the managed package runtime, create a custom template for an LWC card state by extending the BaseState Mixin. See BaseState Lightning Web Component ReadMe. - **[Extending a Template to Create a Custom LWC Card State Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_extending_a_template_to_create_a_custom_lwc_card_state_template.htm&release=264.0.0&type=5)** For the managed package runtime, extend an existing template to create a custom LWC card state template. For example, use the CardActiveState LWC template to overwrite methods and HTML templates. - **[Downloading Custom Unmanaged LWCs From the Card Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_downloading_custom_unmanaged_lwcs_from_the_card_designer.htm&release=264.0.0&type=5)** For the managed package runtime, download custom LWC layout and card state templates, and components from the Card Designer.