Communication between independent lightning web components - pubsub

You can use pubsub library or lightning message service to communicate between components that are not in same DOM hierarchy. These methods can be used to communicate between sibling components in an outer lwc component or between to lwc components that are dropped separately in lightning app builder.

Here we will go through an example of lwcComponentA that displays three car company names using radio button. When a car company is selected in this component we will fire a carselected event from lwcComponentA with the name selected by the user. A separate lwcComponentB, that is outside direct DOM hierarchy of lwcComponentA, will listen to this event and display the selected name in lwcComponentB.

Example

1) Create a utility lwc component with name pubsub. Copy paste below code into it's JavaScript file. Please note that this is a utility component provided by Salesforce. But current version available in the link is doing pageRef check and it is not working as expected. So use below version shared by another Salesforce team member instead.

2) Create a lwc component with name lwcComponentA

3) Create a lwc component with name lwcComponentB

3) Create a parent lwc component with name parentLwc that can contain both components

3) Now if you surface the parent component in lightning experience, it will look like

Explanation

In lwcComponentA component, when value of car is changed in the radio button, it calls JavaScript method in controller sendDataTolwcComponentB. This function uses fireEvent method in pubsub library and fires a custom event with name carselected. Selected carname is also passed as data in the event payload.

lwcComponentB component, has a listener added for carselected event. It is achieved by using registerListener method in pubsub utility. Inside connected callback we add a listener using the line registerListener('carselected', this.diplaySelectedCar, this);. This basically tells "whenever a carselected event is received, call diplaySelectedCar method in JavaScript controller.

Finally when diplaySelectedCar method is called, we take value from the event payload and assigns to valueGotFromA variable in JavaScript

Things to Note

• This is a common pattern to pass values between independent lwc components in same page.
• Make sure that you are using the pubsub library shared above. Otherwise you might get an error pubsub listeners need a "@wire(CurrentPageReference) pageRef" property.

Communicating from child lightning web component to parent lightning web component

You need to fire CustomEvent from child component to communicate to a parent component.

Here we will go through an example of a child component that displays three car company names as a radio button. When a car company is selected in the child component we will fire a carchange event from child component with the name selected by the user. Parent component will listen to this event and display the selected name in parent component.

Example

1) Create an lwc component with name childLwc

2) Create an lwc component with name parentLwc

3) Now if you surface the parent component in lightning experience, it will look like

Explanation

In childLwc component, when value of car is changed in the radio button, it calls JavaScript method in controller sendDataToParent. This function then dispatches/fires a custom event with name carchange. For every custom event, if you are passing data, you need to pass it as a JSON object with detail attribute.

parentLwc component, has a listener added for carchange event. It is achieved by adding on+eventname attribute while refering child component in html. In our case it is oncarchange attribute added at line 5 of parentLwc component html. This basically tells "whenever a carchage event is received, call displayValueInParent method in JavaScript controller.

Finally when displayValueInParent method is called, we take value from the event.details and assigns to valueSentByChild variable in JavaScript

Things to Note

• This is a very common pattern to pass values from child component to parent component
• Make sure that you are using detail attribute while sending data
• Make sure that your event name is all small letters. ie carchange instead of carChange
• Make sure that your listener name is all small letters. ie oncarchange instead of oncarChange

Communicating from parent lightning web component to child lightning web component

It is easy to communicate/send data from a parent lightning web component to a child lwc component. You can define a variable in the child lwc component javascript file, annotated it with @api annotation and finally pass value from parent component to the child component by using this variable name.

Example

1) Create an lwc component with name childLWCComponent

2) Create an lwc component with name parentLWCComponent

If you surface the parent component in lightning experience, it will looks like

Explanation

Here childLWCComponent has a javascript variable childVariable annotated with @api annotation. Parent component can pass value using this attribute name. But please note that camel case variable names in child component is converted to kebab case in parent component.

Use Cases

This is the most common form of communication/exchange of data between lwc components. Usually complex lightning apps are built as a combination of multiple child lwc components. ie a parent lwc component contining multiple child lwc components. This parent component will retain data that is needed by all child components and sends it to child components using variables defined in child component using @api annotation.

How to display a modal popup using aura components

When you build custom interfaces it is very common need to show a modal window or a popup window. In this example we will go through how we can build a reusable modal window using lightning aura components. If you are looking for a lightning web component (lwc) version of modal/popup component please check out lwc modal.

Use cases

• Display modal window or popup window in user interface
• Show Yes/No confirmation modal popups

Steps to Implement

STEP 1 :- Create a component event with name Util_PressEvent. This event is used to track click event on buttons that can be used to add listeners on modal component. Find the event file and metadata below,

STEP 2 :- Create an aura component with name Util_ModalWindow. This component will contain all code needed to show and hide the modal popup,

STEP 3 :- You are all set to use the modal component. Let us use the modal component inside an aura component to show a modal popup. Here we are using a parent aura component with name DemoAuraComponent to show modal popup.

Explanation

Here we can add any content including other aura components between opening and closing tags of Util_ModalWindow. All the content between the tags will be rendered as the body of the modal window.

Example

• Before opening Modal
  
  
• After opening modal
  
  

How to send notifications to bell icon in Salesforce

Salesforce allows us to send custom notifications to bell icon in lightning experience using "custom notification" feature. These custom notifications can be sent using process builders or flows or REST API.

Unfortunately there is no native method in apex that you can just call to send notification yet. One work around is to make a a callout to Salesforce rest endpoint from Apex. In this blog we will go through examples of sending custom notifications through different channels.

Use cases

• Can be used to send notifications to desktop/lightning experience bell icon or to Salesforce mobile app as push notification
• Any scenario of when you need to get user's attention in Salesforce. For example, notify sales agent about an activity on an opportunity they are working on, notify administrator about failures in a critical API call etc

Using apex to send notification

Explanation

Salesforce still hasn't made the ability to send custom notifications from apex available in apex. So we need to call Salesforce REST API (Custom Notification Actions) from apex to to trigger the notifications.

In this example we are expecting a custom notification to be created from setup with name Error Notification. Once you have a the custom notification setup, you can just call the method using below syntax.

Steps to send notification through configuration

1. Create a custom notification from setup
   
   
   
2. Create a process builder entry to fire on updates of opportunity records
   
   
   
3. Example. Update any opportunity and see result in bell icon