---
schema_version: "1"
id: e645174acf6e781d2e75d915a83de503b1cae9e758712de6929ffc8580b2a516
title: Creating a New Custom LWC Card State Template (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_new_custom_lwc_card_state_template.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_new_custom_lwc_card_state_template.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 5cf582811dc331ab94db2cac3b67b7b2d692a49c011c2435b75a3916429c6a2f
description: 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.
products:
  - Omnistudio
release: "264"
---
# Creating a New Custom LWC Card State Template (Managed Package)

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.

Before creating a custom template:

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

- See [Set Up Lightning Web Components (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_set_up_lightning_web_components.htm&release=264.0.0&type=5 "For the managed package runtime, to manage and develop Omnistudio Lightning web components, use Visual Studio Code with Salesforce DX or IDX Workbench. Both development approaches have source control. Salesforce DX integrates with Visual Studio Code. IDX Workbench lets you deploy components from one sandbox or dev org to another, such as a production org, and compare source and target files.").
- Create a component in your local development environment. See [Create Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-introduction.html).

## Update the JS File

In the JS file:

1. Import the BaseLayout mixin from your Vlocity namespace. See [Viewing the Namespace and Package Version of Omnistudio for Managed Packages (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_viewing_the_namespace_and_version_of_the_omnistudio_vlocity_package.htm&release=264.0.0&type=5 "For the managed package runtime, to check the namespace and version of your Omnistudio for Managed Packages installation.").
    
    For example, if your namespace is vlocity\_ins:
    
    `import { BaseState } from "vlocity_ins/baseState";`
2. Import your custom HTML template.
    
    For example, if your HTML file name is customActivetState.html:
    
    `import temp from "./customActiveState.html";`
3. Confirm that your class declaration has the `extends` keyword.
    
    For example, if your class is customActiveState:
    
    `export default class customActiveState extends BaseState(LightningElement) {`

![Example JS](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_example.png)

Example JS

This example overwrites the `render()` method that returns the HTML template.

`import { LightningElement } from "lwc"; import { BaseState } from "vlocity_ins/baseState"; import temp from "./customActiveState.html"; export default class customActiveState extends BaseState(LightningElement) {      render() {         return temp;     } }`

## Create the HTML Template

In the HTML template file, inside the `<template>` tag, enter the HTML to create the structure and display the content of your custom LWC layout template.

![Example HTML](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_example.png)

Example HTML

This example shows a basic card that loops through fields and actions. The template shows how to reference Vlocity base components like `output-field` and `action`.

`<template> <div if:true={selectedState} class="slds-p-top_small">     <div class="slds-card via-slds-card--active slds-m-bottom--small">     <div         class="slds-card__body slds-p-around-small slds-grid slds-wrap slds-theme--default slds-p-around--medium"       >         <div class="slds-col--padded slds-size--1-of-2">             <!-- You can repeat over the fields - available inside of state.fields -->           <div             key={field.name}             class="via-field slds-tile slds-p-bottom--medium"             for:each={state.fields}             for:item="field"             for:index="index"             onmouseleave={resetIcon}           >             <p               key={field.name}               class="slds-truncate slds-text-heading--label slds-p-right_large"               title={field.label}             >               {field.label}             </p>             <div               key={field.label}               class="slds-tile__detail slds-text-heading--small"             >             <!-- the output field will display the field values formatted -->               <vlocity_ins-output-field                 record={obj}                 field-name={field.name}                 type={field.type}               ></vlocity_ins-output-field>             </div>           </div>         </div>          <div class="slds-col--padded slds-size--1-of-2">             <!-- You can repeat over the compiled actions -->           <template for:each={actions} for:item="item">             <div               class="slds-tile slds-p-top--x-small slds-p-bottom--medium slds-truncate via-actions state-action-item "               key={item.id}             >             <!-- Supported action component -->               <vlocity_ins-action                 icon-extraclass="slds-m-right_small"                 state-obj={obj}                 context-id={contextId}                 s-object-type={sObjectType}                 state-action={item}                 action-wrapperclass="slds-size--1-of-1"                 action-labelclass="slds-size--7-of-8"                 icon-wrapperclass="slds-size--1-of-8"               ></vlocity_ins-action>             </div>           </template>         </div>      </div> <!-- end of card template SECTION -->     </div> </div> </template>`

## Update the Metadata XML File

In the metadata configuration XML, if [Lightning Web Security (LWS)](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_intro) is disabled, set the **runtimeNamespace** metadata tag to your org's namespace. This setting allows your custom LWC card state template to run within the Vlocity namespace and to access the BaseState mixin and other components. See [Viewing the Namespace and Package Version of Omnistudio for Managed Packages (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_viewing_the_namespace_and_version_of_the_omnistudio_vlocity_package.htm&release=264.0.0&type=5 "For the managed package runtime, to check the namespace and version of your Omnistudio for Managed Packages installation.").

![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 LWS is enabled, setting **runtimeNamespace** in your components causes errors similar to "Cannot use runtime namespace 'somename' in module c-someComponentName". To determine if LWS is enabled in your org, see [Enable Lightning Web Security in an Org](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_enable).

After deploying your LWC, you can set or update other metadata values, such as targets, masterLabel, apiVersion, and isExposed using Show XML Interface in the Card designer. See [Configuring the Metadata Values for an LWC Card (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_configuring_the_metadata_values_for_an_lwc_card.htm&release=264.0.0&type=5 "For the managed package runtime, configure the metadata values for an LWC card from a visual editor in the card layout instead of updating the configuration file manually."). The runtimeNamespace can’t be set or updated in the Card designer.

![Example XML](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_example.png)

Example XML

`<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">   <apiVersion>46.0</apiVersion>   <isExposed>true</isExposed>   <masterLabel>Custom Active State</masterLabel>   <runtimeNamespace>vlocity_ins</runtimeNamespace> </LightningComponentBundle>`