How to use fieldsets with Lightning?

Question

Been trying to figure out how to create a salesforce Lightning input form, based on fields from a fieldset. As an aura enabled apex method is not allowed to pass an entire fieldset I tried by reforming it to a JSON string myself.

It kinda works but doesnt feel like I am doing it the right way at all. Anyone can tell what the proper way to display fields from a fieldset in Lightning is ?

Component:

< aura:component controller="ns.myController" >
  < aura:handler name="init" value="{!this}" action="{!c.getForm}" />
    <div class="fields">        
        <form aura:id="myForm">
        </form>
    </div>    
< /aura:component>

Clientside controller:

getForm : function(component) {
    var action = component.get("c.getFieldSet");  
    var self = this;
    var inputOutput = 'input';
    action.setCallback(this, function(a) {
        var jsonFieldset = JSON.parse(a.getReturnValue());
        for(var x=0,xlang=jsonFieldset.length;x<xlang;x++){
            fieldDef = jsonFieldset[x]; 
            this.createField(component,fieldDef.label,inputOutput+fieldDef.type,fieldDef.name,fieldDef.required);
        }
    });
    $A.enqueueAction(action);
},

createField : function(component,fieldName,fieldType,fieldId,fieldRequired) {
    $A.componentService.newComponentAsync(this,
       function(newField){                                                                        
            myForm = component.find('myForm');
            var body = myForm.get("v.body");  
            body.push(newField);                                
            myForm.set("v.body",body);
        },
        {
            "componentDef": "markup://ui:"+fieldType,
            "localId": "fieldId",
            "attributes": {
                "values": { label: fieldName,
                           displayDatePicker:true,
                           required:fieldRequired
                          }
            }
        }
    );
}

Serverside controller:

static Map<String,String> auraTypes {get; set;}

public static Map<String,String> getAuraTypes() {
    if(auraTypes!=null) {
        return auraTypes;
    }
    else {
        auraTypes = new Map<String,String>();
        auraTypes.put('BOOLEAN','Checkbox');
        auraTypes.put('DATE','Date');
        auraTypes.put('DATETIME','DateTime');
        auraTypes.put('EMAIL','Email');
        auraTypes.put('NUMBER','Number');
        auraTypes.put('PHONE','Phone');
        auraTypes.put('STRING','Text');            
    }
    return auraTypes;
}


@AuraEnabled    
public static String getFieldSet() {
    String result = '';
    List<Schema.FieldSetMember> fieldset =  SObjectType.Kandidaat__c.FieldSets.formulier.getFields();
    for(Schema.FieldSetMember f : fieldset) {
        if(result!=''){
            result += ',';
        }
        String jsonPart = '{';
        jsonPart += '"label":"'+f.getLabel()+'",';
        jsonPart += '"required":"'+(f.getDBRequired() || f.getRequired())+'",';
        jsonPart += '"type":"'+getAuraTypes().get((f.getType()+'')) +'",';
        jsonPart += '"name":"'+f.getFieldPath()+'"';
        jsonPart += '}';
        result +=jsonPart;
    }
    return '['+result+']';
}

Answer 1

As Doug states, I started looking into this, and ended up with a bigger test/demo/etc. than I originally planned. I took the "wrapper" class approach, starting with an AuraEnabled version of FieldSetMember in FieldSetMember.apx:

public class FieldSetMember {

    public FieldSetMember(Schema.FieldSetMember f) {
        this.DBRequired = f.DBRequired;
        this.fieldPath = f.fieldPath;
        this.label = f.label;
        this.required = f.required;
        this.type = '' + f.getType();
    }

    public FieldSetMember(Boolean DBRequired) {
        this.DBRequired = DBRequired;
    }

    @AuraEnabled
    public Boolean DBRequired { get;set; }

    @AuraEnabled
    public String fieldPath { get;set; }

    @AuraEnabled
    public String label { get;set; }

    @AuraEnabled
    public Boolean required { get;set; }

    @AuraEnabled
    public String type { get; set; }
}

This is used in FieldSetController.apxc, which can do things like a) get the names of object types that have field sets and b) get the fields for the field set as a list of FieldSetMember:

public class FieldSetController {

