How to Build Headless Quick Actions in LWC

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:

Salesforce Developer Tools: Set up Salesforce DX and Visual Studio Code for development.
Basic LWC Knowledge: Familiarity with creating and deploying Lightning Web Components.
Access to Salesforce Org: You need access to a Salesforce org to create Quick Actions and deploy LWC components.
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

Our Recent Blogs

Step-by-Step Guide to Building Headless Quick Actions in LWC

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

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

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, […]

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 […]

Steps to Develop Prompt Template with Data Using Flow or Apex

How to Ground Your Prompt Templates with Data Using Flow or Apex

In the world of Salesforce development, prompt templates are like the secret ingredient that powers some of the coolest features in Einstein 1 Studio. They’re the behind-the-scenes magicians who make things happen, from drafting personalized emails to summarizing records and beyond. But here’s the thing: to make these templates truly shine, you’ve got to ground […]

A Complete Guide to Second Generation Managed Packages (2GP)

Second Generation Managed Packaging (2GP) is a must-have modern approach that helps in building and managing packages on Salesforce. It offers a myriad of tools for developing, distributing, and managing apps and metadata to AppExchange partners. With the help of Managed 2GP packaging, you can utilize your custom Apex code, interact with your version control […]

Unlocking the Future Salesforce's Biometrics Service for Mobile Apps

A Deep Dive into Salesforce’s Biometrics Service for Mobile Apps

Salesforce’s cutting-edge offering, Biometrics Service, is about to revolutionize mobile utility safety with its Spring ’24 release. This new carrier lets builders seamlessly integrate biometric authentication functions, including fingerprint and facial recognition, without delay into Lightning Net components (LWCs). This capability is important for defensive touchy records on mobile gadgets, ensuring unauthorized entry is thwarted […]

Creating Dynamic Pagination in Salesforce Using Lightning Web Components

Dynamic Pagination is a useful technique in Salesforce used for splitting large datasets into smaller and more manageable pages. The main purpose of “Dynamic Pagination” is to boost the user experience while dealing with a large amount of information. So, creating a Dynamic Pagination is important! In this blog, we will show you how to […]