Extend Omnistudio Lightning Web Components

Customize the behavior and styling of an application by extending Omnistudio Lightning web components. For example, override properties, add other components, or insert HTML.

Note If you turn off Managed Package Runtime in Setup and use the standard runtime, we recommend that you don't extend Lightning web components such as Block or TypeAhead. Changing these components can cause incompatibilities between Omnistudio and Omnistudio for Managed Packages.

In this code example, a custom Lightning web component extends the Button Lightning Web Component. Replace the namespace variable in the code example with the namespace of the Omnistudio package you’re using. For Omnistudio in standard runtime, the namespace is omnistudio.

//.js

import Button from "namespace/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>namespace</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 can’t 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 don’t 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. For information on setting up IDX Workbench or Salesforce DX, see Set Up Lightning Web Components.
2. Choose which component you want to extend. For a list of Lightning web components, see Omnistudio Lightning Web Components.
3. To create a 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 Omnistudio 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 Omnistudio package using the runtimeNamespace metadata tag. See the code example on this page. For more information on finding the namespace of your package, see View the Namespace and Version of Managed Packages.
     

     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. Enable a custom Lightning web component to make remote calls by using the Common Action utility. See Make Remote Calls Within Omniscripts from Lightning Web Components.