0

I'm trying to do a proof of concept, and I've hit a bit of a roadblock. Please be gentle as I'm not a full time developer.

I'm using this Trailhead as my "base".
https://trailhead.salesforce.com/en/content/learn/projects/lwc-build-flexible-apps/single-record?trail_id=build-lightning-web-components

Specifically the example "Create the Bear Supervisor Component". I want to do something similar, except on the Case object. In my example, I want to have a Lightning Web Component card show the Contact's information.

When I add the component to the Case Lightning Page, I get the following error:

"afterRender threw an error in 'c:caseContact' [Cannot read property 'data' of undefined]"

Line: 4 Column 221 of the caseContact.js.

Here is my code. caseContact.html

<template>
<lightning-card title="Case Contact" icon-name="standard-people">
    <div class="slds-m-around_medium">
        <!-- Show contact when Case is loaded -->
        <template if:true={Case.data}>
            <lightning-record-form
                object-api-name="Case"
                record-id={contactId}
                layout-type="Compact">
            </lightning-record-form>
        </template>
        <!-- Data failed to load -->
        <template if:true={Case.error}>
            <div class="slds-text-color_error">
                An error occured while loading the bear record
            </div>
        </template>
    </div>
</lightning-card>

caseContact.js

import { LightningElement, api, wire  } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import CONTACT_FIELD from '@salesforce/schema/Case.ContactId';
const caseFields = [CONTACT_FIELD];
export default class CaseContact extends LightningElement {
    @api recordId; // Case Id
    @wire(getRecord, { recordId: '$recordId', fields: caseFields})
    case;
    get contactId() {
        return getFieldValue(this.case.data, CONTACT_FIELD);
    }
}

caseContact.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="caseContact">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Case</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Any thoughts or ideas would be appreciated. As I mentioned, this is actually a proof of concept that I plan on using on another object, except with the User object instead of the Contact object.

0

the wire decorator is one time called without any data during initialisation which means that your case variable is undefined during the first rendering time. Trying to access a property which does not exist yet leads to an exception.

So you have to make sure that case is defined - either with a helper getter for the conditional rendering or default values

Example:

caseContact.html:

<template>
 <lightning-card title="Case Contact" icon-name="standard-people">
     <div class="slds-m-around_medium">
        <!-- Show contact when Case is loaded -->
        <template if:true={hasCaseData}>
            <lightning-record-form
                object-api-name="Case"
                record-id={contactId}
                layout-type="Compact">
            </lightning-record-form>
        </template>
        <!-- Data failed to load -->
        <template if:true={hasCaseError}>
            <div class="slds-text-color_error">
                An error occured while loading the bear record
            </div>
        </template>
    </div>
</lightning-card>

caseContact.js:

import { LightningElement, api, wire  } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import CONTACT_FIELD from '@salesforce/schema/Case.ContactId';
const caseFields = [CONTACT_FIELD];
export default class CaseContact extends LightningElement {
    @api recordId; // Case Id
    @wire(getRecord, { recordId: '$recordId', fields: caseFields})
    case;
    get contactId() {
        return getFieldValue(this.case.data, CONTACT_FIELD);
    }
    get hasCaseData() {
        return this.case && this.case.data
    }
    get hasCaseError() {
        return this.case && this.case.error
    }
}
| improve this answer | |
  • I was able to get past my initial error. However, now, I get: API Name Case is invalid, did you mean "Contact"? ContactID is a lookup on the Case object. I was hoping to get the ContactID from the Case, and then pull in the bits of contact data into my component. – VLeandro Jun 18 '19 at 19:36
0

I sorted it out. I was making the wrong call to the wrong object in the HTML file. I should have been calling Contact and not case.

All this because the Salesforce Related Record out of the box component won't support User object.

| improve this answer | |

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.