Dynamic Input Form from fieldsets with Lightning Component Salesforce

Following component will useful when you want to display the form fields by reading dynamically from the field sets and the following code supporting saving multiple records at a time.

	<aura:component controller="DynamicInputForm">
	<aura:attribute name="objectApiName" type="String" default="contact" description="Accepts object Api name as input"/>
	<aura:attribute name="fieldSetName" type="String" default="ContactFieldSet" description="Accepts Fieldset Name as input"/>
	<aura:attribute name="records" type="SObject[]" description="holds the record instances to input"/>
	<aura:attribute name="fields" type="List" description="holds the fields to show"/>
	<aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
	{!v.body}
	<br/>
	<button class="slds-button slds-button_brand" onclick="{!c.save}">Submit</button>
	</aura:component>

view raw DynamicInputForm.cmp hosted with ❤ by GitHub

	({
	onInit : function(cmp, event, helper) {
	var type = cmp.get("v.objectApiName");
	var fsName = cmp.get("v.fieldSetName");
	var action = cmp.get("c.fetchFieldsInfo");
	action.setParams({
	'objApiName':type,
	'fieldSetName':fsName
	});
	action.setCallback(this,function(res) {
	var state = res.getState();
	var response = res.getReturnValue();
	if(state == 'SUCCESS') {
	alert(JSON.stringify(response["fields"]));
	cmp.set("v.fields",response["fields"]);
	cmp.set("v.records",response["records"]);
	helper.createForm(cmp, event);
	}
	else {
	alert(state);
	}
	});
	$A.enqueueAction(action);
	},
	save : function(cmp, event, helper) {
	var result = cmp.get("v.records");
	for(var i=0;i<result.length;i++) {
	result[i].SobjectType = cmp.get("v.objectApiName");
	result[i].LastName = 'ABC'; //for contact hard coding
	}
	debugger;
	var action = cmp.get("c.saveForm");
	action.setParams({
	records: JSON.stringify(result)
	});
	action.setCallback(this,function(res) {
	var state = res.getState();
	var response = res.getReturnValue();
	if(state == 'SUCCESS') {
	console.log('success.');
	}
	else {
	alert(state);
	}
	});
	$A.enqueueAction(action);
	}
	})

view raw DynamicInputFormController.js hosted with ❤ by GitHub

	({
	configMap: {
	'anytype': { componentDef: 'ui:inputText', attributes: {} },
	'base64': { componentDef: 'ui:inputText', attributes: {} },
	'boolean': {componentDef: 'ui:inputCheckbox', attributes: {} },
	'combobox': { componentDef: 'ui:inputText', attributes: {} },
	'currency': { componentDef: 'ui:inputText', attributes: {} },
	'datacategorygroupreference': { componentDef: 'ui:inputText', attributes: {} },
	'date': {
	componentDef: 'ui:inputDate',
	attributes: {
	displayDatePicker: true,
	format: 'MM/dd/yyyy'
	}
	},
	'datetime': { componentDef: 'ui:inputDateTime', attributes: {} },
	'double': { componentDef: 'ui:inputNumber', attributes: {} },
	'email': { componentDef: 'ui:inputEmail', attributes: {} },
	'encryptedstring': { componentDef: 'ui:inputText', attributes: {} },
	'id': { componentDef: 'ui:inputText', attributes: {} },
	'integer': { componentDef: 'ui:inputNumber', attributes: {} },
	'multipicklist': { componentDef: 'ui:inputText', attributes: {} },
	'percent': { componentDef: 'ui:inputNumber', attributes: {} },
	'phone': { componentDef: 'ui:inputPhone', attributes: {} },
	'picklist': { componentDef: 'ui:inputText', attributes: {} },
	'reference': { componentDef: 'ui:inputText', attributes: {} },
	'string': { componentDef: 'ui:inputText', attributes: {} },
	'textarea': { componentDef: 'ui:inputText', attributes: {} },
	'time': { componentDef: 'ui:inputDateTime', attributes: {} },
	'url': { componentDef: 'ui:inputText', attributes: {} }
	},
	createForm : function(cmp,event) {
	debugger;
	console.log('createForm');
	var fields = cmp.get('v.fields');
	var records = cmp.get("v.records");
	var inputDesc = [];
	for(var j = 0; j < records.length; j++) {
	for (var i = 0; i < fields.length; i++) {
	var field = fields[i];
	console.log('field: '+JSON.stringify(field));
	var type = field.dataType.toLowerCase();
	var configTemplate = this.configMap[type];
	console.log('fld type: '+type);
	console.log('configTemplate: '+JSON.stringify(configTemplate));
	var config = JSON.parse(JSON.stringify(configTemplate));
	config.attributes.label = field.label;
	config.attributes.value = cmp.getReference(' v.records[' + j + '].' + field.apiName);
	config.attributes.fieldPath = field.apiName;
	inputDesc.push([
	config.componentDef,
	config.attributes
	]);
	}
	}
	var fldsLen = inputDesc.length;
	for(var i = 0; i<records.length; i++) {
	inputDesc.push(["ul",{
	"class" : "slds-grid slds-page-header__detail-row"
	}]);
	}
	for(var i = 0; i<fldsLen; i++) {
	inputDesc.push(["li",{
	"class" : "slds-page-header__detail-block"
	}]);
	}
	$A.createComponents(inputDesc, function(cmps) {
	console.log('createComponents');
	console.log(cmps.length);
	debugger;
	var cmpsDupe = [];
	for(var i = 0; i<fldsLen; i++) {
	cmps[fldsLen + i + records.length].set("v.body", cmps[i]);
	cmpsDupe.push(cmps[fldsLen + i + records.length]);
	}
	var size = fields.length;
	var chunkedArr = [];
	var noOfChunks = Math.ceil(cmpsDupe.length/size);
	console.log(noOfChunks);
	for(var i=0; i<noOfChunks; i++){
	chunkedArr.push(cmpsDupe.slice(i*size, (i+1)*size));
	}
	var final = [];
	for(var i=0;i<records.length;i++) {
	cmps[fldsLen+i].set("v.body", chunkedArr[i]);
	final.push(cmps[fldsLen+i]);
	}
	cmp.set('v.body', final);
	});
	}
	})

