LWC: 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.