Journey towards Salesforce Development

Lightning Web Components are great for breaking down layouts and interfaces into small, reusable pieces. Step 1: Create Lightning Web Component BaseComponent is via a BaseComponent folder in the standard LWC folder of a SFDX project. Export and Import Inside baseComponent.js, we can define reusable functions and export them for use in other components. In the example below, I define a function called convertToArray and export it BaseComponent import { LightningElement } from 'lwc' ; import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin' ; export default class BaseComponent extends OmniscriptBaseMixin ( LightningElement ) { } export function convertToArray ( obj ) { if ( obj instanceof Array ) { return obj ; } else { return [ obj ]; } } Child Component import { LightningElement , api , track } from 'lwc' ; import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin' ;

This is a simple example that shows a button that, when clicked, publishes a message. This shows how two separate custom LWCs can communicate with each other inside of an OmniScript. Below is the overall design using the Pub/Sub model. So, lets get started! Step 1: Create a LWC component and use below code to fire events with parameters to pass an omniscript and component to Community Page. Below is the HTML and JS code for reference. SampleLWCComponent.html < template > < lightning-button label = "Send Event" onclick = {handleClick} ></ lightning-button > </ template > SampleLWCComponent.js import { LightningElement } from 'lwc' ; import pubsub from 'vlocity_ins/pubsub' ; export default class SampleLWCComponent extends LightningElement { handleClick ( e ){ let accId = '0015g00000gWY8VAAW' ; pubsub . fire ( "handlePubSubEventChange" , "result" , { "accId" : ac