top of page

Open Lightning Web Component from action button in full screen

If you want to open a LWC component on a action button click from a record detail page in salesforce lightning experience you have to do following things:

Create headless lwc component

a.) updateAction.js:

import { LightningElement, api } from 'lwc'; import { NavigationMixin } from 'lightning/navigation'; export default class UpdateAction extends NavigationMixin(LightningElement) { @api recordId; @api invoke() { var compDefinition = { componentDef: "c:yourcomponent", // name of the component which you want to open in full screen state: { c__recordId: this.recordId } }; // Base64 encode the compDefinition JS object var encodedCompDef = btoa(JSON.stringify(compDefinition)); this[NavigationMixin.Navigate]({ type: 'standard__webPage', attributes: { url: '/one/' + encodedCompDef } }); } }

b.) updateAction.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns=""> <apiVersion>56.0</apiVersion> <isExposed>true</isExposed> <masterLabel>Update Notes Action</masterLabel> <targets> <target>lightning__RecordAction</target> <target>lightning__RecordPage</target> </targets> <targetConfigs> <targetConfig targets="lightning__RecordAction"> <actionType>Action</actionType> </targetConfig> </targetConfigs> </LightningComponentBundle>

Now create a new action button from the Object manager and select the component which you created above. After this the main component will open in full screen.

25 views0 comments


bottom of page