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

See Set Up Lightning Web Components (Managed Package).
Create a component in your local development environment. See Create Lightning Web Components.

Update the JS File

In the JS file:

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_ins:
```
import { BaseState } from "vlocity_ins/baseState";
```
Import your custom HTML template.
For example, if your HTML file name is customActivetState.html:
```
import temp from "./customActiveState.html";
```
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

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

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

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

<?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>