LWC: Salesforce Field Set Renderer

Dynamically render Salesforce Field Sets in Lightning Web Components without hardcoding field names.

📖 Overview

Field Set Renderer is a reusable Salesforce Lightning Web Component that reads a named Field Set through Apex and dynamically renders fields at runtime. This approach eliminates hardcoded field references and allows administrators to control the UI simply by updating the Field Set configuration.

🔗 View Source Code ⬇ Download ZIP

✨ Features

Feature	Description
Zero Hardcoded Fields	Field list is driven entirely by Field Set metadata.
View & Edit Modes	Supports both lightning-record-view-form and lightning-record-edit-form.
FLS Aware	Automatically respects field-level security permissions.
Required Validation	Supports Field Set required and database required fields.
Configurable Layout	Supports one-column and two-column layouts.
Lightning App Builder Ready	Fully configurable through App Builder properties.

🏗 Architecture

FieldSetService.cls
        │
        ▼
Reads FieldSet Metadata
        │
        ▼
fieldSetRenderer (Reusable LWC)
        │
        ▼
View Mode / Edit Mode
        │
        ▼
Dynamic Salesforce Record Forms

📁 Project Structure

salesforce-fieldset-renderer
│
├── force-app
│   └── main
│       └── default
│           ├── classes
│           │   ├── FieldSetService.cls
│           │   └── FieldSetServiceTest.cls
│           │
│           └── lwc
│               ├── fieldSetRenderer
│               └── fieldSetRendererDemo
│
├── README.md
└── sfdx-project.json

⚙️ Apex Service Example

public with sharing class FieldSetService {

    public class FieldSetField {
        @AuraEnabled public String label;
        @AuraEnabled public String apiName;
        @AuraEnabled public String fieldType;
        @AuraEnabled public Boolean required;
        @AuraEnabled public Boolean editable;
    }

    @AuraEnabled(cacheable=true)
    public static List<FieldSetField> getFieldSetFields(
        String objectApiName,
        String fieldSetName
    ) {
        // Reads FieldSet metadata dynamically
    }
}

💻 LWC Usage Example

<c-field-set-renderer
    record-id={recordId}
    object-api-name="Contact"
    field-set-name="Contact_Overview"
    mode="view"
    columns="2"
    onrecordsave={handleSave}
    oncancel={handleCancel}>
</c-field-set-renderer>

🎯 Public API

Property	Description
recordId	Salesforce record Id.
objectApiName	API name of SObject.
fieldSetName	Developer name of Field Set.
mode	View or Edit mode.
columns	1 or 2 column layout.

🚀 Deployment

sf org login web -a myOrg

sf project deploy start \
--source-dir force-app \
-o myOrg

🔒 Security & Permissions

• Uses with sharing to respect record-level security.
• Respects Field-Level Security (FLS).
• Editable fields are automatically determined using Salesforce permissions.
• Supports required field enforcement.

✅ Benefits

• Reduces maintenance effort.
• Admin-controlled UI configuration.
• Reusable across multiple Salesforce objects.
• Improves scalability and flexibility.
• Ideal for dynamic forms and metadata-driven applications.

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Salesforce Field Set Renderer is a powerful reusable Lightning Web Component that dynamically renders fields based on Field Set metadata. By eliminating hardcoded field references, it enables administrators to manage layouts without code changes while maintaining security, flexibility, and scalability.