    @AuraEnabled
    public static List<String> getTypeNames() {
        Map<String, Schema.SObjectType> types = Schema.getGlobalDescribe();
        List<String> typeNames = new List<String>();
        String typeName = null;
        List<String> fsNames;
        for (String name : types.keySet()) {
            if (hasFieldSets(name)) {
                typeNames.add(name);        
            }
        }
        return typeNames;
    }

    @AuraEnabled
    public static Boolean hasFieldSets(String typeName) {
        Schema.SObjectType targetType = Schema.getGlobalDescribe().get(typeName);
        Schema.DescribeSObjectResult describe = targetType.getDescribe();
        Map<String, Schema.FieldSet> fsMap = describe.fieldSets.getMap();
        return !fsMap.isEmpty();
    }

    @AuraEnabled
    public static List<String> getFieldSetNames(String typeName) {
        Schema.SObjectType targetType = Schema.getGlobalDescribe().get(typeName);
        Schema.DescribeSObjectResult describe = targetType.getDescribe();
        Map<String, Schema.FieldSet> fsMap = describe.fieldSets.getMap();
        List<String> fsNames = new List<String>();
        for (String name : fsMap.keySet()) {
            fsNames.add(name);
        }
        return fsNames;
    }

    @AuraEnabled
    public static List<FieldSetMember> getFields(String typeName, String fsName) {
        Schema.SObjectType targetType = Schema.getGlobalDescribe().get(typeName);
        Schema.DescribeSObjectResult describe = targetType.getDescribe();
        Map<String, Schema.FieldSet> fsMap = describe.fieldSets.getMap();
        Schema.FieldSet fs = fsMap.get(fsName);
        List<Schema.FieldSetMember> fieldSet = fs.getFields();
        List<FieldSetMember> fset = new List<FieldSetMember>();
        for (Schema.FieldSetMember f: fieldSet) {
            fset.add(new FieldSetMember(f));
        }
        return fset;
    }
}

The controller is used in fsTest.cmp

<aura:component implements="force:appHostable" controller="aotp1.FieldSetController">
    <aura:attribute name="values" type="Object[]"/>
    <aura:attribute name="form" type="Aura.Component[]"/>
    <aura:attribute name="types" type="String[]"/>
    <aura:attribute name="type" type="String" default="NA"/>
    <aura:attribute name="fsNames" type="String[]"/>
    <aura:attribute name="fsName" type="String" default="NA"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <div class="container">
        <div class="row">
            <div class="section">
                <div class="title">
                    <a href="javascript:void(0);" onclick="{!c.doGetTypeNames}" class="refresh">&#x21bb;</a>
                    SObjects with FieldSets
                </div>
                <dl class="cell list">
                    <aura:iteration items="{!v.types}" var="type">
                        <dd><a href="javscript:void(0);" onclick="{!c.doSelectType}" name="{!type}">{!type}</a></dd>
                    </aura:iteration>
                </dl>
            </div>
            <div class="section">
                <div class="title">
                    FieldSet Names for {!v.type}
                </div>
                <dl class="cell list">
                    <aura:iteration items="{!v.fsNames}" var="name">
                        <dd><a href="javscript:void(0);" onclick="{!c.doSelectFieldSet}" name="{!name}">{!name}</a></dd>
                    </aura:iteration>
                </dl>
            </div>
        </div>
        <div class="row">
            <div class="section">
                <div class="title">
                    Form for {!v.type} with {!v.fsName} fieldset
                </div>
                <div class="controls">
                    <ui:button label="Test Submit" press="{!c.doSubmit}"/>
                </div>
                <div class="cell form">
                    {!v.form}                    
                </div>
            </div>
            <div class="section">
                <div class="title">
                    Data Binding for {!v.type} with {!v.fsName} fieldset
                </div>
                <div class="cell test">
                    <aura:iteration items="{!v.values}" var="item">
                        <div>
                            <span>{!item.name}</span>: <span>{!item.value}</span>
                        </div>
                    </aura:iteration>
                </div>
            </div>
        </div>        
    </div>
</aura:component>

The associated controller, fsTesdtController.js, mainly handles events:

