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);
    }
}
2
  • 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, 2019 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. Feb 17, 2019 at 20:44

1 Answer 1

1

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'
            }
        });
    }
}
1
  • I apologize for the formatting in the answer. I am not sure why that is happening Feb 18, 2019 at 0:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .