• How To Display LWC Component In Quick Action

    Published By: salesforcepoint
    Published: Saturday, 25 July 2020
    A- A+

    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.
    Lightning web component Quick Action Example code
    --> Add this "LWC Action" button to page layout.

    Output:

  • No Comment to " How To Display LWC Component In Quick Action "