Lightning component with configurable attributes

Lightning component with configurable attributes

Component

<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="numberOfColumns" type="String" default="2" />
    <aura:attribute name="fieldsArray" type="String" />
    <aura:attribute name="layoutType" type="String" default="Compact" />

    <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}"
                                  layoutType="{!v.layoutType}"
                                  columns="{!v.numberOfColumns}"
                                  onsuccess="{!c.raiseTheToastMessage}" />
        </div>
   
    </lightning:card>
</aura:component>

Design file

<design:component>
    <design:attribute name="sObjectName" label="Object" datasource = "Account, Contact, Opportunity" description="object on whose detail page component should be available" />
    <design:attribute name="numberOfColumns" label="Columns" datasource="1,2,3,4" description="Number of columns component should have" />
    <design:attribute name="fieldsArray" label="Field List" description="comma separated list of fields" /> 
    <design:attribute name="layoutType" label="Layout" datasource = "Custom, Full, Compact" description="type of layout to be used in component" /> 
</design:component>


JS Controller


({
    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();
    }
})

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();
    }
})

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();
    }
})