Passing URL parameters to Lightning Component

In this article we will explore how to pass parameters via URL to a Lightning Component hosted by a Lightning Tab.

The steps are the following:

1. Create a Lightning Component
2. Create a Lightning Component Tab
3. Pass the parameter to the component via URL

1.Create a Lightning Component

Here’s the code of the Example Lightning Component:

To enable direct navigation to a Lightning component via URL, add the lightning:isUrlAddressable interface to the component. This interface is used with the lightning:navigation component to navigate from one component to the URL-addressable component.

lightning:isUrlAddressable — documentation — Salesforce Lightning Component Library

In the component’s controller retrieve the attribute values

2. Create a Lightning Component Tab

In the Salesforce Setup/User Interface/Tabs/New “Lightning Component Tab” section, create a Tab of type “Lightning Component Tab” with name “MyComponentTab” to host the Lightning Component called “MyComponent”

3 Pass the parameter to the component via URL

URL format:

/lightning/n/componentTabName?c__parameterName=parameterValue

In our case:

/lightning/n/MyComponentTab?c__myParameter=”+Id

Open a Lightning Component with a Formula Field:

Also a formula field can be used to open a component via URL passing a parameter.

Let’s look at an example: here’s a Formula Field named “Link” to open the Lightning Tab:

Formula Value:

HYPERLINK(“/lightning/n/MyComponentTab?c__myParameter=”+Id,
IMAGE(“/img/func_icons/util/editLayout20.png”,”C”)
)