Populate LWC from fieldset

lightning-recordeditformlightning-web-components

I am trying to populate an LWC form using field sets.
Currently I am populating a combo box with metadata records

Call Class to populate combo box and FieldSet

@AuraEnabled (cacheable=true)
public static List<objectFieldSet__mdt> getCmtFS(){
    return [SELECT Id, DeveloperName,fsName__c FROM objectFieldSet__mdt];
}

Combo box HTML

<lightning-card title="">
   <lightning-combobox
       name="Select:"
       label="Select:"
       placeholder="Choose an Object"
       value={value}
       onchange={handleCbupdate}
       options={object}>
   </lightning-combobox>
   <p></p>
</lightning-card>

Combo box JS

@wire(getCmtFsData)
wiredCmtObjectsData({ error, data }) {
   if (data) {
       for(i=0; i<data.length; i++)  {
           this.items = [...this.items ,{value: data[i].DeveloperName , label: data[i].DeveloperName} ];                                   
        }                
        this.error = undefined;
   } else if (error) {
       this.error = error;
   }
 }

  get object() {
      return this.items;
  }

Call Class to get fields for field set.

 gif( this.chosenValue == 'Account'){
    this.renderAccount = true;
    
    getAccountFieldSet()
    .then(result => {    
            this.accounts = JSON.parse(result);
            this.error = undefined;
        })
        .catch(error => {
            this.error = error;
            this.accounts = undefined;
      }

Field set Apex Class return fields in field set via a JSON string

public static String getAccountFieldList() {

    Map<String, String> returnFS = new Map<String,String>();

    List<Schema.FieldSetMember> listFieldSetFields = 
    Account.getSObjectType().getDescribe().fieldSets.getMap().get('RecordCreation').getFields();

    returnFS.put('FIELDSET_LIST', JSON.serialize(listFieldSetFields));
    return JSON.serialize(returnFS);

There is an Account, Contact, Invoice__c, Payment__c cmt records and each has a field set.
How can I used the fields returned from the apex class to populate a form for each object? These fields are all input fields

Best Answer

Solution to getting fields set to render

HTML

<template if:true={renderAccount}>
<lightning-layout multiple-rows="true">
    <lightning-layout-item padding="around-small" size="12">
        <lightning-record-edit-form object-api-name="Account" onsubmit={handleSubmit} onsuccess={handleSuccess}>
            <template for:each={accounts} for:item="acc"> 
                <lightning-input-field field-name={acc.fieldPath} key={acc.label}>
                </lightning-input-field>
            </template>
            <lightning-button
                class="slds-m-top_small"
                type="submit"
                label="Create Records">
            </lightning-button>
        </lightning-record-edit-form>
    </lightning-layout-item>
</lightning-layout>

getAccountfieldSetFields(){
getAccountFieldSet()
    .then(result => {  
        let test = JSON.parse(result);
        this.accounts = JSON.parse(test.FIELDSET_LIST);

    })
    .catch(error => {
        this.error = error;
        this.accounts= undefined;

Apex Class

Map<String, String> returnFS = new Map<String,String>();

List<Schema.FieldSetMember> listFieldSetFields = 
Account.getSObjectType().getDescribe().fieldSets.getMap().get('RecordCreation').getFields();


returnFS.put('FIELDSET_LIST', JSON.serialize(listFieldSetFields));
return JSON.serialize(returnFS);

Related Solutions

[SalesForce] LWC Get Pick-list Field Values

LWC does have a wire adapter that pulls in picklist values dynamically.

import { LightningElement, wire, track } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import {getRecord, getFieldValue} from 'lightning/uiRecordApi';

const fields = [INDUSTRY_FIELD];

export default class Example extends LightningElement {
    @api recordId;
    @track selectedOption; 
    @track options;

   /*
    * There is no guarantee that the pick-list values will return first
    * Because of this, we check to see if a selected option already exists
    * If it does, we verify it is a valid value for the picklist.
    * If it is not valid, we set the selected option to the default value.
    * If it is valid, no changes are made
    * If there is no selected option, we use the default option
    *
    * Note: recordTypeId is required. If your object has no record types create
    * at least 1.
    */
    @wire(getPicklistValues, { recordTypeId: '012000000000000AAA', fieldApiName: INDUSTRY_FIELD })
    setPicklistOptions({error, data}) {
        if (data) {
            this.options = data.values;

            if (this.selectedOption) {
                let optionIsValid = this.options.some(function(item) {
                    return item.value === this.selectedOption;
                }, this);

                if (!optionIsValid) {
                    this.selectedOption = data.defaultValue;
                }
            } else {
                this.selectedOption = data.defaultValue;
            }
        } else if (error) {
            console.log(error);
        }
    }


    /*
     * As with above, there is no guarantee to which order these functions execute
     * If the options list exists, we will check to see if our value is valid.
     * If it is, set our value as the selected value
     * If it is not, do nothing
     * If the options list does not exist, we will create an options list with 
     *   a single value using this records picklist value.
     */
    @wire(getRecord, {recordId:'$recordId', fields})
    account({error, data}) {
        if (data) {
            let industryValue = getFieldValue(data, INDUSTRY_FIELD);

            if (!this.options) {
                this.options = [{label:industryValue, value:industryValue}];
            }

            let industryIsValid = options.some(function(item) {
                return item.value === industryValue;
            }, this);

            if (industryIsValid) {
                this.selectedOption = industryValue;
            }
        } else if (error) {
            console.log(error);
        }
    }
}

[SalesForce] LWC: Can’t access field values from @wire + uiRecordApi/getRecord

I am wondering if this is a timing issue, where you are calling testMe before the getRecord is finished, though I'd need to see your template to be sure. But I re-created your code in a scratch org, and it worked ok when I used this as my template, but without the if:true, both Name and Service Area are undefined

<template>
    <template if:true={app}>
    Test Me: {testMe}
    </template>
</template>

And my controller:

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

import APP_NAME from '@salesforce/schema/Application__c.Name';
import APP_SERVICEAREA from '@salesforce/schema/Application__c.Service_Area__c';

export default class StackAppRecord extends LightningElement {
    @api recordId; // Application__c.Id
    @track app; // Application__c record
    @track appName;
    // ...
    @wire(getRecord, { recordId: '$recordId', fields: [APP_NAME,APP_SERVICEAREA] })
    loadRecord ({ error, data })   {
        if (data) {
            this.app = data;
            this.error = undefined;
            console.log('got data');
        } else if (error) {
            // ...
        }
    }
    // Called from a {testMe} in the HTML template
    get testMe() {
        console.log(this.app); // returns a Proxy
        console.log(JSON.stringify(this.app)); // returns a JSON as expected:
        console.log(this.app.fields.Name.value); // shows Name Value:
        console.log(this.app.fields.Service_Area__c.value); // show Service Value:
        return '?!';
    }

}

Best Answer

Related Solutions

[SalesForce] LWC Get Pick-list Field Values

[SalesForce] LWC: Can’t access field values from @wire + uiRecordApi/getRecord

Related Topic