Show sObject Fields Dynamically in Lightning Component

Hello guys, In today's post, I will provide a code sample that helps you to display sobject fields and it's properties in lightning component or visualforce page. This code pick all meta-data of object that you passed as parameter and return a json object.

Dynamically expose fields of sobject in lightning component

In below example, I have used single object(Account). But you can pass multiple objects as parameter in apex method. It will return sobject wise json data.

Utility.apxc

 public class Utility {
    public static String getDescribedObjects(List<String> lstSObjectType) {        
        Map<String, SObjectType> globalDescribe = Schema.getGlobalDescribe(); 
        String allObjJSON = '{';
        for( String sObjectType : lstSObjectType ) {
            if( allObjJSON != '{' ) 
                allObjJSON += ', ';
            allObjJSON += '"' + sObjectType + '": ';
            DescribeSObjectResult describeResult = globalDescribe.get(sObjectType).getDescribe();
            Map<String, Schema.SObjectField> desribedFields = describeResult.fields.getMap();
            String objJSON = '{';            
            for( String fieldName :  desribedFields.keySet() ) {                
                Schema.SObjectField field = desribedFields.get( fieldName );
                Schema.DescribeFieldResult f = field.getDescribe();	   
                if( objJSON != '{' )
                    objJSON += ', ';                
                objJSON += '"' + f.getName() + '": ' + '{"label" : "' + f.getLabel() + '","Type" : "' + f.getType() + '","helptext" : "' + f.getInlineHelpText() + '"';			             
                if( field.getDescribe().getType() == Schema.DisplayType.PICKLIST ){                    
                    List <Schema.PicklistEntry> picklistValues = field.getDescribe().getPickListValues();
                    List<String> pickListOptions = new List<String>();
                    pickListOptions.add('{ "label": "–None–", "value": null }');                    
                    for (Schema.PicklistEntry pe : picklistValues) {                        
                        pickListOptions.add('{ "label": "' + pe.getLabel() + '", "value": "' + pe.getValue() + '" }');                        
                    }
                    objJSON += ', "picklistOptions": [' + String.join(pickListOptions, ', ') + ']';   
                }
                objJSON += '}';
            }
            objJSON += '}';            
            allObjJSON += objJSON;
        }
        allObjJSON += '}';
        return allObjJSON;
    }
 }

DynamicFieldHandler.apxc

 public class DynamicFieldHandler {
    @AuraEnabled
    public static String getObjectType() {
        //pass multiple objects like new List<String>{'Account','Contact','Opportunity'}
        return Utility.getDescribedObjects(new List<String>{'Account'});    
    }
 }

DynamicFieldComponent.cmp

 <aura:component controller="DynamicFieldHandler">
    <aura:attribute name="ObjectType" type="Object"/>   
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:layout>
        <lightning:layoutItem padding="around-small">
            <lightning:input aura:id="name" label="{!v.ObjectType.Account.Name.label}" type="text" value=""/>
        </lightning:layoutItem>            
        <lightning:layoutItem padding="around-small">
            <lightning:select aura:id="type" label="{!v.ObjectType.Account.Type.label}" value="">
                <aura:iteration items="{!v.ObjectType.Account.Type.picklistOptions}" var="option">
                    <option value="{!option.value}" text="{!option.label}"/>
                </aura:iteration>
            </lightning:select>
        </lightning:layoutItem>             
        <lightning:layoutItem padding="around-small">
            <lightning:input aura:id="phone" type="phone" label="{!v.ObjectType.Account.Phone.label}" value=""/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
             <lightning:input aura:id="accountnumber" type="text" fieldLevelHelp="{!v.ObjectType.Account.AccountNumber.helptext}" label="{!v.ObjectType.Account.AccountNumber.label}" value=""/>
        </lightning:layoutItem>
    </lightning:layout>
 </aura:component>

DynamicFieldController.js

 ({
    doInit : function(component, event, helper) {
        let action = component.get("c.getObjectType");
        action.setCallback( helper, function( response ) {            
            if (component.isValid() && response.getState() === 'SUCCESS') {
                component.set( 'v.ObjectType', JSON.parse( response.getReturnValue() ) );
                console.table(JSON.parse( response.getReturnValue())); 
            } 
            else{                
                console.error( 'Error calling action "' + actionName + '" with state: ' + response.getState() );
            }
        });
        $A.enqueueAction(action);
    }
 })

Output:

 

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.