Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrii-solokh/LWCAction
LWC as Lightning Action. Dynamically create LWC depending on Lighting Action API Name.
https://github.com/andrii-solokh/LWCAction
aura aura-component lightning-action lwc lwc-component salesforce salesforce-developers salesforce-lightning sfdc sfdc-deployment
Last synced: 5 days ago
JSON representation
LWC as Lightning Action. Dynamically create LWC depending on Lighting Action API Name.
- Host: GitHub
- URL: https://github.com/andrii-solokh/LWCAction
- Owner: andrii-solokh
- License: mit
- Created: 2020-06-26T13:19:59.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-23T21:30:35.000Z (almost 3 years ago)
- Last Synced: 2024-08-02T12:21:29.965Z (3 months ago)
- Topics: aura, aura-component, lightning-action, lwc, lwc-component, salesforce, salesforce-developers, salesforce-lightning, sfdc, sfdc-deployment
- Language: JavaScript
- Homepage:
- Size: 1.72 MB
- Stars: 14
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-lwc - LWC Action - solokh](https://github.com/andrii-solokh)) (On Platform Community Repos)
README
⚡ IMPORTANT ⚡
==========================
Due to Summer '21 release, LWC is now natively available as Quick Action.
# LWCAction
To use LWC as Lightning Action we need to wrap it with Aura Component. Instead of creating new unnecessary Aura Components, coding close Lightning Action event handlers and adding spinners, we can create generic Aura Component which will dynamically create LWC depending on Lighting Action API Name.
### Sample code
https://github.com/andrii-solokh/LWCAction-samplecode
### How to use
1. In LWC component's '.js-meta.xml' file update 'isExposed' field:
```
true
```
2. Lightning Action should invoke Aura Component 'LWCLightningAction'.
3. Lightning Action API Name should be the same as LWC API Name. I can advise naming LWC as 'SObjectName + ActionName + Action', example: 'quoteApplyDiscountAction'.
4. LWC should extend 'LwcAction':
```
import LwcAction from 'c/lwcAction'
export default class QuoteApplyDiscountAction extends LwcAction {}
```
5. Stop spinner when LWC is ready:
```
this.ready()
```
### Features
- Closing action from LWC:
```
this.closeAction()
```
From template '{closeAction}' accordingly:
```
```
- Show spinner:
```
this.showSpinner()
```
- Hide spinner:
```
this.hideSpinner()
```
- Refresh view:
```
this.refreshView()
```
- Fire any Aura Event, 'this.fireAuraEvent(eventName, params):
```
this.fireAuraEvent('e.force:createRecord', { entityApiName: "Contact" })
```
- Id and sObject name of Record from which Lighting Action was invoked is passed to LWC and can be accessed with:
```
this.recordId
this.sObjectName
```
### Actions not in LwcAction context
- To close action, show or hide spinner from component other than LwcAction:
1. Import 'LwcAction':
```
import LwcAction from'c/lwcAction'
```
2. Invoke required method:
```
LwcAction.fireCloseAction(this) // close Lighting Action
LwcAction.fireShowSpinner(this) // show spinner
LwcAction.fireHideSpinner(this) // hide spinner
LwcAction.fireRefreshView(this) // refresh view
LwcAction.fireAuraEvent(this, 'e.force:createRecord', { entityApiName: "Contact" }) // call any Aura event with params
```
### Additional Features
- You can keep component hidden until it's ready to be presented by wrapping it with:
```
```
Example:
```
Your component
```
Present LWC and hide spinner call:
```
this.ready()
```