29

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.

4 Answers 4

46

[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.

1
9

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

2

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=

1

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>
</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 retrieve 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) {
      this.userprofilename = getFieldValue(data, USERPROFILENAME_FIELD)

      if (
        this.userprofilename === 'JNJ Sampling Administrator' ||
        this.userprofilename === 'System Administrator'
      ) {
        this.profilenamebool = true
      } else {
        this.profilenamebool = false
      }
    } else if (error) {
      this.error = error
      console.error('Error ', this.error)
    }
  }

  @wire(getRecord, {
    recordId: '$recordId',
    fields: [ORDERSTATUS_FIELD, APPROVED_FIELD],
  })
  wiredRecord({ error, data }) {
    if (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
      }
    } else if (error) {
      this.error = error
      console.error('Error ', this.error)
    }
  }

  approvehandler() {
    if (
      this.userprofilename === 'JNJ Sampling Administrator' ||
      this.userprofilename === 'System Administrator'
    ) {
      if (this.orderstatus === 'Pending Approval') {
        this.orderstatusbool = true

        const fields = {
          [SAMREQID.fieldApiName]: this.recordId,
          [ORDERSTATUS_FIELD.fieldApiName]: 'submitted',
          [APPROVED_FIELD.fieldApiName]: true,
        }

        updateRecord({ fields })
          .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(() => {
            this.closeQuickAction()
          })
      }
    }
  }

  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>
</LightningComponentBundle>

enter image description here

enter image description here

2
  • not too sure why this was downvoted, yes you can use LWC directly, but you have to use an Aura wrapper if you want to use QuickActions on Knowledge Articles (who knows why), and potentially other standard object?
    – lu_ke____
    Commented Jul 11, 2022 at 2:13
  • Great answer, thanks Commented Jul 13, 2022 at 8:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .