1

Im receiving the following error when trying to initialize the OnboardingPeopleResult class from a button on my LWC form. This data object initializes an inner class OnboardingAddressResult as one if its properties. Im hoping someone can help me answer why the inner class' properties are not available to the LWC?

[Cannot read property 'street1' of undefined]

//Outer Class
public class OnboardingPeopleResult {

    @AuraEnabled
    public String accountid {get;set;} 
    @AuraEnabled
    public String firstname {get;set;} 
    @AuraEnabled
    public String lastname {get;set;} 
    @AuraEnabled
    public String middlename {get;set;} 
    @AuraEnabled
    public OnboardingAddressResult employerAddress {get;set;}

    public OnboardingPeopleResult() { //String accountid, String firstname, String lastnameAccount client, Account pa, AccountConctactRelationship acr
        this.accountid = '';
        this.firstname = '';
        this.lastname = '';
        this.middlename = '';
        this.employerAddress = new OnboardingAddressResult();
    }

}
//Inner Class
public class OnboardingAddressResult {
    @AuraEnabled
    public string customname{get;set;}
    @AuraEnabled
    public string street1{get;set;}
    @AuraEnabled
    public string street2{get;set;}
    @AuraEnabled
    public string city{get;set;}
    @AuraEnabled
    public string state{get;set;}
    @AuraEnabled
    public string postalcode{get;set;}
    @AuraEnabled
    public integer key {get;set;}

    public OnboardingAddressResult() {

        this.customname = '';
        this.street1 = '';
        this.street2 = '';
        this.city = '';
        this.state = '';
        this.postalcode = '';
        this.key = 0;

    }

}
public with sharing class Onboarding {

    @AuraEnabled
    public static OnboardingPeopleResult newEmptyWrapper(){
        OnboardingPeopleResult oar = new OnboardingPeopleResult();
        return oar;
    }
}
<template>
<lightning-card title="People"> 
    <lightning-button label="New" slot="actions" onclick={handleNewAction}></lightning-button>
</lightning-card>
...
<lightning-layout multiple-rows="true">
    <lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
        <div class="custom-pad"><lightning-input type="text" label="Street" value={record.employerAddress.street1}></lightning-input></div>
    </lightning-layout-item>
    <lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
        <div class="custom-pad"><lightning-input type="text" label="City" value={record.employerAddress.city}></lightning-input></div>
    </lightning-layout-item>
    <lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
        <div class="custom-pad"><lightning-input type="text" label="State" value={record.employerAddress.state}></lightning-input></div>
    </lightning-layout-item>
    <lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
        <div class="custom-pad"><lightning-input type="text" label="Postal Code" value={record.employerAddress.postalcode}></lightning-input></div>
    </lightning-layout-item>
</lightning-layout>
...
</template>
import getEmptyOnboardingPeopleResult from '@salesforce/apex/Onboarding.newEmptyWrapper';

export default class OnboardingPeople extends LightningElement {

    @wire(getEmptyOnboardingPeopleResult)
    emptyRow;

    handleNewAction(){

        this.record = this.emptyRow;
        this.bShowModal = true;

    }
}

  • Do you have name space enabled in your org? – Amit Sahu Nov 14 '19 at 20:26
  • Just the default, nothing custom – user891859 Nov 14 '19 at 20:34
  • That's an error message from JavaScript, not Apex, suggesting the employerAddress instance isn't being sent back. I've got a sneaky feeling you need to have @AuraEnabled before the start of OnboardingAddressResult as well as on the properties like you have now. – Matt Lacey Nov 14 '19 at 22:40
  • I ran into similar issues in the past and there is no need to use @AuraEnabled on classes (just variables). Is that the entire js controller? where is record defined? does it have any decorator? – Glen De Marcos Nov 15 '19 at 0:49
  • @MattLacey - Thank you for the reply. Can you give me more details on where you would put @ AuraEnabled? Putting @ AuraEnabled at the top of the OnboardingAddressResult class isn't allowed. force-app\main\default\classes\OnboardingAddressResult.cls AuraEnabled is not allowed on classes (2:14) – user891859 Nov 15 '19 at 15:03
4