({
    doInit: function(component, event, helper) {
        //helper.getFields(component, event);
    },

    doGetTypeNames: function(component, event, helper) {
        helper.getTypeNames(component, event);
    },

    doSelectType: function(component, event, helper) {
        var type = event.target.getAttribute("name");
        helper.selectType(component, type);
    },

    doSelectFieldSet: function(component, event, helper) {
        var fsName = event.target.getAttribute("name");
        helper.selectFieldSet(component, fsName);
    },

    doSubmit: function(component, event, helper) {
        helper.submitForm(component, event);
    }
})

The helper, fsTestHelper.js, constructs the UI to display the objects with fields sets, the field sets for the selected object, a generated form, and a test area to demonstrate data-binding:

({

    /*
     *  Map the Schema.FieldSetMember to the desired component config, including specific attribute values
     *  Source: https://www.salesforce.com/us/developer/docs/apexcode/index_Left.htm#CSHID=apex_class_Schema_FieldSetMember.htm|StartTopic=Content%2Fapex_class_Schema_FieldSetMember.htm|SkinName=webhelp
     *
     *  Change the componentDef and attributes as needed for other components
     */
    configMap: {
        "anytype": { componentDef: "markup://ui:inputText" },
        "base64": { componentDef: "markup://ui:inputText" },
        "boolean": {componentDef: "markup://ui:inputCheckbox" },
        "combobox": { componentDef: "markup://ui:inputText" },
        "currency": { componentDef: "markup://ui:inputText" },
        "datacategorygroupreference": { componentDef: "markup://ui:inputText" },
        "date": { componentDef: "markup://ui:inputDate" },
        "datetime": { componentDef: "markup://ui:inputDateTime" },
        "double": { componentDef: "markup://ui:inputNumber", attributes: { values: { format: "0.00"} } },
        "email": { componentDef: "markup://ui:inputEmail" },
        "encryptedstring": { componentDef: "markup://ui:inputText" },
        "id": { componentDef: "markup://ui:inputText" },
        "integer": { componentDef: "markup://ui:inputNumber", attributes: { values: { format: "0"} } },
        "multipicklist": { componentDef: "markup://ui:inputText" },
        "percent": { componentDef: "markup://ui:inputNumber", attributes: { values: { format: "0"} } },
        "picklist": { componentDef: "markup://ui:inputText" },
        "reference": { componentDef: "markup://ui:inputText" },
        "string": { componentDef: "markup://ui:inputText" },
        "textarea": { componentDef: "markup://ui:inputText" },
        "time": { componentDef: "markup://ui:inputDateTime", attributes: { values: { format: "h:mm a"} } },
        "url": { componentDef: "markup://ui:inputText" }
    },

    // Adds the component via newComponentAsync and sets the value handler
    addComponent: function(component, facet, config, fieldPath) {
        $A.componentService.newComponentAsync(this, function(cmp) {
            cmp.addValueHandler({
                value: "v.value",
                event: "change",
                globalId: component.getGlobalId(),
                method: function(event) {
                    var values = component.get("v.values");
                    for (var i = 0; i < values.length; i++) {
                        if (values[i].name === fieldPath) {
                            values[i].value = event.getParams().value;
                        }
                    }
                    component.set("v.values", values);
                }
            });

            facet.push(cmp);
        }, config);
    },

    // Create a form given the set of fields
    createForm: function(component, fields) {
        var field = null;
        var cmp = null;
        var def = null;
        var config = null;
        var self = this;

        // Clear any existing components in the form facet
        component.set("v.form", []);

        var facet = component.getValue("v.form");
        var values = [];
        for (var i = 0; i < fields.length; i++) {
            field = fields[i];
            // Copy the config, note that this type of copy may not work on all browsers!
            config = JSON.parse(JSON.stringify(this.configMap[field.type.toLowerCase()]));
            // Add attributes if needed
            config.attributes = config.attributes || {};
            // Add attributes.values if needed
            config.attributes.values = config.attributes.values || {};

            // Set the required and label attributes
            config.attributes.values.required = field.required;
            config.attributes.values.label = field.label;

            // Add the value for each field as a name/value            
            values.push({name: field.fieldPath, value: undefined});

            // Add the component to the facet and configure it
            self.addComponent(component, facet, config, field.fieldPath);
        }
        component.set("v.values", values);
    },

    getTypeNames: function(component, event) {
        var action = component.get("c.getTypeNames");
        action.setParams({})
        action.setCallback(this, function(a) {
            var types = a.getReturnValue();
            component.set("v.types", types);
        });
        $A.enqueueAction(action);        
    },

    selectType: function(component, type) {
        component.set("v.type", type);
        this.getFieldSetNames(component, type);
    },

    getFieldSetNames: function(component, typeName) {
        var action = component.get("c.getFieldSetNames");
        action.setParams({typeName: typeName});
        action.setCallback(this, function(a) {
            var fsNames = a.getReturnValue();
            component.set("v.fsNames", fsNames);
        });
        $A.enqueueAction(action);        
    },

    selectFieldSet: function(component, fsName) {
        component.set("v.fsName", fsName);
        this.getFields(component);
    },

    getFields: function(component) {
        var action = component.get("c.getFields");
        var self = this;
        var typeName = component.get("v.type");
        var fsName = component.get("v.fsName");
        action.setParams({typeName: typeName, fsName: fsName});
        action.setCallback(this, function(a) {
            var fields = a.getReturnValue();
            component.set("v.fields", fields);
            self.createForm(component, fields);
        });
        $A.enqueueAction(action);        
    },

    submitForm: function(component, event) {
        var values = component.get("v.values");
        var s = JSON.stringify(values, undefined, 2);
        alert(s);
    }
})

And a bit of CSS to make it a bit nicer in fsTest.css:

.THIS.container {
    margin: 10px auto;
    width: 100%;
    outline: 1px solid #C0C0C0;
}

.THIS .row {
    width: 100%;
    white-space: nowrap;
}

.THIS .section {
    outline: 1px solid #A0A0A0;
    width: 50%;
    display: inline-block;
    vertical-align: top;
    overflow: none;
    position: relative;
}

.THIS .section .title {
    padding: 4px;
    border-bottom: 1px solid #A0A0A0;
    background: #F0F0F0;
}

.THIS .section .list dd {
    padding: 4px;
    border-bottom: 1px solid #A0A0A0;
    background: #FAFAFA;
}

.THIS .section .cell {
    height: 200px;
    overflow: auto;
}

.THIS .section .controls {
    position: absolute;
    right: 0px;
    top: 0px;
}

.THIS .section .controls .uiButton {
    margin: 1px 5px;
    padding: 2px;
    font-size: 8pt;
}

.THIS .form label {
    width: 160px;
    display: inline-block;
    text-align: right;
    margin: 2px 4px;
}

The component implements force:appHostable, so it can be used in the S1 Mobile App. To use it standalone, here's fsTestApp.app:

<aura:application>
    <aotp1:fsTest/>
</aura:application>

When run, the UI looks like this:

To use it, click on the refresh/reload icon in the upper left. This can take a few seconds as the number of sobjects on a typical org is huge. If you don't have any field sets, you won't see anything in the list. If you do, any object types with field sets are listed. Clicking on the link for the object type will fetch the field sets from the server and display them on the list on the upper right. Clicking on a field set link will generate the form and test listing. Enter values and tab out/hit return to see the values change. Click the Test Submit button to see the values.

Note that there is a bug in ui:inputDate that can occur when using dynamic creation. You'll get a spinner and be blocked.

You can change the DisplayType->component mapping in the configMap in fsTestHelper.js. You could do the mapping otherwise, via code, metadata, etc., if desired.

Let me know if you have any questions. It's not a robust app, but it might provide some ideas on how to approach this.

Answer 2

Let me start with saying thank you for posting this helpful information. It helped me with learning some of Lightning's more advanced features and gave me a jumping off point.

Using @bafuda's component as a starting point, here's another field set form variation that lets one save the record back to Salesforce using an upsert. It supports adding a new record and updating an existing record where the fields to display are driven by a specified field set. This was created for my own learning purposes and recommend using other standard components that provide similar functionality first whenever possible such as the force:recordEdit component.

For more information, see my Lightning Field Set Form Component Blog Post.

Component Markup

<aura:component controller="FieldSetFormController" implements="flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName,flexipage:availableForAllPageTypes">
    <aura:attribute name="fieldSetName" type="String" description="The api name of the field set to use from the given object." />

    <aura:attribute name="record" type="SObject" description="The record the fields are bound to that is returned from the server." access="private" />    
    <aura:attribute name="fields" type="Object[]" access="private" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:handler event="force:refreshView" action="{!c.init}" />

    {!v.body}

    <lightning:button label="Save" onclick="{! c.saveForm }" />
</aura:component>

Component Controller

({
    init: function(cmp, event, helper) {
        console.log('FieldSetFormController.init');

        var fieldSetName = cmp.get('v.fieldSetName');
        var sobjectName = cmp.get('v.sObjectName');
        var recordId = cmp.get('v.recordId');

        if (!fieldSetName) {
            console.log('The field set is required.');
            return;
        }

        var getFormAction = cmp.get('c.getForm');

        getFormAction.setParams({
            fieldSetName: fieldSetName,
            objectName: sobjectName,
            recordId: recordId
        });

        getFormAction.setCallback(this, 
            function(response) {
                var state = response.getState();
                console.log('FieldSetFormController getFormAction callback');
                console.log("callback state: " + state);

                if (cmp.isValid() && state === "SUCCESS") {         
                    var form = response.getReturnValue();
                    cmp.set('v.fields', form.Fields);
                    cmp.set('v.record', form.Record);
                    helper.createForm(cmp);
                }
            }
        );
        $A.enqueueAction(getFormAction);
    },

    saveForm : function(cmp, event, helper) {
        console.log('FieldSetFormController.saveForm');

        var upsertRecordAction = cmp.get('c.upsertRecord');
        var record = cmp.get('v.record');

        if (!record.sobjectType) {
            record.sobjectType = cmp.get('v.sObjectName');
        }

        upsertRecordAction.setParams({
            recordToUpsert: record
        });

        upsertRecordAction.setCallback(this, 
            function(response) {
                var state = response.getState();

                console.log('FieldSetFormController upsertRecordAction callback');
                console.log("callback state: " + state);

                var toastEvent = $A.get("e.force:showToast");

                if (cmp.isValid() && state === "SUCCESS") {

                    toastEvent.setParams({
                        "title": "Success!",
                        "message": "The record has been upserted successfully.",
                        "type": "success"
                    });

                    toastEvent.fire();

                    $A.get('e.force:refreshView').fire();
                }
                else if (state === "ERROR") {
                    var errorMessage = response.getError()[0].message;

                    toastEvent.setParams({
                        "title": "Error",
                        "message": "The record was not saved. Error: " + errorMessage,
                        "type": "error"
                    });

                    toastEvent.fire();
                }
            }
        );
        $A.enqueueAction(upsertRecordAction);
    }
})

Component Helper

({
    /*
     *  Map the Field to the desired component config, including specific attribute values
     *  Source: https://www.salesforce.com/us/developer/docs/apexcode/index_Left.htm#CSHID=apex_class_Schema_FieldSetMember.htm|StartTopic=Content%2Fapex_class_Schema_FieldSetMember.htm|SkinName=webhelp
     *
     *  Change the componentDef and attributes as needed for other components
     */
    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) {
        console.log('FieldSetFormHelper.createForm');
        var fields = cmp.get('v.fields');
        var record = cmp.get('v.record');
        var inputDesc = [];

        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            var type = field.Type.toLowerCase();

            var configTemplate = this.configMap[type];

            if (!configTemplate) {
                console.log(`type ${ type } not supported`);
                continue;
            }

            // Copy the config so that subsequent types don't overwrite a shared config for each type.
            var config = JSON.parse(JSON.stringify(configTemplate));

            config.attributes.label = field.Label;
            config.attributes.required = field.Required;
            config.attributes.value = cmp.getReference(' v.record.' + field.APIName);
            config.attributes.fieldPath = field.APIName;

            if (!config.attributes['class']) {
                config.attributes['class'] = 'slds-m-vertical_x-small';
            }

            inputDesc.push([
                config.componentDef,
                config.attributes
            ]);
        }

        $A.createComponents(inputDesc, function(cmps) {
            console.log('createComponents');

            cmp.set('v.body', cmps);
        });
    }
})

Component Design

<design:component>
    <design:attribute name="fieldSetName" label="Field Set Name" description="API Name of the field set to use." />
    <design:attribute name="sObjectName" label="Object Name" description="API Name of the Object to use. This only needs to be populated when not on a record detail page." />
