Create a Custom Lightning Web Component for Omniscript

Add custom HTML, JavaScript, and CSS to an Omniscript by creating a custom Lightning web component. The Custom LWC element enables custom components to either interact with the Omniscript or to act as a standalone component. Standalone components do not interact with the Omniscript or the Omniscript's data JSON.

For information on using the Lightning Web Component framework, see Set Up Lightning Web Components.

Note

Before previewing an Omniscript that uses custom Lightning web components, you must activate the Omniscript. If the Omniscript isn’t active, custom Lightning web components don't render in the preview. If you deploy changes to a custom Lightning web component that’s present in an active Omniscript, the Omniscript displays the changes.

To create a custom Lightning web component, review these component types:

• OmniscriptBaseMixin component: Enable a custom component to interact with an Omniscript by extending the OmniscriptBaseMixin component. See Extend the OmniscriptBaseMixin Component.
• Standalone component: A custom standalone component. The component can’t extend the OmniscriptBaseMixin component or an Omniscript element Lightning web component. See Create a Standalone Custom Lightning Web Component.

After you create a custom Lightning web component, add it to an Omniscript by using the Custom LWC input element. See Custom LWC Element.

• Requirements for Custom Lightning Web Components for Omniscripts
  Review the requirements for making a custom Lightning web component compatible with Omnistudio Lightning web components.
• Extend the OmniscriptBaseMixin Component
  Enable a custom Lightning web component to interact with an Omniscript by extending the OmniscriptBaseMixin component. The OmniscriptBaseMixin includes methods to update an Omniscript's data JSON, pass parameters, and more.
• Create a Standalone Custom Lightning Web Component
  Enable custom Lightning web components to act independently from an Omniscript by adding it to the Omniscript as a standalone component. Standalone custom Lightning web components cannot extend any Omniscript element component or the OmniscriptBaseMixin component. The standalone component supports custom functionalities, but cannot interact with an Omniscript or the Omniscript's data JSON.
• Communicate from Omniscript to a Lightning Web Component
  Send data from Omniscript actions and steps to other Lightning web components using the Publish and Subscribe property.
• Make Remote Calls Within Omniscripts from Lightning Web Components
  In the standard runtime, make remote calls from a customized Omniscript component or a custom Lightning web component.
• Add Validation to a Custom Lightning Web Component in Omniscript
  Add validation to custom Lightning web components that extend an Omniscript element's component by using Vlocity's built-in validation methods.