In today’s world, Lightning Web Components (LWCs) are all the rage. There are constantly new capabilities, functionalities, and applications coming out for LWCs. One that was recently added this past year is the ability to call an LWC from a Quick Action on a Lightning Record Page, something you could previously only do if you nested your LWC in a Lightning (Aura) Component. In this post, we’re going to teach you how to do exactly that. We are going to create a simple LWC that demonstrates passing the Record Id from a Record Page to a modal LWC that is housed in one of the Quick Action buttons at the top of the page, as demonstrated below.
There are four ingredients in this recipe: a Lightning Record Page, a Page Layout, a Quick Action Button, and a Lightning Web Component. For this example, we're going to use the Contact object but we can do this with most any standard or custom object.
We’re going to start with a sample Lightning Web Component. We're not here to learn about writing LWCs. You're already a big fan and have made tons of your own, so we’re just going to dive right in!
Building Out Our LWC
The most important part to note is the Component Configuration File of your LWC. You must make sure to add “lightning__RecordAction” to your targets and under targetConfig set actionType to “ScreenAction”. This allows our LWC to be recognized as an option to choose from for Quick Actions.
This is a basic version of what the JavaScript side of your component will look like. The invoke method must be used here as your standard lifecycle hooks (such as connectedCallback) would be called when your Record Page loads, and not when your Quick Action Button is clicked. We must also use our @api decorator on the recordId (which can be called this way because we are on a Record Page) and on the invoke method.
Something that is important to note here is that these quick action buttons do not have a native way of protecting against double clicks. So, in order to protect against them, we are going to spruce up our invoke method a little bit.
We add an async tag to our method so that the invoke method runs asynchronously, then add a sleep method (using setTimeout) to protect against the double clicking. The last part to note about your JavaScript is the “CloseActionScreenEvent” that must be imported and then called from a button in your modal. This functionality exists natively with the modal that pops up, but we are going to also put in our own “Cancel” button to see this method in action.
In the modal, we are also going to place two buttons in the footer, the save is a placeholder for now, and the cancel calls our closeAction event which closes the modal.
Now, we move onto the declarative side of things where we set up our newly created LWC to be used on our Record Page.
Creating Our Quick Action Button
Navigate to Contact in the Object Manager and click on “Buttons, Links, and Actions on the left-hand side. From here, click the “New Action” button in the top right.
Now you should see this page:
Select Lightning Web Component from the Action Type drop-down box.
Select the name of your component from the drop-down box.
Give your Quick Action Button a label. This is what will show up when you see the button on your Record Page.
The API Name of your button. Should populate automatically from the label, but feel free to change it to comply with any naming conventions you might have.
Change Icon can be used if you have any static resources that will help you adhere to your company/app’s branding style for buttons.
Now click Save. We will now go into the Page Layouts section and add this button to our page. Once in the Page Layouts section, click on “Mobile & Lightning Actions” in the top panel.
From here, you will see your button in the list of Actions. Click on the wrench that appears when you hover over the “Salesforce Mobile and Lightning Experience Actions” section to override your standard actions.
Now you should be able to drag your button down into that section.
Navigate to a Contact record and you should see your button there. Click it and you will see the modal open displaying the Id of your record.
In conclusion, there is a lot more you can do with these LWC Quick Action Buttons, but this is just a simple example for you to follow. Feel free to use this as a guide to getting yourself setup to tackle more complex issues like linking records to your record and seeing related records in your modal. Happy coding!
If your company or nonprofit is interested in taking your Salesforce org into the Lightning era, contact us:
