I am working on my first, and pretty simple, Lightning Web Component. The component lives on the contact record page and displaying information from a custom object with a parent lookup relationship. That part is working fine.
But, I would also like to be able to include navigation to allow the user to click a button and view the parent record. I can not seem to figure out how to get the record Id into my event handler. I have tried numerous permutations and can't seem to get it to work.
I have gone through the @wire documentation and feel like I am still not getting this. I have imported the the Id the with import Owner_Id from '@salesforce/schema/Contact.New_Relationship_owner1__c';
Any thoughts on how I get this Id into my event handler successfully?
Here is my HTML
<template>
<lightning-card title="RelationshipOwner" icon-name="standard:partners">
<lightning-button
label="Go to Relationship Owner Record"
onclick={navigateToOwner}
class="slds-m-right_x-small"
></lightning-button>
<div class="slds-m-around--medium">
<!--show relationship owner when influencer is loaded-->
<template if:true={contact.data}>
<lightning-record-form object-api-name="relationship_owner__c"
record-id={ownerId}
layout-type="Compact"
columns=2>
</lightning-record-form>
</template>
<!--Data fails to load-->
<template if:true={contact.error}>
<div class="slds-text-color--error">
An error occured while loading influencer data.
</div>
</template>
</div>
</lightning-card>
Here is the JS
import { LightningElement, api, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import Owner_Id from '@salesforce/schema/Contact.New_Relationship_owner1__c';
const owner_fields = [Owner_Id];
export default class relationshipowner extends NavigationMixin(LightningElement) {
@api recordId; // relationship owner id
@wire(getRecord, { recordId: '$recordId', fields: owner_fields })
contact;
navigateToOwner() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.contact.owner_fields,
objectApiName: 'relationship_owner__c',
actionName: 'view'
}
});
}
get ownerId() {
return getFieldValue(this.contact.data, Owner_Id);
}
}
contact
has been loaded, you will not be able to fetch thecontact.owner_fields
innavigateToOwner()
function. How are you confirming thatcontact.data
is populated? Also I would think therecordId
in the JS should be mentioned asrecordId: this.contact.data.owner_fields
. If you are sure that yourcontact.data
is populated, then try withrecordId: this.contact.data.owner_fields
and see if it is redirected.this.contact.data.owner_fields
throws an error of 'page does not exist' when the button is clicked. I might be doing this wrong but the component can't load until after the contact page loads. I am thinking that as long as the contact page has loaded and the LWC is displaying the correct information that we know all the data loaded.