</design:component>

Apex Controller Class

public with sharing class FieldSetFormController {
    @AuraEnabled
    public static FieldSetForm getForm(Id recordId, String objectName, String fieldSetName) {
        FieldSetForm form = new FieldSetForm();

        form.Fields = getFields(recordId, objectName, fieldSetName);
        form.Record = getRecord(recordId, objectName, form.Fields);

        return form;
    }

    @AuraEnabled
    public static void upsertRecord(SObject recordToUpsert) {
        upsert recordToUpsert;
    }

    private static List<Field> getFields(Id recordId, String objectName, String fieldSetName) {
        Schema.SObjectType objectType = null;

        if (recordId != null) {
            objectType = recordId.getSobjectType();
        }
        else if (String.isNotBlank(objectName)) {
            objectType = Schema.getGlobalDescribe().get(objectName);
        }

        Schema.DescribeSObjectResult objectDescribe = objectType.getDescribe();
        Map<String, Schema.FieldSet> fieldSetMap = objectDescribe.fieldSets.getMap();
        Schema.FieldSet fieldSet = fieldSetMap.get(fieldSetName);
        List<Schema.FieldSetMember> fieldSetMembers = fieldSet.getFields();

        List<Field> fields = new List<Field>();
        for (Schema.FieldSetMember fsm : fieldSetMembers) {
            Field f = new Field(fsm);

            fields.add(f);
        }

        return fields;
    }

    private static SObject getRecord(Id recordId, String objectName, List<Field> fields) {
        if (recordId == null) {
            Schema.SObjectType objectType = Schema.getGlobalDescribe().get(objectName);
            return objectType.newSObject();
        }

        List<String> fieldsToQuery = new List<String>();
        for (Field f : fields) {
            fieldsToQuery.add(f.APIName);
        }

        Schema.SObjectType objectType = recordId.getSobjectType();
        Schema.DescribeSObjectResult objectDescribe = objectType.getDescribe();
        String objectAPIName = objectDescribe.getName();

        String recordSOQL = 'SELECT ' + String.join(fieldsToQuery, ',') +
                            '  FROM ' + objectAPIName +
                            ' WHERE Id = :recordId';

        SObject record = Database.query(recordSOQL);

        return record;
    }

    public class FieldSetForm {
        @AuraEnabled
        public List<Field> Fields { get; set; }

        @AuraEnabled
        public SObject Record { get; set; }

        public FieldSetForm() {
            Fields = new List<Field>();
        }
    }
}

Field "Wrapper" Apex Class

public class Field {

    public Field(Schema.FieldSetMember f) {
        this.DBRequired = f.DBRequired;
        this.APIName = f.fieldPath;
        this.Label = f.label;
        this.Required = f.required;
        this.Type = String.valueOf(f.getType());
    }

    public Field(Boolean DBRequired) {
        this.DBRequired = DBRequired;
    }

    @AuraEnabled
    public Boolean DBRequired { get;set; }

    @AuraEnabled
    public String APIName { get;set; }

    @AuraEnabled
    public String Label { get;set; }

    @AuraEnabled
    public Boolean Required { get;set; }

    @AuraEnabled
    public String Type { get; set; }
}

Answer 3

Here's a modified version of @Skip Saul's code that works for API version 37. This version allows binding the form field values to the 'record' JS object passed in to the component. As in @Skip Saul's version the form is dynamically created using the fields in the field set.

Example app using the component

<aura:application >
    <aura:attribute name="contact" type="Contact" default="{LastName: 'Smith'}"/>
    <ul>
        <li>LastName: {!v.contact.LastName}</li>
        <li>Email: {!v.contact.Email}</li>
    </ul>

    <c:FieldSetForm 
        fsName="Contact_Field_Set" 
        typeName="Contact" 
        record="{!v.contact}"
    />
    <button onclick="{!c.handleSave}">save</button>
</aura:application>

FieldSetForm.cmp

<aura:component controller="FieldSetCtlr">
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:attribute name="record" type="Object" description="The record being edited"/>
    <aura:attribute name="fsName" type="String"/>
    <aura:attribute name="typeName" type="String"/>
    <aura:attribute name="fields" type="Object[]"/>
    <aura:attribute name="form" type="Aura.Component[]"/>
    <aura:attribute name="inputToField" type="Map"/>
    <p>
        {!v.form}
    </p>
