Build Reusable Salesforce LWCs: Dynamic Components Guide & Examples

In enterprise Salesforce development, reusable components aren't just nice-to-have - they're essential for maintainable, scalable solutions. According to Salesforce's LWC documentation, well-architected components can reduce development time by up to 40%.

This guide goes beyond basic @api properties to show you how to build truly dynamic components using:

• Schema metadata classes
• Custom Metadata Types for configuration
• Generic SObject handling
• Real-world component patterns

Why Schema and SObject Awareness Matters

Most LWCs work with specific objects, but truly reusable components need to handle any SObject dynamically. The key is leveraging Salesforce's Schema classes:

import { getObjectInfo, getPicklistValues } from 'lightning/uiObjectInfoApi';
import OBJECT from '@salesforce/schema/Account'; // Base object, can be overridden

Real-World Example: Universal Record Viewer

Let's build a component that can display any record with its fields in a responsive layout, with configuration stored in Custom Metadata.

Component Configuration (Custom Metadata)

First, we create a Custom Metadata Type RecordViewerConfig__mdt with fields:

• ObjectAPIName__c
• FieldSetName__c
• LayoutType__c (Compact/Full/Tabbed)

Dynamic Schema Handling

import { LightningElement, wire, api } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import getRecordViewerConfig from '@salesforce/apex/RecordViewerController.getConfig';

export default class UniversalRecordViewer extends LightningElement {
    @api recordId;
    @api configName; // Name of Custom Metadata record
    
    objectInfo;
    fields = [];
    error;
    
    @wire(getObjectInfo, { objectApiName: '$objectApiName' })
    wiredObjectInfo({ error, data }) {
        if (data) {
            this.objectInfo = data;
            this.processFields();
        } else if (error) {
            this.error = error;
        }
    }
    
    @wire(getRecordViewerConfig, { configName: '$configName' })
    wiredConfig({ error, data }) {
        if (data) {
            this.objectApiName = data.ObjectAPIName__c;
            this.fieldSetName = data.FieldSetName__c;
            this.layoutType = data.LayoutType__c;
        }
    }
    
    processFields() {
        // Use Schema methods to get field details
        this.fields = Object.keys(this.objectInfo.fields).map(fieldApiName => {
            return {
                apiName: fieldApiName,
                label: this.objectInfo.fields[fieldApiName].label,
                type: this.objectInfo.fields[fieldApiName].dataType
            };
        });
    }
}

Supporting Apex Controller

public with sharing class RecordViewerController {
    @AuraEnabled(cacheable=true)
    public static RecordViewerConfig__mdt getConfig(String configName) {
        return [SELECT ObjectAPIName__c, FieldSetName__c, LayoutType__c 
                FROM RecordViewerConfig__mdt 
                WHERE DeveloperName = :configName LIMIT 1];
    }
    
    @AuraEnabled(cacheable=true)
    public static List<Schema.FieldSetMember> getFieldSetMembers(
        String objectName, String fieldSetName) {
        Schema.DescribeSObjectResult describe = Schema.describeSObjects(
            new String[]{objectName})[0];
        Schema.FieldSet fieldSet = describe.fieldSets.getMap().get(fieldSetName);
        return fieldSet.getFields();
    }
}

Advanced Example: Dynamic Form Builder

For a truly reusable form component, we need to:

1. Dynamically determine field types
2. Handle picklist values
3. Support complex layouts

import { getPicklistValues } from 'lightning/uiObjectInfoApi';

// In your component class
@wire(getPicklistValues, { 
    recordTypeId: '$objectInfo.defaultRecordTypeId', 
    fieldApiName: '$currentField' 
})
wiredPicklistValues({ error, data }) {
    if (data) {
        this.picklistValues = data.values;
    }
}

// Dynamic field type handling in template
<template for:each={fields} for:item="field">
    <template if:true={field.type === 'STRING'}>
        <lightning-input 
            type="text" 
            label={field.label} 
            value={field.value}>
        </lightning-input>
    </template>
    <template if:true={field.type === 'PICKLIST'}>
        <lightning-combobox 
            label={field.label}
            options={picklistValues}
            value={field.value}>
        </lightning-combobox>
    </template>
</template>

Performance Optimization Techniques

1. Metadata Caching: Store schema information in browser storage

   // After fetching schema
   localStorage.setItem(`schema_${objectApiName}`, JSON.stringify(objectInfo));

2. Lazy Loading: Only load fields when needed

   handleExpandSection(event) {
       if(!this.sectionLoaded) {
           this.loadFieldSet();
       }
   }

3. Bulkification: Combine multiple schema requests

Security Considerations

1. Always use with sharing in Apex controllers
2. Validate object accessibility:

   Schema.describeSObjects(new String[]{objectName})[0].isAccessible();

3. Sanitize dynamic SOQL if used

Production-Ready Implementation Checklist

• Implement error handling for missing configurations
• Add loading indicators for async operations
• Support field-level security checking
• Include unit tests covering all field types
• Document configuration options

References

1. Salesforce LWC Developer Guide
2. Schema Class Documentation
3. Dynamic Forms Trailhead

Conclusion

Building truly dynamic LWCs requires mastering Salesforce's metadata APIs and schema classes. By implementing patterns like:

• Schema-driven field discovery
• Custom Metadata configuration
• Generic SObject handling

you can create components that work across your entire org with minimal customization.

Next Steps:

• Try implementing the Universal Record Viewer in your sandbox
• Experiment with different configuration approaches
• Share your reusable components on Salesforce Stack Exchange

Found this useful?

• 📌 Share your use case in the comments!
• ♻️ Tag a #SalesforceDev friend who needs this
• 🔔 Subscribe for more LWC guides