Full Dynamic Code for Field Sets in Apex LWC Salesforce

Introduction:

In Salesforce development, Lightning Web Components (LWC) have become the preferred way to build user interfaces. LWC offers a powerful and flexible framework for creating interactive and responsive web applications within the Salesforce ecosystem. One of the common requirements in Salesforce is to dynamically render fields on a form based on a configuration known as field sets. In this blog, we will explore how to build a fully dynamic LWC component in Apex for handling field sets in Salesforce.

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of Salesforce development, Apex, and Lightning Web Components (LWC). Additionally, make sure you have a Salesforce developer org or sandbox to work with.

Step 1: Create a new LWC Component

First, let's create a new LWC component to handle the rendering of fields dynamically. In your Salesforce org, navigate to the Developer Console or your preferred IDE. Create a new LWC component named "DynamicFieldSet" using the Salesforce CLI or the Developer Console.

Step 2: Define the Component Markup

Open the "DynamicFieldSet" component file and replace the existing code with the following markup:

<template>

  <lightning-record-edit-form object-api-name={objectApiName}>

    <template for:each={fieldSet} for:item="field">

      <lightning-input-field

        key={field.fieldPath}

        field-name={field.fieldPath}>

      </lightning-input-field>

    </template>

    <lightning-button variant="brand" type="submit" label="Save"></lightning-button>

  </lightning-record-edit-form>

</template>

Step 3: Define the Component JavaScript

Next, we need to define the JavaScript file for the component. Open the "DynamicFieldSet.js" file and replace the existing code with the following:

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

import { getObjectInfo } from 'lightning/uiObjectInfoApi';

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import FIELDSET_NAME from '@salesforce/schema/Object__c.FieldSetName__c';

export default class DynamicFieldSet extends LightningElement {

  @api recordId;

  @api objectApiName;

  @wire(getObjectInfo, { objectApiName: '$objectApiName' })

  objectInfo;

  @wire(getRecord, { recordId: '$recordId', fields: [FIELDSET_NAME] })

  record;

  get fieldSet() {

    const objectInfoData = this.objectInfo.data;

    const recordData = this.record.data;

    if (objectInfoData && recordData) {

      const fieldSetName = getFieldValue(recordData, FIELDSET_NAME);

      const fieldSet = objectInfoData.fieldSets[fieldSetName];

      return fieldSet.fields;

    }

    return [];

  }

}

Step 4: Use the DynamicFieldSet Component

Now that we have created the DynamicFieldSet component, we can use it in other components or pages to render the fields dynamically based on a field set.

In your desired parent component or page, include the DynamicFieldSet component using the following code:

<template>

  <c-dynamic-field-set

    record-id={recordId}

    object-api-name="Object__c">

  </c-dynamic-field-set>

</template>

Make sure to replace "Object__c" with the appropriate API name of your object.

Conclusion:

In this blog, we have covered the steps required to build a fully dynamic LWC component for handling field sets in Salesforce. By leveraging Lightning Web Components, Apex, and Salesforce's UI API, we can easily create flexible and customizable forms that adapt to the configuration defined in field sets. Feel free to enhance this code further to suit your specific needs and explore additional features that LWC and Salesforce offer.

Remember to test your component thoroughly and ensure it meets your requirements before deploying it to production. Happy coding!