0

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);
    }
}
  • 1
    Is this your complete code? The reason I ask what it seems to me currently is that unless your contact has been loaded, you will not be able to fetch the contact.owner_fields in navigateToOwner() function. How are you confirming that contact.data is populated? Also I would think the recordId in the JS should be mentioned as recordId: this.contact.data.owner_fields. If you are sure that your contact.data is populated, then try with recordId: this.contact.data.owner_fields and see if it is redirected. – Jayant Das Feb 17 at 18:06
  • Hi Jayant, thanks for your help. That is another combination that has not worked for me. 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. – Brooks Johnson Feb 17 at 20:44
0

As an update. I went to the Dreamhouse App in the Sample Gallery and found the broker card. This had a pretty similar use case and I was able to use that example to make the event handler work.

<lightning-card title="RelationshipOwner" icon-name="standard:partners">

    <div class="slds-m-around--medium">
        <!--show relationship owner when influencer is loaded-->
        <template if:true={contact.data}>
            <lightning-button-icon
                icon-name="utility:expand_alt"
                slot="actions"
                onclick={handleNavigateToRecord}
             ></lightning-button-icon>
            <lightning-record-form object-api-name="relationship_owner__c"
                                   record-id={ownerId}
                                   fields={ownerfields}
                                    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>

JS Code:

import { LightningElement, api, wire, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import CONTACT_FIELD from '@salesforce/schema/Contact.New_Relationship_owner1__c';
import NAME_FIELD from '@salesforce/schema/relationship_owner__c.Name';
import EMAIL_FIELD from '@salesforce/schema/relationship_owner__c.email__c';
import TOTAL_INFLUENCERS from '@salesforce/schema/relationship_owner__c.Total_Influencers_DLRS__c';
import GRADE_FIELD from '@salesforce/schema/relationship_owner__c.Grade__c';
import REGION_FIELD from '@salesforce/schema/relationship_owner__c.Region_Lookup__c';

const Contact_Fields = [CONTACT_FIELD];
const Owner_Fields = [
    NAME_FIELD,
    EMAIL_FIELD,
    TOTAL_INFLUENCERS,
    GRADE_FIELD,
    REGION_FIELD
];
export default class relationshipowner extends NavigationMixin(LightningElement){
@api recordId; // relationship owner id

@track ownerfields = Owner_Fields;
@wire(getRecord, { recordId: '$recordId', fields: Contact_Fields })
    contact;

    get ownerId() {
        return getFieldValue(this.contact.data, CONTACT_FIELD);
    }
    handleNavigateToRecord()
    {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.ownerId,
                objectApiName: 'relationship_owner__c',
                actionName: 'view'
            }
        });
    }
}
  • I apologize for the formatting in the answer. I am not sure why that is happening – Brooks Johnson Feb 18 at 0:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.