1

I want to create a custom component for a record page that gets a field value for the record, determines if the value is null or not. If it is null, some content will be shown and some will be hidden. If the value is not null, the opposite content will be shown/hidden.

Here's something I've tried:

HTML:

<template>
    <lightning-card
        title="Check Field Value"
        icon-name="standard:contact"
    >
        <template if:true={isNullTitleValue}>
            <div class="slds-var-m-around_medium">
                <p>I noticed this record does not have a value for the Title field.</p>
            </div>
        </template>
        <template if:false={isNullTitleValue}>
            <div class="slds-var-m-around_medium">
                <p>The value for the Title field is {title}.</p>
            </div>
        </template>
        <template if:true={contact.error}>
            <p>Error:{contact.error}</p>
        </template>
    </lightning-card>
</template>

JS:

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

import TITLE_FIELD from '@salesforce/schema/Contact.Title';

const fields = [TITLE_FIELD];

export default class ConditionalRender extends LightningElement {
    @api recordId;
    @api objectApiName;

    @wire(getRecord, { recordId: '$recordId', fields })
    contact;

    get isNullTitleValue(){
        if(this.contact.data.fields.Title.value === null){
            return true;
        }
        return false;
    }

    get title() {
        return getFieldValue(this.contact.data, TITLE_FIELD);
    }
}   

When the component tries to load on the record page, this is the error message:

Error during LWC component connect phase: [Cannot read property 'fields' of undefined]

Please let me know where I took a wrong turn.

2 Answers 2

5

You already have a getter (title) that checks this properly (via getFieldValue), so you can just reuse it!

get isNullTitleValue(){
    return !this.title;
}
1
  • Very helpful. Thank you!
    – Nathaniel
    Commented Apr 12, 2021 at 23:06
3

Because the getter runs before the data comes back from the @wire method, you will get this error as the contact object will be empty/undefined.

To prevent this, you need to perform some null checks in the getter:

 get isNullTitleValue(){
    if(this.contact && 
        this.contact.data &&
        this.contact.data.fields.Title.value === null){
        return true;
    }
    return false;
}

It might be possible to perhaps just check for this.contact only - you'll have to see if you can peform just the one null check rather than 2.

Also make sure that whatever profile you are testing as has access to the contact object and fields.

3
  • Not if, when. It is guaranteed that the initial state will be empty before the wire has a chance to kick in.
    – sfdcfox
    Commented Apr 12, 2021 at 22:35
  • True - will reword. Commented Apr 12, 2021 at 22:36
  • Extremely helpful. Thank you @Caspar Harmer and @sfdcfox!
    – Nathaniel
    Commented Apr 12, 2021 at 23:05

You must log in to answer this question.

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