</aura:component>

FieldSetFormController.js

({
    init: function(cmp, event, helper) {
        console.log('FieldSetFormController.init');
        var action = cmp.get('c.getFields');
        action.setParams({
            fsName: cmp.get('v.fsName'),
            typeName: cmp.get('v.typeName')
        });
        action.setCallback(this, 
            function(response) { 
                console.log('FieldSetFormController getFields callback');
                var fields = response.getReturnValue();
                cmp.set('v.fields', fields);
                helper.createForm(cmp);
            }
        );
        $A.enqueueAction(action);
    },

    handleValueChange: function(cmp, event, helper) {
        console.log('change');
        var inputToField = cmp.get('v.inputToField');
        var field = inputToField[event.getSource().getGlobalId()];
        var obj = cmp.get('v.record');
        if (!obj[field]) {
            // Have to make a copy of the object to set a new property - thanks LockerService!
            obj = JSON.parse(JSON.stringify(obj));
        }
        obj[field] = event.getSource().get('v.value');
        cmp.set('v.record', obj);
    }
})

FieldSetFormHelper.js

({
    /*
     *  Map the Schema.FieldSetMember to the desired component config, including specific attribute values
     *  Source: https://www.salesforce.com/us/developer/docs/apexcode/index_Left.htm#CSHID=apex_class_Schema_FieldSetMember.htm|StartTopic=Content%2Fapex_class_Schema_FieldSetMember.htm|SkinName=webhelp
     *
     *  Change the componentDef and attributes as needed for other components
     */
    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
            }
        },
        '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) {
        console.log('FieldSetFormHelper.createForm');
        var fields = cmp.get('v.fields');
        var obj = cmp.get('v.record');
        var inputDesc = [];
        var fieldPaths = [];
        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            var config = this.configMap[field.type.toLowerCase()];
            if (config) {
                config.attributes.label = field.label;
                config.attributes.required = field.required;
                config.attributes.value = obj[field.fieldPath];
                config.attributes.fieldPath = field.fieldPath;
                inputDesc.push([
                    config.componentDef,
                    config.attributes
                ]);
                fieldPaths.push(field.fieldPath);
            } else {
                console.log('type ' + field.type.toLowerCase() + ' not supported');
            }
        }

        $A.createComponents(inputDesc, function(cmps) {
            console.log('createComponents');
            var inputToField = {};
            for (var i = 0; i < fieldPaths.length; i++) {
                cmps[i].addHandler('change', cmp, 'c.handleValueChange');
                inputToField[cmps[i].getGlobalId()] = fieldPaths[i];
            }
            cmp.set('v.form', cmps);
            cmp.set('v.inputToField', inputToField);
        });
    }
})

FieldSetCtlr.cls

public class FieldSetCtlr {

    @AuraEnabled
    public static List<FieldSetMember> getFields(String typeName, String fsName) {
        Schema.SObjectType targetType = Schema.getGlobalDescribe().get(typeName);
        Schema.DescribeSObjectResult describe = targetType.getDescribe();
        Map<String, Schema.FieldSet> fsMap = describe.fieldSets.getMap();
        Schema.FieldSet fs = fsMap.get(fsName);
        List<Schema.FieldSetMember> fieldSet = fs.getFields();
        List<FieldSetMember> fset = new List<FieldSetMember>();
        for (Schema.FieldSetMember f: fieldSet) {
            fset.add(new FieldSetMember(f));
        }
        return fset;
    }

    public class FieldSetMember {

        public FieldSetMember(Schema.FieldSetMember f) {
            this.DBRequired = f.DBRequired;
            this.fieldPath = f.fieldPath;
            this.label = f.label;
            this.required = f.required;
            this.type = '' + f.getType();
        }

        public FieldSetMember(Boolean DBRequired) {
            this.DBRequired = DBRequired;
        }

        @AuraEnabled
        public Boolean DBRequired { get;set; }

        @AuraEnabled
        public String fieldPath { get;set; }

        @AuraEnabled
        public String label { get;set; }

        @AuraEnabled
        public Boolean required { get;set; }

        @AuraEnabled
        public String type { get; set; }
    }
}