Quick Create Record Dynamic Lightning Component

Business Requirement:- Your user wants to create a new record which he uses most from Home Page. The Classic Interface comes with a standard home component which users can use but Lightning Experience does not.

Capture.PNG

Solution:- A custom Lightning Component will rescue you. It will allow you to select the Object Name appears as a picklist inside the component. You can use this component on Home, App, Record Page or as Utility Bar.

Capture

Design:- The Component can be added on the Page using Lightning App Builder and it is configurable as Admins can provide the Api name of Objects with comma separated in properties pane of the Builder. 

Code:- 

QuickCreate.cmp

<aura:component controller="QuickCreateClass" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    <aura:attribute name="defaultObject" type="String" access="Public"/>
    <aura:attribute name="objectListFromDesign" type="String" access="Public"/>
    <aura:attribute name="objectlistLabel" type="String[]" access="Public"/>
    <aura:attribute name="objectListForParams" type="String[]" access="Public"/>
    <lightning:card title="Quick Create" iconName="custom:custom1">
        <aura:set attribute="actions">
            <lightning:button label="Create Record" title="Create Record" onclick="{! c.createRecord }"/>
        </aura:set>
        <lightning:select aura:id="select" name="select" label="Select an Object to create Record" value="{!v.defaultObject}">
            <aura:iteration items="{!v.objectlistLabel}" var="object" indexVar="key">
                <option text="{!object.label}" value="{!object.value}" ></option>
            </aura:iteration>
        </lightning:select>
    </lightning:card>
</aura:component>

QuickCreateController.js

({
    doinit : function(component, event, helper) {
        var objectnames= component.get("v.objectListFromDesign");
        var parts= objectnames.split(",");
        var objectNameList=[];
        for(var i = 0; i < parts.length; i++){
            objectNameList.push(parts[i]);
        }
        component.set("v.objectListForParams",objectNameList);
        var action = component.get("c.getAllObjectsLabel");
        action.setParams({ 
            objApiList : component.get("v.objectListForParams") 
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.objectlistLabel", response.getReturnValue());
                component.set("v.defaultObject", response.getReturnValue()[0].value);
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " + 
                                        errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
        });
        $A.enqueueAction(action);
        
    },
    createRecord : function(component, event, helper) {        
        var createRecordEvent = $A.get("e.force:createRecord");
        createRecordEvent.setParams({
            "entityApiName": component.find('select').get('v.value')
        });
        createRecordEvent.fire();
    }
})

QuickCreate.design

<design:component label="Quick Create component">
	<design:attribute name="objectListFromDesign" label="Object Names" description="Api name of Objects seperated by comma" />
</design:component>

QuickCreateClass.apxc

public class QuickCreateClass {
    @AuraEnabled
    public static List<Map<String, String>> getAllObjectsLabel(List<String> objApiList) {
        List<Map<String, String>> items = new List<Map<String, String>>();
        List<Schema.DescribeSObjectResult> describeSobjectsResult = Schema.describeSObjects(objApiList); 
        for(Schema.DescribeSObjectResult sd: describeSobjectsResult){
            items.add(new Map<String, String>{'value' => sd.getName(), 'label' => sd.getLabel()});
        }        
        return items;
    }
}

You have the component, but it needs to be added on the Lightning Page Layout. Edit your desired page and drag the component from custom component pane to builder canvas and configure the Properties. Save it and Activate your Lightning Page.

Your quick create component is ready to use.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s