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
            Extend an Omniscript Element's Lightning Web Component (Managed Package)

            You are here:

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

            Extend an Omniscript Element's Lightning Web Component (Managed Package)

            For the managed package runtime, 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.

            Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

            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.

            Note
            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 runtime. For more information, see Salesforce Modules.

            To extend an Omniscript element's Lightning web component:

            1. Set up Visual Studio Code on your computer and install the Salesforce Extension Pack. See Set Up Lightning Web Components (Managed Package).
            2. In Visual Studio Code, type Command-Shift-P (Mac) or Ctrl-shift-P (Windows) to open the command palette, and use the SFDX: Authorize an Org command to log into your org.
            3. In Visual Studio Code, use the SFDX: Create Project command to create a project, which includes an lwc folder.
            4. Create a subfolder of lwc named lwcName.
              For example, create a subfolder named customText.
            5. In the new subfolder, create a file named lwcName.js.
              For example, create a file named customText.js.
            6. Paste this code into the JavaScript (JS) file, substituting the indicated values. 
              import OmniscriptText from 'namespace/omniscriptText';
import tmpl from './customText.html';          
export default class customText extends OmniscriptText {
    render() {
        return tmpl;
    }
}

              • Use the namespace of your org for namespace. For Omnistudio for Managed Packages, the namespace is either vlocity_cmt or vlocity_ins.

              • Use the name of the Omniscript element's LWC for OmniscriptText and omniscriptText.

              • Use the name of your new component for customText.

            7. In the subfolder, create a file named lwcName.js-meta.xml.
              For example, create a file named customText.js-meta.xml.
            8. Paste this code into the XML file, substituting the namespace of your org for namespace. 
              <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="omniscript">
    <apiVersion>60.0</apiVersion>
    <isExposed>true</isExposed>
    <runtimeNamespace>namespace</runtimeNamespace>
    <masterLabel>Custom LWC test</masterLabel>
</LightningComponentBundle>
            9. Download the LWC ZIP file from the appropriate link in the table of Lightning web components.
            10. Unzip the downloaded file and locate its folder that contains the Lightning web component for the Omniscript element you want to extend.
              For example, locate the folder named omniscriptText.
            11. Copy the HTML file from the Omniscript element's folder to the subfolder in your Visual Studio Code project.
            12. Rename the file lwcName.html.
              For example, rename the file customText.html.
            13. To edit the HTML file:
              1. Open the file in your browser.
              2. Right-click the blank content area.
              3. Select View Page Source.
              4. Copy all content from the file.
              5. Paste the content into a text editor.
            14. In the HTML file, change every instance of c- to namespace-, substituting the namespace of your org for namespace.
            15. To extend and customize the Omniscript element's functionality, edit the HTML file.
            16. To change the element's styling, add an lwcName.css file.
              For example, add a CSS file named customText.css.
            17. To deploy the custom component to your Salesforce org, right-click the subfolder and select Deploy Source to Org.
              For more information about deploying Lightning web components, see Deploy Lightning Web Components (Managed Package).
            18. 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.
              For more information about adding custom Lightning web components to an Omniscript, see Add Custom Lightning Web Components to an Omniscript (Managed Package).
             
            Loading
            Salesforce Help | Article