Loading
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Extending a Template to Create a Custom LWC Card State Template (Managed Package)

            You are here:

            1. Salesforce Help
            2. Docs
            3. Omnistudio for Managed Packages

            Extending a Template to Create a Custom LWC Card State Template (Managed Package)

            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.

            Before extending a 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

            To see what methods can be overwritten for your extended component, view its ReadMe file.

            See Vlocity Cards LWC ReadMe Reference (Managed Package) and Base Omnistudio LWC ReadMe Reference.

            1. In the JS file, import the LWC template you want to extend from your Vlocity namespace. See Viewing the Namespace and Package Version of Omnistudio for Managed Packages (Managed Package).
              For example, to extend the CardActiveState LWC template:
              import cardActiveState from "vlocity_ins/cardActiveState";
            2. Import your custom HTML template.
              For example, if your HTML file name is customCardActiveState.html:
              import temp from "./customCardActiveState.html";
            3. To overwrite the HTML template of the extended LWC template, use the render() method to return your custom HTML template.
              For example:
              render() {
    return temp;{
            4. Confirm that your class declaration has the extends keyword.
              For example, if your class is customCardActiveState:
              export default class customCardActiveState extends cardActiveState {
            Example JS
            Example JS

            This example overwrites the render() method that returns the HTML template, and the trackInteraction() method that tracks interactions.

            import { LightningElement,track } from "lwc";
import cardActiveState from "vlocity_ins/cardActiveState";
import temp from "./customCardActiveState.html";
export default class customCardActiveState extends cardActiveState{
    // your properties and methods here
        
    render() {
      return temp;
    }

    trackInteraction(event) {
      let element = event.target;
      // custom code
    }
}

            Create the HTML Template

            In the HTML template file, if you choose to overwrite the HTML from the extended LWC template, enter the HTML to create the structure and display the content of your custom LWC card state template.
            Example HTML
            Example HTML

            This example shows a basic card that extends the CardActiveState LWC template. The template shows how to reference Vlocity base components, such as Icon LWC.

            <template>
	<div if:true={selectedState} class="slds-p-top_small">
		<div class="slds-card via-slds-card--active slds-m-bottom--small">
			<table class="slds-card__body slds-p-around-small slds-wrap slds-theme--default slds-p-around--medium">
				<tr key={field.name} class="slds-tile slds-p-bottom--medium" for:each={state.fields} for:item="field"
					for:index="index" onmouseleave={resetIcon}>
					<td key={field.name} class="slds-col slds-truncate slds-text-heading--label slds-p-right_large"
						title={field.label}>
						{field.label}
					</td>
					<td key={field.label} class="slds-col slds-tile__detail slds-text-heading--small">
						<vlocity_ins-output-field record={obj} field-name={field.name} type={field.type}>
						</vlocity_ins-output-field>
					</td>
					<td class="slds-col slds-tile__detail slds-text-heading--small">
						<vlocity_ins-icon data-fieldindex={index} onclick={trackInteraction} icon-name="utility:preview"
							class="trackIcon" size="small"></vlocity_ins-icon>
					</td>
				</tr>
			</table>
		</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 enables you custom LWC card state template to run within the Vlocity namespace, and access the extended LWC card state template 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 to your org, 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

            This example shows an LWC configured for visibility on a record page, app page, and home page.

            <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>customCardActiveState</masterLabel>
    <runtimeNamespace>vlocity_ins</runtimeNamespace>
</LightningComponentBundle>
             
            Loading
            Salesforce Help | Article