1

I am currently grabbing field values from a Lead and displaying them onto a LWC. I am having trouble taking two values and placing them into a variable. Here is my JS:

// *********************
// IMPORTS
// *********************

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

// *********************
// CONSTANTS
// *********************

// Related Lead Fields
const FIELDS = [
    'Lead.FirstName',
    'Lead.LastName',
    'Lead.Title',
    'Lead.Email',
    'Lead.MobilePhone',
]

var fullName;
var firstName;
var lastName;

export default class ContactInformation extends LightningElement {

    @api recordId; // Grab the Record Id
    @api objectApiName; // Grab the Objects API Name
    @track fullName;
    @track firstName;
    @track lastName;

    // *********************
    // GET DATA
    // *********************

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

    get firstName(){
        return getFieldValue(this.leadContact.data, 'Lead.FirstName');
    }

    get lastName(){
        return getFieldValue(this.leadContact.data, 'Lead.LastName');
    }

    get title(){
        return getFieldValue(this.leadContact.data, 'Lead.Title');
    }

    get email(){
        return getFieldValue(this.leadContact.data, 'Lead.Email');
    }

    get mobilePhone(){
        return getFieldValue(this.leadContact.data, 'Lead.MobilePhone');
    }

    // On Render
    connectedCallback(){
        console.log('*******************************');
        console.log('Logging for ContactInformation:');
        console.log('Record Id:');
        console.log(this.recordId);
        console.log('Object API Name:');
        console.log(this.objectApiName);
        console.log("Lead - Account Info - THIS:")
        console.log(this);
        fullName = firstName + " " + lastName;
        console.log(fullName);
    }
}

As you can see on the bottom of the JS I am trying to concatenate the first and last name into a single variable called "fullname". When Attempting it this way I am being returned 'undefined undefined'

SOLUTION:

// *********************
// IMPORTS
// *********************

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

// *********************
// CONSTANTS
// *********************

// Related Lead Fields
const FIELDS = [
    'Lead.FirstName',
    'Lead.LastName',
    'Lead.Title',
    'Lead.Email',
    'Lead.MobilePhone',
]

export default class ContactInformation extends LightningElement {

    @api recordId; // Grab the Record Id
    @api objectApiName; // Grab the Objects API Name

    // *********************
    // GET DATA
    // *********************

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

    get firstName(){
        return getFieldValue(this.leadContact.data, 'Lead.FirstName');
    }

    get lastName(){
        return getFieldValue(this.leadContact.data, 'Lead.LastName');
    }

    get title(){
        return getFieldValue(this.leadContact.data, 'Lead.Title');
    }

    get email(){
        return getFieldValue(this.leadContact.data, 'Lead.Email');
    }

    get mobilePhone(){
        return getFieldValue(this.leadContact.data, 'Lead.MobilePhone');
    }

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }

    // On Render
    connectedCallback(){
        console.log('*******************************');
        console.log('Logging for ContactInformation:');
        console.log('Record Id:');
        console.log(this.recordId);
        console.log('Object API Name:');
        console.log(this.objectApiName);
        console.log("Lead - Account Info - THIS:")
        console.log(this);
    }
}
4

You need to use this to access member attributes.

this.fullName = this.firstName + " " + this.lastName;

Note also that neither variable will be available in connectedCallback(), as the data is loaded asynchronously. Use this instead:

get fullName() {
    return `${this.firstName} ${this.lastName}`;
}

I made a Playground that demonstrates this idea. Although it uses just a normal input, a similar design will also work for wire services.

| improve this answer | |
  • Thanks, that's very helpful. Follow up question(s): Do I have to declare all three variables? 'Full name', 'first name', & 'last name' Do I have to declare them before and in the export? – Max Mar 27 at 16:13
  • @Max variables declared outside the class will not be visible to the template or outside the component. A get/set counts as a member, so you would not declare both, just one or the other. Normally, variables outside the class are used for constants. – sfdcfox Mar 27 at 18:04
0

Hi you missed this keyword before the properties firstname and lastname since in the connectedCallback() the two are treated as different properties. So in order to access the global properties defined above use this.firstName+ ''+ this.lastName.

| 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.