April 20, 2021

Using LWC for Quick Action in Salesforce

Sample LWC:
HTML:
<template>
    
</template>

JavaScript:
import { LightningElement, api } from 'lwc';
import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import DESCRIPTION_FIELD from '@salesforce/schema/Account.Description';
import ID_FIELD from '@salesforce/schema/Account.Id';

export default class QuickActionComponent extends LightningElement {

    @api recordId;

    @api invoke() {

        console.log( "Inside Invoke Method" );
        console.log( "Record Id is " + this.recordId );

        const fields = {};
        fields[ ID_FIELD.fieldApiName ] = this.recordId;
        fields[ DESCRIPTION_FIELD.fieldApiName] = 'Testing LWC Quick Action';

        const recordInput = {fields};

        updateRecord( recordInput )
        .then( () => {
            this.dispatchEvent(
                new ShowToastEvent( {
                    title: 'Success',
                    message: 'Account updated',
                    variant: 'success'
                } )
            );
        }).catch( error => {
            this.dispatchEvent(
                new ShowToastEvent( {
                    title: 'Error updating or reloading record',
                    message: error.body.message,
                    variant: 'error'
                } )
            );
        });

    }

}

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

 

9 comments:

  1. Unfortunately when you try to set Action it throws an error "Cannot change the type of the existing Lightning Web Component action."

    ReplyDelete
  2. getting error - These targets are invalid : lightning__RecordAction: Source

    ReplyDelete
  3. Please help Getting error - These targets are invalid : lightning__RecordAction: Source

    ReplyDelete
    Replies
    1. I have try in summer 21 sandbox but come error Cannot change the type of the existing Lightning Web Component action.

      Delete
    2. Add lightning__RecordAction to the target in LWC component and check.

      Delete
  4. For the ones having the issue "Cannot change the type of the existing Lightning Web Component action" you need to delete the component and create it again. It seems that when you deploy it with a certain action type like Action you can not change it later to ScreenAction.

    I was experimenting with this new feature and deployed my LWC with an action type = Action then decided I wanted the ScreenAction action type, so I changed it to Screeaction and then I got the error message. So, I deleted the LWC and recreated it with the action type = ScreenAction, deployed it and that solved my issue. Now, I can use my LWC inside an action with an action type = ScreenAction.

    More information about how to set up your LWC in a quick action can be found here https://help.salesforce.com/articleView?id=release-notes.rn_lwc_quick_actions.htm&type=5&release=232

    ReplyDelete