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

What Are Headless Quick Actions in Lightning Web Components?
Prerequisite to Create a Headless Quick Action in LWC
Steps to Create a Headerless Quick Action.
Step 1: Create the LWC Component
Step 2: Create a Custom Quick Action
Step 3: Override the Standard Header by defining the below XML
Step 4: Deploy the LWC component
Conclusion

Beginner’s Guide to Making Your LWC Component Multilingual

If you’re wondering how to make your LWC component multilingual, you’re already ahead of the curve. Global users expect content in their native language, and Salesforce gives you the tools to deliver exactly that. With Custom Labels and the Translation Workbench, you can easily localize your Lightning Web Components without touching a single line of […]

Hands-On Guide: Building a Drag-and-Drop Form Builder Using Lightning Web Components

Drag-and-drop interfaces are a user experience staple, and when paired with the power of Lightning Web Components (LWC), they unlock dynamic, highly interactive Salesforce components. In this blog post, we’ll walk you through how to build a custom drag-and-drop form builder in LWC. Users can drag form fields like text inputs and dropdowns into a […]

How to Create an Agentforce-Enabled Scratch Org in Salesforce

Setting up an Agentforce-enabled scratch org is the most important step for developers who want to experiment with AI features such as Prompt Builder and Einstein GPT. Whether you’re developing the next generation CRM software or experimenting with how generative AI may improve user experience, a scratch org equipped with Agentforce is your playground. Follow […]

Step-by-Step Guide to Enhance Your LWC Development Workflow with the Logger API

Are you looking to streamline your LWC development workflow but confused about how to do it? Then you are in the right place. The Salesforce Logger API is a powerful tool that helps you monitor, debug, and improve code quality in real time. This step-by-step guide walks you through how to set it up and […]

Enhancing Your Salesforce Experience with a Custom Activity Component

In today’s fast-paced business landscape, productivity hinges on streamlined workflows and intuitive interfaces. While Salesforce offers robust activity tracking capabilities, sometimes the standard components fall short of specific organizational needs. That’s where a Custom Activity Component comes in—designed to tailor your activity management experience, boost user efficiency, and provide deeper insights into customer interactions. In […]

A Step-by-Step Guide to Integrating Salesforce Doc-Gen with eSigning Tools

In today’s fast-paced digital landscape, streamlining document workflows is no longer a luxury—it’s a necessity. Integrating a document generation app, like Docs Made Easy, with an eSigning tool, helps businesses automate the entire document lifecycle—from creation to signature—saving time, reducing errors, and boosting productivity. In this guide, we’ll walk you through the key steps, tools, […]

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

What Are Headless Quick Actions in Lightning Web Components?

Prerequisite to Create a Headless Quick Action in LWC

Steps to Create a Headerless Quick Action.

Step 1: Create the LWC Component

Step 2: Create a Custom Quick Action

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

Step 4: Deploy the LWC component

Conclusion

Share This Blog

Table of contents

Related Articles

Our Location worldwide

India

USA

UK

Canada