A headless Quick Action in Salesforce is a custom action executed within a Lightning Web Component (LWC). It doesn’t open the default modal window for user interaction and allows you to use custom logic and dynamic content.

In this blog, we will walk you through the key steps of creating a headless Quick Actions in LWC.

What Are Headless Quick Actions in Lightning Web Components?

A headless quick action executes custom code in a Lightning web component. Unlike a screen action, a headless action doesn’t open a modal window.

Prerequisite to Create a Headless Quick Action in LWC

Before creating a headless Quick Action in LWS, make sure you have all the necessary things mentioned below:

  1. Salesforce Developer Tools: Set up Salesforce DX and Visual Studio Code for development.
  2. Basic LWC Knowledge: Familiarity with creating and deploying Lightning Web Components.
  3. Access to Salesforce Org: You need access to a Salesforce org to create Quick Actions and deploy LWC components.
  4. Object for the Quick Action: Determine the object (e.g., Account, Opportunity) where you will place the Quick Action.

Steps to Create a Headerless Quick Action.

Step 1: Create the LWC Component

1. Create LWC component:

sfdx force:lightning:component: create –type lwc –component name HeaderlessQuickAction –output-dir force-app/main/default/loc

2. Define the HTML structure (headerlessQuickAction.html):

3. Handle the logic in the JavaScript controller (headerlessQuickAction.js):

Step 2: Create a Custom Quick Action

1. Navigate to Object Manager and select the object (e.g., Account, Opportunity) for which you want to create the Quick Action.

2. Go to Buttons, Links, and Actions, and click New Action.

3. Select the following settings:

  • Action Type: Lightning Component
  • Lightning Component: Choose your LWC (e.g., c:HeaderlessQuickAction)

4 Save the action and then add it to the page layout if needed.

Step 3: Override the Standard Header by defining the below XML

In the LWC Quick Action, to hide the standard Salesforce modal header, you’ll need to configure the metadata file by defining <targets> in headerlessQuickAction.js-meta.xml.

Step 4: Deploy the LWC component

sfdx force:source: deploy -p force-app/main/default/lwc/headerlessQuickAction

Conclusion

A headerless Quick Action in LWC simplifies the UI by removing the default modal header, providing a clean and customized user experience in Salesforce.

Share This Blog
Related Articles
Mastering Pattern and Matcher Classes in Salesforce Apex for Advanced Text Processing

Salesforce Apex includes numerous built-in text handling classes, and in addition to them, the Pattern and Matcher classes are good for performing complex string operations. These classes enable us to define and work with regular expressions, which are of particular importance for data validation, searching, and modification. In this technical blog, we will find out […]

Read More
Effortlessly Manage User Access: Setting Expiration Dates for Permission Sets in Salesforce

Maintaining security and compliance in Salesforce requires effective user access management. This article will lead you through the process of creating expiration dates for Permission Sets and Permission Set Groups, allowing you to automate access removal while minimizing manual work. Know how this functionality simplifies workflows, guarantees compliance, and improves security procedures. Why Use Expiration […]

Read More
Guide to Integrating Salesforce Data Cloud with Snowflake
Step-by-Step Guide to Integrating Salesforce Data Cloud with Snowflake

Salesforce Data Cloud is an extensive data platform that offers a 360-degree view of your data. It functions as an AI platform which is used by marketing teams, sales departments, and other businesses. The primary goal of Data Cloud is to provide a comprehensive picture of customer data. It integrates with Snowflake which is a […]

Read More
How to Insert Contact from Salesforce into MailChimp using API
How to Insert Contact from Salesforce into MailChimp using API

With the Mailchimp and Salesforce integration, you can begin using the leads and contacts in your Salesforce CRM to create email campaigns. The integration makes it relatively simple to construct list segmentations in Mailchimp using synchronized contact and lead details from Salesforce. Among other things, this integration lets you manage subscribers, view campaign reports, and […]

Read More
Integrating-Salesforce-Lightning-Map-with-Lead-Object-A-Step-by-Step-Guide-to-Adding-Address-Markers
Integrating Salesforce Lightning Map with Lead Object: A Step-by-Step Guide to Adding Address Markers

Lightning Web Components (LWC) is a modern JavaScript framework used to build responsive, dynamic applications on the Salesforce platform. LWC leverages web standards, allowing developers to utilize the latest JavaScript features and methodologies. Compared to older Salesforce frameworks like Aura and Visualforce, LWC is lightweight, fast, secure, and more efficient in terms of performance. Additionally, […]

Read More
Step-by-Step Guide to Creating a Custom Agentforce Agent
Step-by-Step Guide to Creating a Custom Agentforce Agent

A custom Agentforce Agent is imperative to increase the efficiency and effectiveness of your business operations. Do you know why? In this blog, we will walk you through the key steps that can help you create a custom Agentforce Agent: What is Agentforce? Agentforce is an AI support service designed to assist agents in providing […]

Read More
Our Location worldwide
Indian Flag India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
United States of America Flag USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
United Kingdom Flag UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818