Salesforce Docs Portal

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 This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

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).
    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
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
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) 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).
Important
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.
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). The runtimeNamespace can’t be set or updated in the Card designer.
Example XML
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>