---
schema_version: "1"
id: 224a7cf61f0f05ede782c8ffd764fbddbc8683670a3556dfef8df9b0823ccf9c
title: Create a New Custom LWC Layout 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_layout_template.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_new_custom_lwc_layout_template.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 012e8e09bc18be1b3ef411853c3cb7429a57933498cb92f1fb72a23b70aaf126
description: For the managed package runtime, create a custom template for an LWC layout by extending the BaseLayout Mixin.
products:
  - Omnistudio
release: "264"
---
# Create a New Custom LWC Layout Template (Managed Package)

For the managed package runtime, create a custom template for an LWC layout by extending the BaseLayout Mixin.

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\_cmt:
    
    `import { BaseLayout } from "vlocity_cmt/baseLayout";`
2. Import your custom HTML template.
    
    For example, if your HTML file name is threeColCardCanvas.html:
    
    `import temp from "./threeColCardCanvas.html";`
3. Confirm that your class declaration has the `extends` keyword.
    
    For example, if your class is threeColCardCanvas:
    
    `export default class threeColCardCanvas extends BaseLayout(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 { BaseLayout } from "vlocity_cmt/baseLayout"; import temp from "./threeColCardCanvas.html"; export default class threeColCardCanvas extends BaseLayout(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 layout that uses the `lightning-card` component as a container to group information.

`<template> <div class="via-slds">     <!-- spinner section shows while the data loads-->     <div class="slds-is-relative">         <vlocity_cmt-spinner             if:false={isLoaded}             variant="brand"             size="medium"             alternative-text="loading"         ></vlocity_cmt-spinner>     </div>     <!-- wrapping the cards in a lightning-card to add a stylized container -->     <lightning-card  title="My Title here">             <lightning-button label="Custom Button" slot="actions">             </lightning-button>             <p class="slds-p-horizontal_small">                 <!-- card slot -->                 <slot></slot>             </p>     </lightning-card> </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 enables your custom LWC layout template to run within the Vlocity namespace, and access the BaseLayout 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>Three Column Layout</masterLabel>   <runtimeNamespace>vlocity_cmt</runtimeNamespace> </LightningComponentBundle>`