Friday, 31 March 2017

Lightning Record Type Selector Component #Salesforce

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


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 !!

38 comments:

  1. Hi Abhi, do you have any idea based on parent record type selection child record type should get selected and the record creation page should come. This should be achieved thru quick action lightning component.. any idea on this

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Nice content.very useful thank you! for your creative ideas.
    coursquare
    education

    ReplyDelete
  5. Is there any way to prepopulate values on the record detail page? For instance: prepopulate Account Name.

    ReplyDelete
  6. Do you have sample one for these if they have descriptions below?

    ReplyDelete
  7. how to open visualforce page after record selection.I have scenario with once select the account record type then it should open my custom VF page .but it opens the std.page.I have already override New button in lighting as VF page.

    ReplyDelete
  8. Great Article. Thank you for sharing! Really an awesome post for every one.

    IEEE Final Year projects Project Centers in Chennai are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation. For experts, it's an alternate ball game through and through. Smaller than expected IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble. Final Year Project Domains for IT It gives you tips and rules that is progressively critical to consider while choosing any final year project point.

    JavaScript Training in Chennai

    JavaScript Training in Chennai


    ReplyDelete
  9. You write this post very carefully I think, which is easily understand to me. Not only this, other post is also good. As a newbie this info is really helpful for me. Thanks to you.
    tally training
    Tally Training in Chennai
    Tally ERP 9 Training
    Tally Course
    tally classes
    Tally institute in Chennai
    Tally Training institute in Chennai
    Tally course in Chennai

    ReplyDelete
  10. This content of information has
    helped me a lot. It is very well explained and easy to understand.
    SEO Training
    seo course

    ReplyDelete
  11. Excellent post. The author has shared the post in a unique way. Have been in a wait for more updates. Do share more. really like this page.
    Ai & Artificial Intelligence Course in Chennai
    PHP Training in Chennai
    Ethical Hacking Course in Chennai Blue Prism Training in Chennai
    UiPath Training in Chennai

    ReplyDelete
  12. Pretty informed post! I'm seeking for some topics I need to see that our site affection and then drove it our site all report is really good. thanks
    Ai & Artificial Intelligence Course in Chennai
    PHP Training in Chennai
    Ethical Hacking Course in Chennai Blue Prism Training in Chennai
    UiPath Training in Chennai

    ReplyDelete
  13. The development of artificial intelligence (AI) has propelled more programming architects, information scientists, and different experts to investigate the plausibility of a vocation in machine learning. Notwithstanding, a few newcomers will in general spotlight a lot on hypothesis and insufficient on commonsense application. machine learning projects for final year In case you will succeed, you have to begin building machine learning projects in the near future.

    Projects assist you with improving your applied ML skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include projects into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Final Year Project Centers in Chennai even arrange a more significant compensation.


    Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account.

    ReplyDelete
  14. With so many books and articles appearing to usher in the field of making money online and further confusing the reader on the real way to make money.

    Business Analytics Course in Bangalore

    ReplyDelete
  15. Big data has made quite an impact on the world and data science has recently risen to be one of the hottest topics. Now how are these two related? data science course syllabus

    ReplyDelete
  16. Wonderful blog found to be very impressive to come across such an awesome blog. I should really appreciate the blogger for the efforts they have put in to develop such amazing content for all the curious readers who are very keen on being updated across every corner. Ultimately, this is an awesome experience for the readers. Anyways, thanks a lot and keep sharing the content in the future too.

    Digital Marketing Training in Bangalore

    ReplyDelete
  17. This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck.
    Reactjs Training in Chennai |
    Best Reactjs Training Institute in Chennai |
    Reactjs course in Chennai

    ReplyDelete
  18. A good blog always contains new and exciting information, and reading it I feel like this blog really has all of these qualities that make it a blog.

    Artificial Intelligence Training in Bangalore

    ReplyDelete
  19. Really impressed! Everything is a very open and very clear clarification of the issues. It contains true facts. Your website is very valuable. Thanks for sharing.

    Data Scientist Training in Bangalore

    ReplyDelete
  20. Good blog and absolutely exceptional. You can do a lot better, but I still say it's perfect. Keep doing your best.

    Data Science Training in Nagpur

    ReplyDelete
  21. very happy to find a good place for many here in the post, the writing is just great, thanks for the post.

    Data Science Course in Ernakulam

    ReplyDelete
  22. Such a priceless piece of information. It was quite interesting to read this article.I would want to thank you for your efforts in writing this amazing essay. customer relationship management module in erp

    ReplyDelete
  23. After a long time, I read a gorgeous and essential article that I enjoyed reading. I have found that this article has many important points. I sincerely thank the admin of this website for sharing it. If you are looking for tailor made erp software for your businesses, get a free consultation custom erp software development

    ReplyDelete