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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .