2

We have a requirement in which we embed a custom LWC into a Vlocity FlexCard. We can communicate from Parent FlexCard to embedded child custom LWC. But couldn't figure out how to communicate back from embedded child custom LWC to the parent FlexCard. Is there any reference for this , something similar to sending a custom event from a child LWC to parent LWC

1 Answer 1

3

The Pubsub Component enables data sharing between components. You need to import pubsub component in your LWC from the Vlocity namespace. The namespace will vary based on your package.

import { LightningElement} from 'lwc';
import pubsub from 'vlocity_ins/pubsub';//importing pubsub component

export default class ChildLWC extends LightningElement{
    //Variable to store our message
    text;

    connectedCallback() {
        //Initializing message in connected callback
        this.text = '';
    }

    //On click handler for Send to Parent button
    handleClick(){
        //Publishing showtext event to ParentFlexCard channel
        pubsub.fire("ParentFlexCard", "showtext", {text: this.text});
    }

    //On change handler for text input
    handleChange(event){
        this.text = event.target.value;
    }
}

Following is the syntax for the fire method :

pubsub.fire(“Channel_Name”, “Event_Name”, payload);

In order to subscribe to the events published by components, your Flexcard will need an event listener. In Design View, click on Setup tab and scroll to EVENT LISTENER option. Click on Add New.

enter image description here

Select Event Type as Pubsub and Event Name as showtext. Channel Name is the name of your Flexcard(ParentFlexCard) by default.

enter image description here

Now you need to define the action to be taken once “showtext” event is received. Select Action Type as Card, Type as Set Values. Click on Add New to add a new Key Value pair. For example, if you want to update “Message” key in your Data JSON, set Key as Message and Value as {action.text}. Here “text” is a key in the message object sent from child LWC. Click Save.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .