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.
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>
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.
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}
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 (?????) 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.
UPDATE: Per answer below, can pass ID using "value" and/or "data-*" My full updated code is below for future reference:
sesResultsContact.js
import { NavigationMixin, CurrentPageReference } from 'lightning/navigation';
import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/sesController.getContactList';
export default class SesResultsContact extends NavigationMixin(LightningElement) {
@wire(CurrentPageReference) pageRef;
@wire(getContactList) contacts;
viewContact(event) {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: event.target.value,
objectApiName: 'Contact',
actionName: 'view'
}
});
}
viewContact2(event) {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: event.target.dataset.id,
objectApiName: 'Contact',
actionName: 'view'
}
});
}
}
sesResultsContact.html
<template>
<lightning-card title="Contact" icon-name="standard:contact">
<div class="slds-card__body_inner">
<template if:true={contacts.data}>
<table class="slds-table slds-table_fixed-layout slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Email">Email</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Account">Account</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={contacts.data} for:item="c">
<tr class="slds-hint-parent" key={c.Id}>
<th data-label="Name" scope="row" class="slds-truncate">
<lightning-button-icon icon-name="utility:search" variant="bare"
alternative-text="Open record" onclick={viewContact} value={c.Id}>
</lightning-button-icon>
<a onclick={viewContact2} title="View Contact 2" data-id={c.Id}
target="_blank">{c.Name}</a>
</th>
<td data-label="Email">
<div class="slds-truncate" title={c.Email}>
<lightning-formatted-email value={c.Email}></lightning-formatted-email>
</div>
</td>
<td data-label="Phone">
<div class="slds-truncate" title={c.Phone}>
<lightning-formatted-phone value={c.Phone}></lightning-formatted-phone>
</div>
</td>
<td data-label="Account">
<div class="slds-truncate" title={c.Account.Name}>
<lightning-formatted-url value={c.AccountId} label={c.Account.Name}
target="_blank"></lightning-formatted-url>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</template>
<template if:true={contacts.error}>
<c-error-panel errors={contacts.error}></c-error-panel>
</template>
<div class="slds-align_absolute-center">
<lightning-button label="Show More" variant="base" disabled> </lightning-button>
</div>
</div>
</lightning-card>
sesController.cls
public with sharing class sesController {
@AuraEnabled(cacheable=true)
public static List<Contact> getContactList() {
return [ SELECT Id, Name, Phone, Email, AccountId, Account.Name
FROM Contact
WHERE Email != null
ORDER BY Name
LIMIT 1];
}
}
[Cannot read property 'Id' of undefined] m.viewContact()@https://.../lightning/n/modules/c/sesResultsContact.js:4:2887