+ Start a Discussion
narsavagepnarsavagep 

Lightning Web Component - Navigation - Use Case for Links in a List / Table

I need to create a link to an object within a data-table listing.
For example, list of contacts on a data table, when the user clicks the "name", it opens that Contact record view.
This seems simple enough, and yet, I'm having trouble finding a solution or example anywhere out on the internet or trailhead.  It seems like all the solutions I find are using "tiles" and cascading events.  I don't need anything that complicated.
I can post example/more information below... but would love it if someone could explain how to do this (using NavigationMixin)

narsavagepnarsavagep
Let's take for example: https://sfdccoder.wordpress.com/2019/02/21/lightning-web-component-load-contacts-list-example/
 
<template>
    <lightning-card title="Contact ListView" icon-name="custom:custom67">

        <template if:true={listView.data}>
            <div class="slds-m-around_medium">
            <template for:each={contacts} for:item="contact">
                <p key={contact.Id}>{contact.fields.Name.value} – {contact.fields.Phone.value} </p>
            </template>
            </div>
        </template>

        <template if:true={listView.error}>
            Error in loading the data ..
        </template>

    </lightning-card>
</template>

In this example, they are not making the name a link -- I would like to make it a link that would open that contact's record view.
narsavagepnarsavagep
Assuming I were to add the link using something like this:
 
<p key={contact.Id}>
    <lightning-button variant="base" label={contact.fields.Name.value} title="View Contact" onclick={viewContact}></lightning-button> 
    – {contact.fields.Phone.value}
</p>


What would the "viewContact" js look like?

Something along the lines of:
 

viewContact() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: ?????,
                objectApiName: 'Contact',
                actionName: 'view'
            }
        });
    }

I don't understand how to pass the contact.Id value from the HTML to the JS (?????)
 
narsavagepnarsavagep

Or, using:

<lightning-formatted-url value={?????} tooltip="View Contact" label={contact.fields.Name.value} target="_blank"></lightning-formatted-url>

(I realized the button isn't what I wanted)

In this example, in the past I would have just put "/{contact.Id}" -- but that doesn't work with the lightning web component : it gives me the error: Ambiguous attribute value value="/{c.Id}". If you want to make it a string you should escape it value="\/{c.Id}" -- and if I escape it using \/, then the link it forms is incorrect.

RyanAtTGHRyanAtTGH
Per the documentation (https://developer.salesforce.com/docs/component-library/bundle/lightning-formatted-url/documentation), "To create a link with a custom onclick event handler, use the HTML anchor tag <a> instead. To create a URL that navigates to another page in Salesforce, use lightning-navigation."

So, it seems the lightning-formatted-url element is for a link to a different site/page with a hard-coded value, not a dynamic one. You should be able to use an anchor tag:
 
<a href={c.id} target="_blank">{contact.fields.Name.value}</a>

or, more advanced, the lightning-navigation.