Open Lightning Component From URL Button IN Lightning

There are cases where we want to invoke a Lightning Web Component or Aura Component using URL button in Salesforce Lightning Experience. The problem is what is the easy way to do so? You might have tried navigating to Lightning Component from URL button using /lightning/cmp/c__componentname but it will not work. Let’s explore the approaches to open Lightning Component from URL button in Salesforce Lightning Experience.

Approach 1 – Using Base64 Encoded Component Definition

You can generate a URL where you do Base64 encoding of component definition to open lightning component from URL button. The component definition looks like below:-

var compDefinition = {
    componentDef: "c:yourComponentName",
    attributes: {      
        //pass any default value here  
    }
};

Now, open Online JavaScript Editor in your browser tab. Its time to generate URL using Base64 encoding. Use below code in your editor to do so.

Here, salesforceAwardsInvitation1 is the lightning web component name where we will navigate on URL button click. Replace it with your lightning component name.

var compDefinition = {
  //replace the salesforceAwardsInvitation1 with your component name
  componentDef: "c:salesforceAwardsInvitation1",
  attributes: {
    
  }
};
// Base64 encode the compDefinition JS object
var encodedCompDef = btoa(JSON.stringify(compDefinition));
console.log("/one/one.app#" + encodedCompDef);

You will notice that a URL has been printed out in console tab of the editor. Copy it and use it in the URL button. In our case, We have created the URL button on Account object and added it on the page layout under Salesforce Mobile and Lightning Experience Action.

The URL button appears on the lightning record page. Users can click on it to directly navigate to Lightning Component. See the demo below.

Approach 2 – Using Lightning App Page

This approach is pretty simple. Create a Lightning App page and add your component on the page. Save the lightning page and activate it.

All you need is to navigate to Lightning App page using the page URL.

The URL button configuration should be look like below. The URL will be:- /lightning/n/My_App_Page

Make sure your Lightning Web Component or Aura Component is available to be used with Lightning App Page.