A LWC Confirmation Dialog

Yet another windy and rainy day in The Netherlands, so I stayed at home today and used the free time to write this article about how to create a Lightning Web Component confirmation dialog.

Dancing chairs…

I had to create this component for one of the projects I am working on and I thought it would be worth it to share the idea. The basic scenario here is to have a modal to show a message to the users and ask if they want to proceed or cancel the operation. Here is the final result:

Basically we can use the Lightning Design System Modals to create the UI and add some logic on top of it to handle the ‘Cancel’ and ‘Confirmation’ buttons. You can create the component and add this markup to it:

HTML file:

Javascript controller:

The component was built to be as dynamic as possible, so we expose some variables to be passed by the parent component which is going to use the confirmation dialog. I commented on all of them so you can check the explanation directly in the code, but I want to give more attention to the originalMessage parameter and the handleClick method.

The originalMessage is used to pass a message (an ID, an object, a string or whatever message you want) from the parent to the child (our LWC modal) so, when the user clicks on either the confirmation or cancel button, this message will be dispatched back to the parent component. In this way, it’s possible to continue with your process handling the click event. The custom event passes two things up:

• status: cancel if the user clicks on the cancel button or confirm if the user clicks on the other button.
• originalMessage: the message passed from the parent to the child component.

To test it, I created a simple parent component:

HTML file:

Javascript controller:

Three important things to notice on the parent component:

1. The isDialogVisible is the variable that controls the dialog component visibility. I created a simple button that sets this variable to true and shows the c-confirmation-dialog child component.
2. The onclick={handleClick} tag is where we inform to the component which method should handle the click event dispatched by the dialog component.
3. The name tag is also important here. We use it to reference which specific instance of the c-confirmation-dialog is passing the data up when a user clicks in one of the two buttons. If you check the line 14 you will see that I am checking for the confirmModal event name, that is the same name I set on the c-confirmation-dialog markup.

In this example, I am just setting the text that is being shown in the component to show the message fired by the child component. I added a block of code that can be used in your own scenario (from lines 22 to 26).

Here is the final result:

And it also works on the Salesforce mobile app:

Here is the GitHub repo with all the codes used in this article. If you have any questions or contributions, please feel free to contact me.