Create Lightning Web Component Quick Action Panel

Lightning web component framework now has introduced the standard component for creating modals, i. e. lightning-quick-action-panel. Now you don't need to create modals from SLDS Blueprint. In this post, I will share the sample code the create LWC Quick action with the Lightning Quick Action Panel component from the LWC framework.

Let's do it step by step.

Create component

quickActionPanelDemo.html

1 2 3 4 5 6 7 8 9 10

<template> <lightning-quick-action-panel header="My action"> Here's some content for the modal body. Put your logic here <div slot="footer"> <lightning-button variant="neutral" label="Cancel"></lightning-button> <lightning-button variant="brand" label="Save" class="slds-m-left_x-small"></lightning-button> </div> </lightning-quick-action-panel> </template>

quickActionPanelDemo.js

1 2 3 4

import { LightningElement } from 'lwc'; export default class QuickActionPanelDemo extends LightningElement { }

quickActionPanelDemo.js-meta.xml

1 2 3 4 5 6 7 8 9 10

<?xml version="1.0"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>51.0</apiVersion> <isExposed>true</isExposed> <masterLabel>Quick Action Panel Demo</masterLabel> <description>Quick Action Panel Demo</description> <targets> <target>lightning__RecordAction</target> </targets> </LightningComponentBundle>

Create quick action

1. Go to Salesforce Setup and then Object Manager.
2. Search for your desired object, I will use the Contact object for this demo.
3. Go to Buttons, Links, and Actions and click New Action.
4. Select action type as Lightning web component.
5. Select your Lightning Web Component name from the drop-down.
6. Give your action a Label, Name.
   
   
   
   
   
7. Click Save.
8. Then go to the page layout and add your action in the Mobile & Lightning Actions section.
   
   
   
   
   
9. Now go and see the output.

Output