LWC - Dependent Picklist Pair

🔗 Reusable Dependent Picklist Pair for Salesforce LWC

A reusable Lightning Web Component that automatically handles Salesforce dependent picklists with dynamic metadata, validation, accessibility, configurable labels, and zero Apex.

📖 Project Overview

Dependent Picklist Pair is a reusable Lightning Web Component designed to simplify one of the most common Salesforce UI requirements—displaying dependent picklists.

Instead of manually querying metadata, decoding validFor values, or maintaining custom mappings, this component leverages Salesforce Lightning UI APIs to automatically retrieve controlling and dependent picklist values while keeping both dropdowns synchronized.

The component is completely reusable and works with any standard or custom object supporting dependent picklists, making it an excellent building block for enterprise Lightning applications.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Native Salesforce Metadata	Uses Lightning UI API to retrieve picklist values without Apex.
Automatic Dependency Handling	Displays only valid dependent values based on the selected controlling value.
Reusable Design	Works with any standard or custom object that supports dependent picklists.
Configurable Labels	Supports custom labels, placeholders, and required indicators.
Programmatic API	Expose values, reset selections, and trigger validation from parent components.
Built-in Validation	Uses native Lightning input validation with reportValidity().
Reactive Updates	Dependent values refresh instantly whenever the controlling value changes.
Zero Apex	No custom Apex controllers or SOQL required.
SLDS Ready	Fully aligned with Salesforce Lightning Design System.
Accessibility	Keyboard-friendly and screen-reader compatible.

🏗 Component Architecture

📁 Project Structure

force-app/
└── main/
    └── default/
        └── lwc/
            ├── dependentPicklistPair/
            │   ├── dependentPicklistPair.html
            │   ├── dependentPicklistPair.js
            │   ├── dependentPicklistPair.css
            │   └── dependentPicklistPair.js-meta.xml
            │
            └── dependentPicklistDemo/

⚙️ Public API

Property	Description
objectApiName	Salesforce object API name.
recordTypeId	Record Type used for metadata retrieval.
controllingFieldApiName	API name of the controlling picklist.
dependentFieldApiName	API name of the dependent picklist.
required	Marks both fields as mandatory.
disabled	Disables user interaction.

🔄 Component Workflow

Load Component
      │
      ▼
Retrieve Object Metadata
      │
      ▼
Load Picklist Values
      │
      ▼
Render Controlling Picklist
      │
      ▼
User Selects Value
      │
      ▼
Filter Valid Dependent Values
      │
      ▼
Render Updated Dependent Picklist

🛠 Public Methods

• getValue() — Returns current controlling and dependent selections.
• setValue() — Programmatically update selected values.
• reset() — Clears both picklists.
• reportValidity() — Executes Lightning validation.
• focus() — Moves focus to the controlling picklist.

🎯 Business Use Cases

• Account Address Forms
• Lead Qualification
• Case Classification
• Product Configuration
• Service Request Forms
• Opportunity Management
• Experience Cloud Registration
• Dynamic Record Creation Wizards
• Reusable Enterprise Form Libraries

♿ Accessibility

• Keyboard navigation support.
• Native Lightning validation.
• Screen-reader compatible.
• SLDS-compliant styling.
• Responsive layout.

🚀 Deployment

sf org login web --alias myOrg

sf project deploy start \
--source-dir force-app \
--target-org myOrg

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

The Dependent Picklist Pair component offers a clean, reusable, and metadata-driven approach to implementing dependent picklists in Salesforce. By leveraging the Lightning UI API, it eliminates the need for Apex, automatically synchronizes controlling and dependent values, and provides a flexible API that can be reused across forms, record pages, Experience Cloud sites, and enterprise Lightning applications.

LWC - Multi-Step Wizard

🧭 Multi-Step Wizard – Reusable Salesforce LWC

A reusable, slot-based Lightning Web Component that simplifies building multi-step forms with progress indicators, validation, navigation controls, review pages, and an imperative API—all using native Salesforce Lightning Web Components.

📖 Project Overview

Multi-Step Wizard is a production-ready Lightning Web Component that provides a complete wizard framework for Salesforce applications. Instead of building step navigation and validation logic repeatedly, developers simply define the steps and provide their own form fields while the component manages the workflow.

The wizard is completely domain-agnostic, making it suitable for any business process including record creation, onboarding, registration forms, approval workflows, surveys, checkout experiences, and guided configuration screens.

Built using native Lightning Web Components, the solution includes configurable progress indicators, automatic per-step validation, review pages, reusable step wrappers, and a clean JavaScript API for complete programmatic control.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Progress Indicator	Supports both Base (numbered) and Path (chevron) progress styles.
Step Validation	Automatically validates inputs exposing reportValidity() before advancing.
Back & Next Navigation	Built-in Previous, Next and Finish buttons.
Review Step	Create a final confirmation page before submission.
Slot-Based Design	Embed any Lightning components or HTML inside wizard steps.
Imperative API	Includes next(), previous(), goToStep(), reset() and reportValidity().
Custom Events	Dispatches stepchange and complete events.
Reusable	Works with any Salesforce object or business process.

🏗 Component Architecture

📁 Project Structure

force-app/main/default/
│
├── classes
│   ├── WizardController.cls
│   └── WizardControllerTest.cls
│
└── lwc
    ├── multiStepWizard
    ├── wizardStep
    └── wizardDemo

⚙️ Component Attributes

Attribute	Purpose
progress-type	Choose base or path progress indicator.
hide-progress-indicator	Hide the step indicator.
hide-footer	Hide built-in navigation buttons.
allow-step-navigation	Allow users to revisit completed steps.
previous-label	Custom Previous button text.
next-label	Custom Next button text.
finish-label	Custom Finish button text.

🛠 Imperative API

• next() — Validate current step and move forward.
• previous() — Navigate to the previous step.
• goToStep(name) — Jump directly to a named step.
• reset() — Reset the wizard to the first step.
• reportValidity() — Trigger validation for the active step.

📡 Events

Event	Description
stepchange	Raised whenever the active wizard step changes.
complete	Raised after the user finishes the final step.

🔄 Wizard Flow

Start Wizard
      │
      ▼
Step 1
      │
Validate
      ▼
Step 2
      │
Validate
      ▼
Step 3
      │
      ▼
Review
      │
      ▼
Complete Event
      │
      ▼
Save Business Data

🎯 Business Use Cases

• Customer Registration
• Lead Qualification
• Contact Creation
• Employee Onboarding
• Insurance Applications
• Loan Processing
• Case Intake Forms
• Checkout & Payment Flows
• Approval Processes
• Survey Applications

🚀 Deployment

sf org login web --alias myOrg

sf project deploy start \
--source-dir force-app \
--target-org myOrg

sf apex run test \
--class-names WizardControllerTest

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

The Multi-Step Wizard provides a clean, reusable foundation for creating guided user experiences in Salesforce. With configurable progress indicators, automatic validation, slot-based content, review screens, an imperative JavaScript API, and custom events, it enables developers to build scalable wizard-driven applications while keeping business logic separate from navigation and presentation.

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.