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.

One comment

  1. Objects are not listing in the Select dropdown eventhough i have added it the lightning page. And also if i click create record button, it showing the error message as “TypeError: Cannot read property ‘componentDef’ of null”

Leave a Reply