In this blog, I am going to create a lightning component which is a replica of the record type selector in lightning, its so simple, its a continuation of my last blog about lightning model link
So lets get started,
Here is the controller, which is fetching all the record type of the Account object
Now here is the lightning component code
Here is the component, if you have read the last blog about the lightning model, then it would be easy to understand this one
This is the Component code, here we have a modal and button, which will have functionality of opening the modal, and the other button will open the Account record creation modal which is standard.
Here is the controller code, which you can add to the controller which we have written earlier in the lightning modal blog, just add these two methods in the controller and we are done with the controller, init method is to initialise method of the helper and createRecord is a standard function which you can use in the lightning component to get the standard functionality of creation of the records.
Here is our helper, where we are calling the controllers method, which will return us a list of the all the record type of the Account object,
You are done, now lets see how it looks,
Here is the modal having list of record types of Account.
And here is the record detail to create a new Account record
To run the above component, create a lightning app
Here is the github Repo for updated code and deploying it salesforce Github
Post a comment if you have any query, I would be happy to help,
thank you !!
So lets get started,
Here is the controller, which is fetching all the record type of the Account object
public class RecordTypeSelectorController {
@AuraEnabled
public static List<RecordType> getListOfRecordType(){
String query = 'SELECT Id,Name FROM RecordType WHERE IsActive=TRUE AND SobjectType =\''+'Account'+'\' ';
List<RecordType> rtNames = new List<RecordType>();
Schema.SObjectType objType = Account.SObjectType;
for(RecordTypeInfo rt : objType.getDescribe().getRecordTypeInfos()){
rtNames.add(new RecordType(Id = rt.getRecordTypeId(),Name = rt.getName()));
}
return rtNames;
}
@AuraEnabled
public static Id getAccountRecordType() {
Id ClientRecordTypeId = Schema.SObjectType.Account.getRecordTypeInfosByName().get('Client').getRecordTypeId();
return ClientRecordTypeId;
}
}
Now here is the lightning component code
Here is the component, if you have read the last blog about the lightning model, then it would be easy to understand this one
This is the Component code, here we have a modal and button, which will have functionality of opening the modal, and the other button will open the Account record creation modal which is standard.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" controller="RecordTypeSelectorController" access="global">
<ltng:require styles="/resource/SLDS103/assets/styles/salesforce-lightning-design-system-ltng.css" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" access="public"/>
<aura:attribute name="recordTypes" type="String[]" access="public"/>
<div class="slds">
<div >
<!-- modal body starts here -->
<div tabindex="-1" aria-labelledby="header43" aria-hidden="false" id="newClientSectionId" role="dialog" class="slds-modal slds-fade-in-open" style="display:none;">
<div class="slds-backdrop slds-backdrop--open">
<div class="slds-modal__container">
<div class="slds-modal__header">
<button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
<button class="slds-button slds-button--neutral" onclick="{!c.hideModal}">X</button>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="header43" class="slds-text-heading--medium">Modal Header</h2>
</div>
<div class="slds-modal__content slds-p-around--medium">
Select a record type :
<br/>
<div style="margin-left:30%">
<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>
</div>
<div class="slds-modal__footer">
<button class="slds-button slds-button--brand" onclick="{!c.hideModal}">Cancel</button>
<button class="slds-button slds-button--brand" onclick="{!c.createRecord}">Next</button>
</div>
</div>
</div>
</div>
<button class="slds-button slds-button--neutral" onclick="{!c.showModal}">Open Modal</button>
</div>
</div>
</aura:component>
Here is the controller code, which you can add to the controller which we have written earlier in the lightning modal blog, just add these two methods in the controller and we are done with the controller, init method is to initialise method of the helper and createRecord is a standard function which you can use in the lightning component to get the standard functionality of creation of the records.
createRecord : 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); }
Here is our helper, where we are calling the controllers method, which will return us a list of the all the record type of the Account object,
({ 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); } })
You are done, now lets see how it looks,
Here is the modal having list of record types of Account.
And here is the record detail to create a new Account record
To run the above component, create a lightning app
<aura:application >
<c:RecordTypeSelector />
</aura:application>
Here is the github Repo for updated code and deploying it salesforce Github
Post a comment if you have any query, I would be happy to help,
thank you !!
