Handling Custom Events and Creating Modals in LWC

Sample LWC Code

This LWC code listens for custom events and performs actions such as displaying a modal.

import { LightningElement, track, api } from 'lwc';
import pubsub from 'vlocity_cmt/pubsub';

export default class CpqCartSampleCustomEventHandler extends LightningElement {
  @api recordId;
  @track isShowModal = false;

  connectedCallback() {
    // Register event listeners
    pubsub.register('cpq_cart_custom_action', { lineItemAction1: this.handleEvent01.bind(this) });
    pubsub.register('cpq_cart_custom_action', { event02: this.handleEvent02.bind(this) });
  }

  disconnectedCallback() {
    // Unregister event listeners
    pubsub.unregister('cpq_cart_custom_action', { lineItemAction1: this.handleEvent01.bind(this) });
    pubsub.unregister('cpq_cart_custom_action', { event02: this.handleEvent02.bind(this) });
  }

  showModalBox(currentCartId) {
    if (currentCartId == this.recordId) {
      this.isShowModal = true;
    }
  }

  hideModalBox() {
    this.isShowModal = false;
  }

  // Event handler for lineItemAction1
  handleEvent01(event) {
    console.log('lineItemAction1 received:', event.cartId);
    console.log('Record received:', event.lineItem);
    this.showModalBox(event.cartId);
  }

  // Event handler for event02
  handleEvent02(event) {
    console.log('Event02 received:', event.cartId);
    console.log('Record received:', event.lineItem);
    this.showModalBox(event.cartId);
  }
}

This code listens for two custom events, lineItemAction1 and event02, using the pubsub library, triggers actions such as logging event details, and displays a modal popup by settingisShowModal to true.

Modal Template

This template defines the modal popup that appears when an event is triggered.

<template>
   <template if:true={isShowModal}>
      <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
         <div class="slds-modal__container">
            <!-- Modal header -->
            <header class="slds-modal__header">
               <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModalBox}>
                  <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
                  <span class="slds-assistive-text">Close</span>
               </button>
               <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Proceed with Custom Action</h2>
            </header>
            <!-- Modal body -->
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
               <p>Modal/Popup in Lightning Web Component (LWC) Demo</p>
            </div>
            <!-- Modal footer -->
            <footer class="slds-modal__footer">
               <button class="slds-button slds-button_neutral" onclick={hideModalBox}>Cancel</button>
            </footer>
         </div>
      </section>
      <div class="slds-backdrop slds-backdrop_open"></div>
   </template>
</template>

The modal is displayed when isShowModal is set to true. It includes a header, body, and footer, and uses Salesforce Lightning Design System (SLDS) styles for consistent appearance. The modal can be closed with a button that triggers the hideModalBox function.

Metadata for the LWC

This metadata file exposes the LWC in Salesforce and defines where it can be added.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <isExposed>true</isExposed>
    <runtimeNamespace>vlocity_cmt</runtimeNamespace>
    <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

This metadata file allows the LWC to be used within various Lightning pages (Record Page, App Page, and Home Page) in Salesforce.

You can add the new LWC to the CPQ Cart page by dragging it from the Components section in the left pane.