Extend Vlocity Lightning Web Components (Managed Package)

For the managed package runtime, customize the behavior and styling of an application by extending Vlocity Lightning web components. For example, override properties, add other components, or insert HTML.

example

In this code example, a custom Lightning web component extends the Button Lightning Web Component. Replace the NS variable in the code example with the namespace of the Vlocity package you are using.

//.js

import Button from "NS/button";

export default class buttonExtended extends Button {  
//override the property here so it gets triggered

    onclickbutton() {    
    this.label = "Button clicked";  

}}

//.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>    
    <isExposed>true</isExposed>    
    <masterLabel>button_extended</masterLabel>    
    <description>Button extended</description>    
    <targets>      
        <target>lightning__RecordPage</target>      
        <target>lightning__AppPage</target>      
        <target>lightning__HomePage</target>  
    </targets>
    <runtimeNamespace>NS</runtimeNamespace>
</LightningComponentBundle>

//.html

<template>
//add HTML here to override the template layout
</template>

//_slds.css

//add CSS to override or append the SLDS theme css
.slds-button {
    background: #cccccc;
    border-color: #dddddd;
}

Note

Custom Lightning web components built outside of the package cannot use any Salesforce Lightning web component that uses Salesforce resources or affects the component at run time. For more information, see Salesforce Modules.

Note

Custom Lightning web components will not throw errors unless Debug Mode is enabled. For more information, see Debug Lightning Web Components.

1. Ensure you have IDX Workbench, or Salesforce DX set up locally.
2. Choose which component you want to extend.
3. To create a new Lightning web component, navigate to your lwc folder in your project and run the lightning generate component Salesforce CLI command. For example:

   sf lightning generate component --type lwc --name componentname_extended

   To learn more about creating a Lightning web component, see Create Lightning Web Components. For a complete list of available Salesforce CLI commands, see Lightning Commands.

4. In your JavaScript file, import and extend the Lightning web component. See code example on this page.
5. To make the custom Lightning web component compatible with Vlocity Lightning web components, you must set two metadata tags in your XML configuration file:

   If Lightning Web Security (LWS) is disabled, add the namespace of your Vlocity package using the runtimeNamespace metadata tag.

   

   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.

   Set the isExposed metadata tag to true. See code example on this page.

6. (Optional) Beginning with Vlocity Insurance and Health Winter ’20 and Vlocity CME Winter ’20, enable a custom Lightning web component to make remote calls by using the Common Action utility.