Lightning Component using lightning:recordForm

This component is intended to be used on Contact Object detail page.
This component uses lightning:recordForm component.
It takes contact record id and provides a little form where you choose the fields you want to display and allows you to view / edit those fields.

Component Code:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName" access="global">

    <aura:attribute name="recordId" type="Id" default="" />
    <aura:attribute name="sObjectName" type="String" default="Contact" />
    <aura:attribute name="fieldsToDisplay" type="String" />
    <aura:attribute name="val" type="String" />
    <aura:attribute name="layoutType" type="String" default="Custom" />
    <aura:attribute name="numberOfColumns" type="String" default="1" />
    <aura:attribute name="fieldsArray" type="String[]" default="['Name','Email','Phone','AccountId']" />
    <aura:attribute name="targetFields" type="Contact" />

    <lightning:card iconName="custom:custom19" title="lightning:recordForm in Spring'18">
 
        <div class="slds-p-left_large slds-p-right_medium">
         
            <lightning:recordForm aura:id="recordViewForm"
                                  recordId="{!v.recordId}"
                                  objectApiName="{!v.sObjectName}"
                                  fields="{!v.fieldsArray}"
                                  columns="1"
                                  onsuccess="{!c.happyDance}" />
        </div>
     
    </lightning:card>
</aura:component>

JS Controller Code:

({
    happyDance : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "The record has been updated successfully.",
            "type": "success"
        });
        toastEvent.fire();
    }
})