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.
India 
USA
UK
Canada