How to call Lightning Web Component from formula field

Hello Trailblazers,

I am sharing a trick "How to call Lightning Web Component from formula field" which might be helpful for you.

Use Case:

The requirement is to open a Lightning web component from the details page, on click of the field. Where the field value on the standard detail page will work as a link.

Approach:

I am going to create a formula field with a URL inside it. Now we need to associate the Lwc with a URL, for that we need to wrap the Lwc inside an Aura component. The component implements the URL addressable interface. 

Update: If you just want to add query parameters and pass those to LWC from the lightning application, then you don't need to wrap the LWC inside an Aura Component, refer to the standard lwc docs Or visit my post: Stay on the same tab after page refresh lightning-tab in lwc.

Implementaion and Code

Let's create a URL addressable component first.

UrlAddressableAura.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:isUrlAddressable,force:appHostable" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="change" value="{!v.pageReference}" action="{!c.reInit}"/>
    <aura:attribute type="id" name="recordId" /> 
    <c:myWebComponent recordId="{!v.recordId}" /> 
</aura:component>

UrlAddressableAuraController.js

({
    doInit: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var recordId = myPageRef.state.c__recordId;
        cmp.set("v.recordId", recordId);
    },
    
    reInit : function(component, event, helper) {
        $A.get('e.force:refreshView').fire();
    }
})

Notes on the above code: 

I have added my lightning web component in the aura component named myWebComponent.

As of now, Summer 20 release, lightning web components are not URL addressable directly. So you need to wrap it in aura component.

You can pass the URL parameters also, like c__recordId, just make sure that you append c__ before the name of the parameters.

You can get the URL parameters in when the component is loaded, see the doInit method.

I have added pagePeference change handler reInit to refresh the component.

Finally, create a formula field and link it with the component.

HYPERLINK("/lightning/cmp/c__yrlAddressableAura?c__recordId="+Id, "Label for link", "_self")

I have used the HYPERLINK function to create a link. This function has three parameters, the related / full path, link label, and the target.

Also, you can set the label from other fields' values. 

Happy learning!!

Resources:

Hyperlink formula function

Url Addressable Aura Component