LWC as QuickAction in Salesforce

Question

I have made a quick action in lightning web component and want ot make that compponent available for quick action. I havenot found any guide or documentation regarding this. Can you please suggest on how to make the lwc available for quick action.

Answer 1

[EDIT] Starting the Summer '21 release, you be able to use lightning web components directly as a Quick Action as described here.
You'll just need to set the myComponent.js-meta.xml metadata file accordingly:

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>52.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__RecordAction</target>
   </targets>
    <targetConfigs>
   <targetConfig targets="lightning__RecordAction">
     <actionType>Action</actionType>
   </targetConfig>
 </targetConfigs>
</LightningComponentBundle>

The original answer is still valid for some use cases where Lightning web components are not supported yet, like Global Actions. [/EDIT]

Original answer:
This is not supported yet. You can have a look to what's supported and what's not here. What you can do is wrap your Lightning web component in an Aura component:

<aura:component implements="force:lightningQuickAction">
    <c:myLwc></c:myLwc>
<aura:component>

If you need to send events like force:closeQuickAction, you'll have to first send an event to the enclosing Aura component, so that it could fire this action. More on this here.

Answer 2

LWC can be directly used as a quick action. This is a pilot feature, available in the Spring ‘21 release.

https://help.salesforce.com/articleView?id=release-notes.rn_lwc_action.htm&type=5&release=230

Answer 3

Now it's possible with Summer 21 release. Here is the link to release note.

https://releasenotes.docs.salesforce.com/en-us/summer21/release-notes/rn_lwc_quick_actions.htm?edition=&impact=

Answer 4

STEPS:

1. create one action from set up and override that with aura component
2. create an aura component and place LWC inside of it
3. in LWC i am using data service concept to load a record and update that record.

here in below example i am updating two fields when they click on approve button. note: this particular example not getting any data from UI we just changing the existing field values to another values inside java script file by data service concpet

Aura UI:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" >
  <c:jJ_SFASampleRequestApproveLWC recordId="{!v.recordId}"  onclose="{!c.closeQA}"></c:jJ_SFASampleRequestApproveLWC>
</aura:component>

JS:

({
  closeQA : function(component, event, helper) {
    $A.get("e.force:closeQuickAction").fire();
  },

})

LWC UI:

<template>
  <template if:true={profilenamebool}>
    <template if:true={orderstatusbool}>
        <div class="slds-align_absolute-center">
            Are you sure you want to approve this Sample Request?
            
        </div><br/>
        <div class="slds-align_absolute-center">
            <lightning-button-group>
                <lightning-button  label="Approve" onclick={approvehandler}></lightning-button>
                <lightning-button  label="Cancel" onclick={closeQuickAction}></lightning-button>
            </lightning-button-group>
        </div>
    </template>
      <template if:false={orderstatusbool}>
        <div class="slds-align_absolute-center">
            Order is not in Pending Approval Status!
        </div>
     </template>
</template>
<template if:false={profilenamebool}>
    <div class="slds-align_absolute-center">
        You can not perform this operation
    </div>
</template>

LWC JS UI:

import { LightningElement,api, wire} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getRecord, getFieldValue,getFieldDisplayValue, updateRecord } from 'lightning/uiRecordApi';
import SAMREQID from '@salesforce/schema/Inventory_Order_vod__c.Id';
import ORDERSTATUS_FIELD from '@salesforce/schema/Inventory_Order_vod__c.Order_Status_vod__c';
import APPROVED_FIELD from '@salesforce/schema/Inventory_Order_vod__c.Approved_vod__c';
import USER_ID from '@salesforce/user/Id'; //this is how you will retreive the USER ID of current in user.
import USERPROFILENAME_FIELD from '@salesforce/schema/user.Profile.Name';

export default class JJ_SFASampleRequestApproveLWC extends LightningElement {
  @api recordId;
  userid = USER_ID;
  orderstatus;
  approved;
  userprofilename;
  profilenamebool;
  orderstatusbool;


@wire(getRecord, {recordId: '$userid',fields: [USERPROFILENAME_FIELD]}) 
userdetails({ error, data }) {
    if (data) {
        console.log('hi i am inside user data',data);
        this.userprofilename = getFieldValue(data, USERPROFILENAME_FIELD);
        if((this.userprofilename==='JNJ Sampling Administrator')|| (this.userprofilename==='System Administrator')){
           this.profilenamebool=true;
        }else
        this.profilenamebool=false;
        console.log('hi profile name is',this.userprofilename);
    } else if (error) {
        console.log('hi i am inside user error',error);
        this.error = error;
        console.log('error is',this.error);
    }
}


@wire(getRecord, { recordId: '$recordId', fields: [ORDERSTATUS_FIELD, APPROVED_FIELD] })
wiredRecord({ error, data }) {
    if (data) {
        console.log('hi i am inside object data',data);
        this.orderstatus = getFieldDisplayValue(data, ORDERSTATUS_FIELD);
        this.approved = getFieldValue(data, APPROVED_FIELD);
        if(this.orderstatus==='Pending Approval'){
            this.orderstatusbool=true;
        }else
           this.orderstatusbool=false;
        console.log('hi orderstatus value is',this.orderstatus);
        console.log('hi approved value is',this.approved);
    } else if (error) {
        console.log('hi i am error data');
        // Handle error. Details in error.message.
        this.error = error;
        console.log('error is',this.error);
    }
}

approvehandler() {
    console.log('i am inside approvehandler');
    if((this.userprofilename==='JNJ Sampling Administrator')|| (this.userprofilename==='System Administrator')){
        console.log('i am inside first if ');
        
        if(this.orderstatus==='Pending Approval'){
            console.log('i am inside second if ');
            this.orderstatusbool=true;
            const fields = {};
            fields[SAMREQID.fieldApiName] = this.recordId;
            fields[ORDERSTATUS_FIELD.fieldApiName] = 'submitted';
            fields[APPROVED_FIELD.fieldApiName] = true;
            
            const recordInput = { fields };
            console.log('after set up field values record details are',recordInput)
            updateRecord(recordInput )
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Approved the Pending for Approval Inventory Order records successfully!',
                        variant: 'success'
                    }),
                );
                 
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error updating record',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            })
            .finally(() =>{ 
            const closeQA = new CustomEvent('close');
            this.dispatchEvent(closeQA);
             });
            
        }
    }
}

  closeQuickAction() {
    const closeQA = new CustomEvent('close');
    this.dispatchEvent(closeQA);
  }
}

LWC - META DATA

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>49.0</apiVersion>
  <isExposed>true</isExposed>
 <targets>
   <target>lightning__AppPage</target>
   <target>lightning__RecordPage</target>
   <target>lightning__HomePage</target>
   <target>lightning__UtilityBar</target>
 </targets>