0

I have an LWC that i placed on the contact page and would like for it to display the contacts information, but have it change to whatever contact the user is currently viewing.

so far,the card is completely blank other than the card title, but if I hard-code the contact recordId then it shows the information i want.

how can i grab the recordId?

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

const fields = [
    'Contact.Name',
    'Contact.Title',
    'Contact.Phone',
    'Contact.Email'
];

export default class WireGetRecordDynamicContact extends LightningElement {
    @api recordId;
    // recordId="0035e000008eB4vAAE" this is hardcoding the recordId

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

    get name() {
        return this.contact.data.fields.Name.value;
    }

    get title() {
        return this.contact.data.fields.Title.value;
    }

    get phone() {
        return this.contact.data.fields.Phone.value;
    }

    get email() {
        return this.contact.data.fields.Email.value;
    }
}

HTML

    <template>
    <lightning-card
        title="WireGetRecordDynamicContact"
        icon-name="standard:contact"
    >
        <template if:true={contact.data}>
            <div class="slds-var-m-around_medium">
                <p>{name}</p>
                <p>{title}</p>
                <p>
                    <lightning-formatted-phone
                        value={phone}
                    ></lightning-formatted-phone>
                </p>
                <p>
                    <lightning-formatted-email
                        value={email}
                    ></lightning-formatted-email>
                </p>
            </div>
        </template>
    </lightning-card>
</template>

XML

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

enter image description here

3
  • When you add it to the page, what are you setting the record Id to? What does your XML configuration file look like?
    – Nick Cook
    Jan 4 at 5:02
  • Please add .html content as well.. Jan 4 at 5:14
  • @NickCook just the recordId from an existing contact
    – happyLion
    Jan 4 at 23:52

1 Answer 1

2

I think it just might be because of the getter you're using. The @api variables are not actually available when the component is placed in the DOM instead are available later during the render cycle.

It's great you're using reactive wire properties & so you must be getting data again when recordId is available.

However, I assume the component fails on the first run when recordId was not available & getters will still be called. Just because we didn't have anything in this.contact, accessing .fields would throw an error, Can't read properties of undefined, reading 'fields'.

You should be good once you make these changes in your component js.

get name() {
    return this.contact?.data.fields.Name.value ?? '';
}

get title() {
    return this.contact?.data.fields.Title.value ?? '';
}

get phone() {
    return this.contact?.data.fields.Phone.value ?? '';
}

get email() {
    return this.contact?.data.fields.Email.value ?? '';
}

You can also use getFieldValue(record, field) from lightning/uiRecordApi to get values of the fields from contact from getRecord.

  1. Add these imports,
    import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
    import CONTACT_NAME from '@salesforce/schema/Contact.Name'.
    import CONTACT_TITLE from '@salesforce/schema/Contact.Title'.
    import CONTACT_PHONE from '@salesforce/schema/Contact.Phone'.
    import CONTACT_EMAIL from '@salesforce/schema/Contact.Email'.
  1. Update your getter functions.
    get name() {
        return getFieldValue(this.contact.data, CONTACT_NAME);
    }
    
    get title() {
        return getFieldValue(this.contact.data, CONTACT_TITLE);
    }
    
    get phone() {
        return getFieldValue(this.contact.data, CONTACT_PHONE);
    }
    
    get email() {
        return getFieldValue(this.contact.data, CONTACT_EMAIL);
    }
  1. Add an if:true={contact.data} to prevent child getters from being called when contact doesn't have any data to show.

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.