Lightning Web Component quick actions

 Two different types of LWC Quick actions

1.Screen Actions

2.Headless Actions

Screen Actions :

Traditionally, when you click on an action in Salesforce, it will open up a modal window that you can use to display data or interact with data. 

This is exactly what you get when you are creating a Screen Action. 

You are able to take any Lightning Web Component that you have created and expose it as a quick action.

ex :

//my-action.html

<template>

</template>

//my-action.js

import { LightningElement, api } from 'lwc';

 

export default class MyAction extends LightningElement {

  @api invoke() {

    console.log('Hello, world!');

  }

}

//my-action.js-meta.xml

<targets>

  <target>lightning__RecordAction</target>

</targets>

<targetConfigs>

  <targetConfig targets="lightning__RecordAction">

    <actionType>ScreenAction</actionType>

  </targetConfig>

</targetConfigs>

Headless Actions :

Headless actions are a welcome addition to LWC capabilities. They allow you to run JavaScript directly from the click of a button through a 

Headless Lightning Web Component. This may sound familiar if you recall writing JavaScript buttons in the past. 

One of the key differences between a screen action and a headless action is that you don’t need the HTML file in your LWC.

ex :

//headless-action.js

import { LightningElement, api } from 'lwc';

 

export default class MyAction extends LightningElement {

  @api invoke() {

    console.log('Hello, world!');

  }

}

//headless-action.js-meta.xml

<targets>

  <target>lightning__RecordAction</target>

</targets>

<targetConfigs>

  <targetConfig targets="lightning__RecordAction">

    <actionType>Action</actionType>

  </targetConfig>

</targetConfigs>

Note : 

LWC Quick actions are currently only available for use on Lighting Record Pages.

Lightning Quick Action Panel :

By default, an LWC Screen Action does not have the header and footer that you normally see in a modal window. 

This gives you the opportunity to create heavily customized user interfaces. However, if you would like to create a consistent experience, 

there is a new base component for doing just that, The Lightning Quick Action Panel.

ex :

 <template>

  <lightning-quick-action-panel title="Quick Action Title">

    Body Content

    <div slot="footer">

      <lightning-button variant="neutral" label="Cancel"></lightning-button>

      <lightning-button variant="brand" label="Save"></lightning-button>

    </div>

  </lightning-quick-action-panel>

</template>

This component allows you to:

1.Set the title attribute of the component to render the title in the modal header.

2.Place the content of your action in the body.

3.Use a slot to place content in the modal footer.

Close Action Screen Event :

When you are using screen actions, you can close the modal by importing the new CloseActionScreenEvent from 'lightning/actions'.

When fired this will shut the model window if the user needs to cancel or close the quick action.

ex :

  import { CloseActionScreenEvent } from 'lightning/actions';

 

closeAction(){

  this.dispatchEvent(new CloseActionScreenEvent());

}

Headless Actions :

A headless action can be invoked by creating an invoke() method that is exposed publicly with an @api decorator. 

This is called each time the Quick Action’s button is clicked. The component is inserted into the DOM right when the record page 

is rendered so you cannot rely on any of the standard lifecycle hooks for executing the action. For example, the connectedCallback() 

is run right when the record page loads.

It is important to note that headless actions do not have the ability to prevent the user to double-click the action. 

The following code sample will show you how you can make the invoke() method asynchronous to prevent it from being called twice.

  

ex :

import { LightningElement, api } from "lwc";

 

export default class HeadlessAsync extends LightningElement {

    isExecuting = false;    

    @api async invoke() {

        if (this.isExecuting) {

            return;

        }  

        this.isExecuting = true;

        await this.sleep(2000);

        this.isExecuting = false;

    }  sleep(ms) {

        return new Promise((resolve) => setTimeout(resolve, ms));

    }

}