LWC: Dynamic Form Builder

Dynamic Form Builder

Build and render forms dynamically using Lightning Web Components and Custom Metadata — no code changes required.

📖 Project Overview

Dynamic Form Builder is a reusable Salesforce Lightning Web Component that renders forms at runtime using either:

• Custom Metadata configuration
• JSON configuration

Administrators can create, modify, reorder, validate, and manage forms without redeploying code.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Dynamic Runtime Forms	Generate forms without editing source code.
Custom Metadata Driven	Store configuration inside Salesforce metadata.
JSON Support	Render forms from inline JSON payloads.
Reusable Components	Parent orchestrator + child renderer architecture.
Dynamic Submission	Insert records using Apex Schema API.

🏗 Architecture

dynamicFormBuilder
│
├─ Loads configuration
├─ Manages validation
├─ Handles submission
├─ Emits events
│
└── dynamicFormField
      ├─ Renders correct component
      └─ Reports validity
Apex Controller
│
├─ getFormConfig()
└─ submitFormData()
Custom Metadata
│
├─ FormConfig__mdt
└─ FormFieldConfig__mdt

📁 Project Structure

dynamic-form-builder
│
├── force-app
│   └── main
│       └── default
│
├── classes
│   ├── DynamicFormBuilderController.cls
│   └── DynamicFormBuilderControllerTest.cls
│
├── lwc
│   ├── dynamicFormBuilder
│   └── dynamicFormField
│
├── customMetadata
│   ├── FormConfig
│   └── FormFieldConfig
│
└── README.md

⚙️ Supported Field Types

Text

Email

Phone

Number

Currency

Percent

Date

DateTime

Checkbox

Picklist

Lookup

Textarea

💻 Example JSON Configuration

{
"title":"Contact Intake Form",
"columns":2,
"fields":[
{
"fieldName":"LastName",
"label":"Last Name",
"type":"text",
"required":true
},
{
"fieldName":"Department",
"type":"picklist"
},
{
"fieldName":"AccountId",
"type":"lookup",
"lookupObject":"Account"
}
]
}

🚀 Quick Start

1. Deploy project to Salesforce org.
2. Open Lightning App Builder.
3. Add Dynamic Form Builder component.
4. Set Form Config Metadata Name.
5. Activate page.
6. Start rendering forms dynamically.

🧩 LWC Usage Example

<c-dynamic-form-builder
form-config-metadata-name="Contact_Intake_Form" 
target-object-api-name="Contact">
</c-dynamic-form-builder>

🔐 Benefits

• Metadata-driven UI
• No redeployment for layout changes
• Reusable architecture
• Admin-friendly configuration
• Scalable enterprise implementation

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Dynamic Form Builder provides a flexible way to build configurable forms in Salesforce using Lightning Web Components and Custom Metadata. It reduces maintenance effort and allows teams to manage form behavior directly from configuration rather than source code.

LWC: Custom Object Creator

This Salesforce project demonstrates how to create custom objects dynamically using Lightning Web Components (LWC) and Apex. It helps developers understand metadata-driven development in Salesforce.

✨ Key Features

• Create Custom Object using LWC UI
• Apex integration for metadata operations
• Reusable architecture
• Salesforce best practices implementation

📁 Project Structure

lwc-custom-object-creator/
│
├── force-app/
│   └── main/
│       └── default/
│           ├── classes/
│           │   └── CustomObjectController.cls
│           └── lwc/
│               └── customObjectCreator/
│
├── README.md
└── sfdx-project.json
    

⚙️ Apex Controller

public with sharing class CustomObjectController {

    @AuraEnabled
    public static String createCustomObject(String objectName) {
        // Logic to create custom object dynamically
        // Metadata API / Tooling API usage required
        return 'Custom Object Created: ' + objectName;
    }
}
    

💻 LWC Component Example

HTML

<template>
    <lightning-card title="Custom Object Creator">
        <lightning-input label="Object Name" onchange={handleChange}></lightning-input>
        <lightning-button label="Create Object" onclick={handleCreate}></lightning-button>
    </lightning-card>
</template>
    

JavaScript

import { LightningElement } from 'lwc';
import createCustomObject from '@salesforce/apex/CustomObjectController.createCustomObject';

export default class CustomObjectCreator extends LightningElement {

    objectName;

    handleChange(event) {
        this.objectName = event.target.value;
    }

    handleCreate() {
        createCustomObject({ objectName: this.objectName })
            .then(result => {
                console.log(result);
            })
            .catch(error => {
                console.error(error);
            });
    }
}
    

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

This project demonstrates how Salesforce developers can use LWC and Apex to build metadata-driven solutions. It is useful for learning dynamic object creation, platform APIs, and scalable architecture patterns.