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/one.app#' + encodedCompDef } }); } }
b.) updateAction.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <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.
Comments