Lightning Component For Custom RecordType Selection

In this post, I am going to create a Lightning Component which is a replica of RecordType selector in Lightning.

Apex Controller:

Here, we are getting List of RecordTpes from Account Object.

public class RecordTypeSelectorController {
 
    @AuraEnabled
    public static List<RecordType> getListOfRecordType(){
        String query = 'SELECT Id,Name FROM RecordType WHERE SobjectType =\''+'Account'+'\' ';
        List<RecordType> rtNames = new List<RecordType>();
        Schema.SObjectType  objType = Account.SObjectType;     
        for(RecordTypeInfo rt : objType.getDescribe().getRecordTypeInfos()){
            System.debug('rt.getName()'+rt.getName());
            rtNames.add(new RecordType(Id = rt.getRecordTypeId(),Name = rt.getName()));
            System.debug('rtNames'+rtNames);
        } 
        return rtNames; 
    }
}

Lightning Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" controller="RecordTypeSelectorController" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" access="public"/>
    <aura:attribute name="recordTypes" type="String[]" access="public"/>
    <div class="slds">
        <div class="demo-only" style="height: 640px;" id="newClientSectionId">
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                            <lightning:icon iconName="utility:clear" size="small" alternativeText="Indicates approval"/> 
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">RecordType Selection</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <aura:iteration items="{!v.recordTypes}" var="rt">
                            <ol class="slds-list--vertical slds-list--vertical-space">
                                <input type="radio" value="{!rt.Name}" name="recordTypeRadio" id="{!rt.Id}" style="margin-right: 5px;" />{!rt.Name}
                            </ol> 
                        </aura:iteration>
                    </div>
                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_brand" onclick="{!c.createRecordFun}">Next</button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
    </div>

</aura:component>

JavaScript Controller:

Here, we are using force:createRecord event. This event tells app to use standared create record page.

({
    createRecordFun : function (component, event, helper) {
        var rtDet = document.querySelector('input[name="recordTypeRadio"]:checked');
        if(rtDet != null) {
            document.getElementById("newClientSectionId").style.display = "none" ;
            var createRecordEvent = $A.get("e.force:createRecord");
            createRecordEvent.setParams({
                "entityApiName": "Account",
                "recordTypeId":rtDet.id
            });
            createRecordEvent.fire();
        } 
    },
    doInit : function(component, event, helper) { 
        helper.RecordTypeSelectorController(component); 
    }

})

JavaScript Helper:

({
   RecordTypeSelectorController: function(component) {
    var action = component.get("c.getListOfRecordType");
    action.setCallback(this, function(actionResult) {
        var infos = actionResult.getReturnValue();
        component.set("v.recordTypes", infos);
    });
    $A.enqueueAction(action);
  }

})

OutCome:

Step 1: Select RecordType Then clickSave  Next

Step 2: Enter required fields and click Save.

Step 3: When you click on save button you will directly navigate to Record Detail page of what we have craeted now.