Forcetrails: 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.
open lwc from formula field


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:

11 comments:
  1. Hi Rahul,
    This is very helpful for me and also happy learning.
    Thanking you,
    Regards,
    D.Achyuth

    ReplyDelete
    Replies
    1. I am glad to know that it is helpful for you!!

      Delete
  2. Hi Rahul,

    This really helped keep up the good work.

    ReplyDelete
  3. thanks helped a lot

    ReplyDelete
  4. I want to open my LWC within the same page where my formula field hyperlink is present.But its opening as new tab.Any idea on that

    ReplyDelete
    Replies
    1. Hi VK, for that you need to pass "_self" value in the third parameter of the hyperlink function. Check the documents here https://help.salesforce.com/articleView?id=sf.tips_for_using_hyperlink_formula_fields.htm&type=5

      Delete
    2. despite having self, its not opening on QLE cart page itself.You can try having an hyperlink in salesforce CPQ QLE cart

      Delete
    3. Ohh didn't know about that, may be that's something restricted in CPQ OLE cart which I am not familiar with

      Delete
  5. It helped me Rahul... Thanks for this post

    ReplyDelete

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, reach email us at rahul@forcetrails.com