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