21

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.

33

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.

| improve this answer | |
5

You should be able to pass record id from lightning component to lightning web component and build your functionality there. Check this blog for detailed information https://theashcode.com/salesforce-lightning-web-components-with-quick-actions/

| improve this answer | |
0

You can use this solution, based on dynamically creating LWC depending on Lightning Action API Name. Check it out: https://github.com/SAItm/LWCAction

| improve this answer | |
0

Just in case it helps, this article explains it perfectly. I've just tested it.

https://medium.com/@awsomvinod/lighting-quick-action-in-lwc-e55812c8e6d4

| improve this answer | |
-2

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>

enter image description here

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.