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.
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.
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
STEPS:
- create one action from set up and override that with aura component
- create an aura component and place LWC inside of it
- 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>