2

I am working on a lightning web component where i am trying to parse comma separated values(field names) entered in the design attribute and add it to an array.When i tried giving an array with a list of fields defined, it works well. But when i try to get the value in my component it seems to be failing with the following error

afterRender threw an error in 'c:displaySelectedFields' [Cannot read property 'fieldApiName' of undefined]

My code is as follows :

JS

import { LightningElement,api,track } from 'lwc';

export default class DisplaySelectedFields extends LightningElement {

@track listOfFields=[];
@api strName; //.split
@track recordId;
//= ['Name','Phone','Website'];

        handleSuccess(event){
        /*var fnames=strName;
        var fieldList= fnames.split(',');
        this.recordId= event.detail.Id;
        alert(fieldList);*/
        var fnames=strName;
        //console.log('Hello',fnames);
        this.listOfFields= fnames.split(',');
        this.recordId= event.detail.Id;
        //alert(fieldList);
        }

}
====================
HTML

<template>
    <lightning-card title="Design Attribute Demo" icon-name="custom:custom19">
        <center>
                <ul>
                    <li> Emp Name: <b>{strName}</b></li>
                    {listOfFields}
                </ul>
                <lightning-record-form record-id={recordId} object-api-name="Account" columns="2" mode="edit" fields={listOfFields}
        onload={handleSuccess}>
            </lightning-record-form>
        </center>
    </lightning-card>
</template>
=================
Config xml file

<targetConfigs>
  <targetConfig targets="lightning__HomePage,lightning__RecordPage">
    <property name="strName" type="String" default="Salesforce Code Crack" label="Enter the Employee Name"/>
   </targetConfig>
</targetConfigs>
1

1 Answer 1

2

I see that there are both logic errors as well as code errors. You can implement as follows:

  1. Without api decorated recordId, you will not get the record Id. Even if you say event.detail.Id in handleSuccess method - you will not get anything because record form itself will not load as there is no recordId to start with .
  2. You should use connectedCallback to get list of fields instead of handleSuccess as you dont want to rerender the form again just to show fields .
  3. Use conditional rendering of form in template and do not initialise listOfFields in js so that form is rendered only when you get the list of fields through connectedCallback .

Below is the code:

HTML:

<template>
    <div class="slds-theme_default slds-box">
        <lightning-card title="Design Attribute Demo" icon-name="custom:custom19">
            <center>
                <ul>
                    <li> Emp Name: <b>{strName}</b></li> {listOfFields}
                </ul>
                <template if:true={listOfFields}>
                    <lightning-record-form record-id={recordId} object-api-name="Account" columns="2" mode="edit"
                                           fields={listOfFields}
                                           onload={handleSuccess}>
                        <template for:each={listOfFields} for:item="fld">
                            <lightning-input-field key={fld} field-name={fld}></lightning-input-field>
                        </template>
                    </lightning-record-form>
                </template>
            </center>
        </lightning-card>
    </div>
</template>

JS:

@track listOfFields;
@api strName; //.split
@api recordId;
//= ['Name','Phone','Website'];

handleSuccess(event) {}

connectedCallback() {
    var fnames = this.strName;
    this.listOfFields = fnames.split(',').map((fld) => fld.trim());
}
2

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.