EP-26 | Quick Actions with Lightning Web Components | LWC Stack Salesforce ☁️⚡️

Kapil July 03, 2021

 In this blog I will share the code to create Lightning Web Components as quick action in Salesforce.

So we are having two type of quick actions now.

1. Standard one

2. Headerless Quick Action


Please check complete code below :  


Standar Quick Action HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
  <lightning-quick-action-panel header="Quick Action Title">
    Body Contents
    <div slot="footer">
      <lightning-button
        variant="neutral"
        label="Cancel"
        onclick={closeAction}
      ></lightning-button>
      <lightning-button variant="brand" label="Save"></lightning-button>
    </div>
  </lightning-quick-action-panel>
</template>


JS
1
2
3
4
5
6
7
8
import { LightningElement } from "lwc";
import { CloseActionScreenEvent } from "lightning/actions";

export default class QuickActionLWC extends LightningElement {
  closeAction() {
    this.dispatchEvent(new CloseActionScreenEvent());
  }
}


XML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?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>ScreenAction</actionType>
  </targetConfig>
</targetConfigs>
</LightningComponentBundle>


Output



Headerless Quick Action JS
1
2
3
4
5
6
7
import { LightningElement, api } from "lwc";

export default class HeaderlessActionLWC extends LightningElement {
  @api invoke() {
    console.log("Hello, world!");
  }
}


XML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?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>


Output


Resource
Checkout complete video tutorial below 

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)

Tags:

Post a Comment

0 Comments