Lightning Component using lightning:recordForm

Lightning component which can be used on Record detail page to provide a user a quick view on important fields. This uses component <lightning:recordForm> which is displayed inside a <lightning:card>. <aura:attribute> are used to pass values to attributes of <lightning:recordForm> component.

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="Account" />
    <aura:attribute name="layoutType" type="String" default="Compact" />
    <aura:attribute name="numberOfColumns" type="String" default="2" />
    <aura:attribute name="compMode" type="String" default="Edit" />
    <aura:attribute name="fieldsArray" type="String[]" default="['AccountNumber','Name','AccountSource','Description',
                                                'NumberOfEmployees','Industry','Phone','Type','Rating']" />

    <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="{!v.numberOfColumns}"
                                  layoutType="{!v.layoutType}"
                                  mode="{!v.compMode}"
                                  onsuccess="{!c.raiseTheToastMessage}"
                                  onload="{!c.onLoad}"
                                  onerror="{!c.onError}" />
        </div>
     
    </lightning:card>
</aura:component>



Client side JS Controller code


({
    raiseTheToastMessage : 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();
    },
    onLoad : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Loaded!",
            "message": "The record has been Loaded successfully ."
        });
        toastEvent.fire();
    },
    onError : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Error!",
            "message": "Error."
        });
        toastEvent.fire();
    }
})