LWC inner class property access issue

Question

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;

    }
}

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

dibocor · Accepted Answer · 2019-11-15 15:51:14Z

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

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

Stack Exchange Network

current community

your communities

more stack exchange communities

LWC inner class property access issue

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged lightning-web-components inner-class or ask your own question.

Linked

Hot Network Questions

LWC inner class property access issue

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged lightning-web-components inner-class or ask your own question.

Linked

Related

Hot Network Questions