view raw DynamicInputFormHelper.js hosted with ❤ by GitHub

	public class DynamicInputForm {
	@AuraEnabled
	public static Map<String,Object> fetchFieldsInfo(String objApiName, String fieldSetName) {
	Map<String,Object> contrlRes = new Map<String,Object>{
	'fields' => null
	};
	List<FieldsInfo> fldsInfoLst = new List<FieldsInfo>();
	for(Schema.FieldSetMember fsm : Schema.getGlobalDescribe().get(objApiName).getDescribe().FieldSets.getMap().get(fieldSetName).getFields()) {
	fldsInfoLst.add(new FieldsInfo(fsm.getLabel(),fsm.getFieldPath(),fsm.getType().Name()));
	}
	contrlRes.put('fields',fldsInfoLst);
	system.debug('**'+getObjInstances(objApiName));
	contrlRes.put('records',getObjInstances(objApiName));
	return contrlRes;
	}
	public static List<Sobject> getObjInstances(String objApiName) {
	return new List<Sobject>{Schema.getGlobalDescribe().get(objApiName).newSObject(),Schema.getGlobalDescribe().get(objApiName).newSObject()};
	}
	@AuraEnabled
	public static String saveForm(String records) {
	system.debug('entering save...');
	try {
	insert convertJsonToSobjectLst(records);
	}
	catch(Exception e) {
	system.debug('Exception: '+e.getMessage());
	}
	return null;
	}
	public static List<Sobject> convertJsonToSobjectLst(String json) {
	List<object> objects = (List<object>)System.JSON.deserializeUntyped(json);
	List<SObject> sobjRecordsLst = new List<SObject>();
	for (Object obj : objects) {
	Map<String, Object> m = (Map<String, Object>)obj;
	String key = (String)m.get('SobjectType');
	key = key.toLowerCase();
	Schema.SObjectType targetType = Schema.getGlobalDescribe().get(key);
	SObject sObj = targetType.newSObject();
	Map<String, Schema.SObjectField> fields = targetType.getDescribe().fields.getMap();
	for (String fieldName : m.keySet()) {
	// Filter out any psuedo fields such as LastNameLocal
	Schema.SObjectField fld = fields.get(fieldName);
	if (fld != null) {
	if (fld.getDescribe().isCreateable() && fld.getDescribe().isUpdateable()) {
	sObj.put(fieldName, m.get(fieldName));
	}
	}
	}
	sobjRecordsLst.add(sObj);
	}
	return sobjRecordsLst;
	}
	public class FieldsInfo {
	@AuraEnabled
	public String label, apiName, dataType;
	public FieldsInfo(String label, String apiName, String dataType) {
	this.label = label;
	this.apiName = apiName;
	this.dataType = dataType;
	}
	}
	}

view raw DynamicInputForm.cls hosted with ❤ by GitHub

Reference:
http://metillium.com/2017/08/lightning-field-set-form-component/