To use @wire to call an Apex method, you must annotate the Apex method with @AuraEnabled(cacheable=true). Certainly, you have forgotten the cacheable=true.

Also in the html file, instead of using record.employerAddress.propertyName use record.data.employerAddress.propertyName. Like below

<template>
    <lightning-card title="People">
        <lightning-button label="New" slot="actions" onclick={handleNewAction}></lightning-button>
    </lightning-card>
    <template if:true={bShowModal}>
        <lightning-layout multiple-rows="true">
            <lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
                <div class="custom-pad">
                    <lightning-input type="text" label="Street" value={record.data.employerAddress.street1}>
                    </lightning-input>
                </div>
            </lightning-layout-item>
            <lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
                <div class="custom-pad">
                    <lightning-input type="text" label="City" value={record.data.employerAddress.city}></lightning-input>
                </div>
            </lightning-layout-item>
            <lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
                <div class="custom-pad">
                    <lightning-input type="text" label="State" value={record.data.employerAddress.state}></lightning-input>
                </div>
            </lightning-layout-item>
            <lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
                <div class="custom-pad">
                    <lightning-input type="text" label="Postal Code" value={record.data.employerAddress.postalcode}>
                    </lightning-input>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </template>
</template>

JS

import { LightningElement, wire, track } from 'lwc';
import getEmptyOnboardingPeopleResult from '@salesforce/apex/Onboarding.newEmptyWrapper';

export default class OnboardingPeople extends LightningElement {

    @wire(getEmptyOnboardingPeopleResult) emptyRow;
    @track bShowModal = false;


    handleNewAction(){
        this.record = this.emptyRow;
        this.bShowModal = true;

    }
}

Apex class

public with sharing class Onboarding {

    public class OnboardingAddressResult {
        @AuraEnabled
        public string customname {get;set;}
        @AuraEnabled
        public string street1{get;set;}
        @AuraEnabled
        public string street2 {get;set;}
        @AuraEnabled
        public string city {get;set;}
        @AuraEnabled
        public string state {get;set;}
        @AuraEnabled
        public string postalcode {get;set;}
        @AuraEnabled
        public integer key {get;set;}

        public OnboardingAddressResult() {

            this.customname = '';
            this.street1 = '';
            this.street2 = '';
            this.city = '';
            this.state = '';
            this.postalcode = '';
            this.key = 0;

        }

    }

    public class OnboardingPeopleResult {
        @AuraEnabled
        public String accountid {get;set;} 
        @AuraEnabled
        public String firstname {get;set;} 
        @AuraEnabled
        public String lastname {get;set;} 
        @AuraEnabled
        public String middlename {get;set;} 
        @AuraEnabled
        public OnboardingAddressResult employerAddress {get;set;}

        public OnboardingPeopleResult() { //String accountid, String firstname, String lastnameAccount client, Account pa, AccountConctactRelationship acr
            this.accountid = '';
            this.firstname = '';
            this.lastname = '';
            this.middlename = '';
            this.employerAddress = new OnboardingAddressResult();
        }

    }

    @AuraEnabled(cacheable=true)
    public static OnboardingPeopleResult newEmptyWrapper(){
        OnboardingPeopleResult oar = new OnboardingPeopleResult();
        return oar;
    }
}

Hope this helps

| improve this answer | |
  • Thank you for the response. Where does @AuraEnabled(cacheable=true) go in this scenario? Its not allowed on the class itself or the properties within the outer class. – user891859 Nov 15 '19 at 14:58
  • @user891859 you have to add @AuraEnabled(cacheable=true) above your newEmptyWrapper apex method . – dibocor Nov 15 '19 at 15:49
  • I updated my answer by adding the apex class – dibocor Nov 15 '19 at 15:51
  • Ok thanks. I added cacheable to the newEmptyWrapper method but its still throwing the same error. The only difference between what you are doing and what I am doing is yours has the classes inside of the Onboarding class. Mine are separate class files. – user891859 Nov 15 '19 at 16:31
  • did you use record.data.employerAddress.propertyName instead of record.employerAddress.propertyName in your html file. ? – dibocor Nov 15 '19 at 16:43

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.