How To Display LWC Component In Quick Action

Lighting Web Component (LWC)  In Quick action 

We can't show lwc component directly in lightning quick action, if we need to show Lightning web component in quick action then we need to create simple lightning aura component and in that we need to refer Lwc component (check example code below). Then we can show lwc component content in quick action button.

Showing LWC Component content in Lightning Quick Action 

Step 1: Create new lightning web component : lwcAction

lwcAction.html

 <template>  
   <div class="slds-box slds-theme_shade">  
     <P> I am from LWC Component</P>  
   </div>  
 </template>  

Step2: Create new lightning aura component LwcInAuraQuickAction

LwcInAuraQuickAction.cmp

 <aura:component implements="flexipage:availableForAllPageTypes,  
               flexipage:availableForRecordHome,  
               force:hasRecordId,force:lightningQuickAction" access="global" >  
   <c:lwcAction />  
 </aura:component>  

Add it to quick action button

Go to Object Manger--> Buttons, Links, and Actions --> New Action 

--> Select Lightning Component as Action Type

--> Select LwcInAuraQuickAction as Lightning Component

--> Give "LWC ACtion" as Label and save.

--> Add this "LWC Action" button to page layout.

Output:

Subjects:

Lightning Web Components LWC LWC Basics LWC code

Share This: