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);
OPEN LIGHTNING COMPONENT FROM URL BUTTON IN LIGHTNING

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.

OPEN LIGHTNING COMPONENT FROM URL BUTTON IN LIGHTNING
OPEN LIGHTNING COMPONENT FROM URL BUTTON IN LIGHTNING

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.

OPEN LIGHTNING COMPONENT FROM URL BUTTON IN LIGHTNING
OPEN LIGHTNING COMPONENT FROM URL BUTTON IN LIGHTNING

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

OPEN LIGHTNING COMPONENT FROM URL BUTTON IN LIGHTNING

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

8 comments

    1. Apparently no in the approach 1 : my component implements force:hasRecordId but this attribute is not retrieved when the component is launched that way. Then, I have tried to add something like that but it does not work either

      […]
      attributes: {
      “recordId” : “{!Case.Id}”
      }
      […]

  1. Please update this statement because it is incorrect “navigating to Lightning Component from URL button using /lightning/cmp/c__componentname but it will not work”.
    It perfectly worked for me, by using /lightning/cmp/c__componentname in URL of list button.

  2. My component not refresh after click back button from browser and again click on url button from component. Is there any way to do it.

Leave a Reply