Hey Learners! Today, I bring another add-on to your knowledge of Quick Actions using LWC. An object-specific Quick Action performs a specific action in Salesforce, such as creating or updating a record. Quick Actions can help streamline your users’ experience.
Quick actions using Lightning Web Components (LWC) with screen type enhance user interactions in Salesforce by enabling specific tasks directly from record pages. In this example, we demonstrated how to update an account record's industry and phone fields using a screen action. This approach ensures a seamless and productive workflow, making data management in Salesforce more intuitive and effective. Developers can streamline workflows and improve efficiency by leveraging LWC for tailored user experiences.
There are two types of Quick Actions in LWC:
Screen Actions: Opens a modal popup window where users can see and interact with the information displayed.
Headless Actions: Executes JavaScript logic without displaying a user interface.
What are Screen Actions?
Screen actions provide a user interface where users can interact with the component within a modal popup. It is used when users need to see or input information directly on the screen.
What are Headless Actions?
Headless actions execute logic in the background without displaying any UI. They are useful for operations like sending emails, navigating to different pages, or any other backend tasks.
Screen type component
To see the use of screen action we have a scenario for updating an Account object phone and Industry type with the quick action button
First, we have to create a component. In my scenario component name is ‘Screen Action’. Update the XML with the name.
xml file
<?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>After that
Deploy the component
Open object manager go to account object click on Button, Links and Action.
Click on new action and update these record
Save it.
Now go to the Account layout
Go to the ‘Mobile & Lightning Action’ Section
Move your component Into Salesforce Mobile and Lightning Experience Actions
You can now see on the account detail page that we have the lightning action named ‘Screen Action’
Now you can perform your task in our scenario. We update the industry and phone fields of the account object.
Screen Action.html file
<template>
<lightning-card title={label.accountBasicInformation}>
<div class="slds-p-around_medium">
<lightning-combobox
name="industry"
label={label.industryLabel}
value={industry}
placeholder={label.industryPlaceholder}
options={industryOptions}
onchange={handleIndustryChange}>
</lightning-combobox>
<lightning-input label="Phone" value={phone} onchange={handlePhoneChange}></lightning-input>
<div class="slds-m-top_medium">
<div class="slds-button-group">
<lightning-button class="slds-m-right_small" variant="neutral" label={label.cancelButton} onclick={closeAction}></lightning-button>
<lightning-button variant="brand" label={label.updateAccountButton} onclick={handleUpdateAccount}></lightning-button>
</div>
</div>
</div>
</lightning-card>
</template>Screen Action.js file
import {LightningElement, api, track, wire} from 'lwc';
import {getRecord, updateRecord} from 'lightning/uiRecordApi';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import {CloseActionScreenEvent} from 'lightning/actions';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import PHONE_FIELD from '@salesforce/schema/Account.Phone';
import ACCOUNT_BASIC_INFORMATION from '@salesforce/label/c.Account_Basic_Information';
import CANCEL_BUTTON from '@salesforce/label/c.Cancel_Button';
import UPDATE_ACCOUNT_BUTTON from '@salesforce/label/c.Update_Account_Button';
import SUCCESS_TITLE from '@salesforce/label/c.Success_Title';
import SUCCESS_MESSAGE from '@salesforce/label/c.Success_Message';
import ERROR_TITLE from '@salesforce/label/c.Error_Title';
import INDUSTRY_LABEL from '@salesforce/label/c.Industry_Label';
import INDUSTRY_PLACEHOLDER from '@salesforce/label/c.Industry_Placeholder';
const fields = [INDUSTRY_FIELD, PHONE_FIELD];
let recordInput = {};
export default class ScreenAction extends LightningElement {
@api recordId;
@track industry;
@track phone;
industryOptions = [
{ label: 'Agriculture', value: 'Agriculture' },
{ label: 'Banking', value: 'Banking' },
{ label: 'Construction', value: 'Construction' },
{ label: 'Consulting', value: 'Consulting' },
{ label: 'Education', value: 'Education' }
];
label = {
industryLabel: INDUSTRY_LABEL,
industryPlaceholder: INDUSTRY_PLACEHOLDER,
accountBasicInformation: ACCOUNT_BASIC_INFORMATION,
cancelButton: CANCEL_BUTTON,
updateAccountButton: UPDATE_ACCOUNT_BUTTON
};
@wire(getRecord, { recordId: '$recordId', fields })
wiredAccount({ error, data }) {
if (data) {
this.account = data.fields;
this.industry = this.account.Industry.value;
this.phone = this.account.Phone.value;
} else if (error) {
this.account = undefined;
this.showToast(ERROR_TITLE,
Error.body.message,
'error');
}
}
handleUpdateAccount() {
recordInput = {
fields: {
Id: this.recordId,
[INDUSTRY_FIELD.fieldApiName]: this.industry,
[PHONE_FIELD.fieldApiName]: this.phone
}
};
updateRecord(recordInput)
.then(() => {
this.showToast(SUCCESS_TITLE, SUCCESS_MESSAGE, 'success');
this.closeAction();
})
.catch(error => {
this.showToast(ERROR_TITLE, error.body.message, 'error');
});
}
closeAction() {
this.dispatchEvent(new CloseActionScreenEvent());
}
handleIndustryChange(event) {
this.industry = event.detail.value;
}
handlePhoneChange(event) {
this.phone = event.target.value;
}
showToast(title, message, variant) {
this.dispatchEvent(
new ShowToastEvent({
title: title,
message: message,
variant: variant
})
);
}
}After deploying this component go to an account detail page and click on the button that we created Screen Action
Now you can update industry and phone fields.
Click on the update account. And check the industry field.
Conclusion
Quick actions using Lightning Web Components (LWC) with screen type enhance user interactions in Salesforce by enabling specific tasks directly from record pages. By creating focused and dynamic user interfaces, developers can streamline workflows and improve efficiency. In our example, we showed how to update the industry field of an account record, illustrating the simplicity and power of using LWC for tailored user experiences. This approach ensures a seamless and productive workflow, making data management in Salesforce more intuitive and effective.
If you'd like to see the code and resources used in this project, you can access the repository on GitHub. To access the AVENOIRBLOGS repository, click here. Feel free to explore the code and use it as a reference for your projects.
Thank You! You can leave a comment to help me understand how the blog helped you. If you need further assistance, please contact us. You can click "Reach Us" on the website and share the issue with me.
Reference
https://www.avenoir.ai/post/how-to-perform-bulk-action-from-list-view-using-flow
https://www.avenoir.ai/post/communicate-to-unrelated-lwc-components-using-navigation-mixing
https://help.salesforce.com/s/articleView?id=sfdo.OFM_Create_Quick_Actions.htm&type=5
https://help.salesforce.com/s/articleView?id=sfdo.OFM_Create_Quick_Actions.htm&type=5
Blog Credit:
S. Yadav
Salesforce Developer
Avenoir Technologies Pvt. Ltd.
Reach us: team@avenoir.ai
Commenti