Extend an Omniscript Element’s Lightning Web Component

Add custom behavior and styling to an Omniscript element while maintaining its core functionality. Replace an Omniscript element's Lightning web component with a component that re-creates its properties and adds new ones.

A Lightning web component provides the HTML, JavaScript, XML, and CSS files for an Omniscript element. For example, a Text element has an extendable component named omniscriptText. For information about creating custom Lightning web components for Omniscripts that aren't element extensions, see Create a Custom Lightning Web Component for Omniscript.

Note

Custom Lightning web components built outside of the managed package can’t use any Salesforce Lightning web component that uses Salesforce resources or affects the component at run time. See Salesforce Modules. If you turn off the Managed Package Runtime setting in Setup, we recommend that you don't extend Lightning web components such as Block or TypeAhead. Extending these components can introduce incompatibilities between Omnistudio and Omnistudio for Managed Packages.

1. In the lwc folder of your project, create a subfolder named lwcName.
   For example, create a subfolder named customText.
2. In the new subfolder, create a file named lwcName.js.
   For example, create a file named customText.js.
3. Paste this code into the JavaScript file. Substitute the name of your new component and the namespace of the Omniscript element's LWC.
   This example customizes omniscriptText with a custom component called customText. For Omnistudio, the namespace is c.

   import OmniscriptText from 'c/omniscriptText';
   import tmpl from './customText.html';
   export default class customText extends OmniscriptText {
       render() {
           return tmpl;
       }
   }

4. In the subfolder, create a file named lwcName.js-meta.xml.
   For example, create a file named customText.js-meta.xml.
5. Paste this code into the XML file.

   
   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="omniscript">
       <apiVersion>60.0</apiVersion>
       <isExposed>false</isExposed>
       <masterLabel>Custom Text</masterLabel>
   </LightningComponentBundle>
   

6. In the unzipped file structure, locate the folder of the Lightning web component for the Omniscript element that you want to extend.
   For example, locate the folder named omniscriptText.
7. Edit the HTML file.
   1. Right-click the HTML file and select Open With Visual Studio Code.
   2. Copy the content of the HTML file.
   3. Create a file in the custom component subfolder named lwcName.html.
      For example, create a file named customText.html
   4. Paste the copied content of the HTML file for the Lightning web component into the new HTML file.
8. To deploy the custom component to your Salesforce org, right-click the subfolder and select Deploy Source to Org.

   For more information, see Deploy Lightning Web Components.

9. Add the custom component to an Omniscript in one of these ways:
   • Override an individual element by using LWC Component Override.
   • Map all Omniscript elements of the type you're extending to the custom component.

• Override an Omniscript Element with a Custom Lightning Web Component
  Override an Omniscript element with custom Lightning web components (LWCs) to add custom behavior and styling to the Omniscript element.
• Override all Elements of an Omniscript Element Type with a Custom Lightning Web Component
  To override all elements of a type in an Omniscript, map the element to the custom Lightning web component. You can't directly drag these components to the Omniscript canvas and map them to their custom Lightning web component. These components include Step Chart, Save for Later Acknowledge, and Modal.