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>


Post a comment if you have any query, I would be happy to help,
thank you !!

Thursday, 9 March 2017

Lightning Tips for Visualforce Devs! #Salesforce

Hey everyone, today we are going to discuss about some great features of lightning, and how Visualforce developers should start utilising these features.




 Why Lightning ?

As per salesforce, lightning is the collection of tools and technologies behind a significant upgrade to the Salesforce platform. There are many things salesforce launched under lightning like Process Builder, Lightning App Builder, Community Builder are all build using aura framework.
Using Lightning component, we make business ready components, and the component are ready to use in Salesforce1, Lightning experience and communities.
And if we talk about the performance, then lightning calls the server whenever it needed not all the times, not like we do in visualforce pages, just for clicking a button visualforce calls the server, but lightning framework is not designed like that. because of that it increases the efficiency of the application.
Aura framework uses JSON to send the data to client and to the server, the best part is lightning development is faster compared to visualforce pages, as the application we develop lightning facilitates parallel design.


 What's the difference between Lightning and Visualforce?

As we all were using Visualforce pages, they were static, basically page-centric model, as we discussed earlier visualforce page was designed to help implement salesforce classic look and feel, where on click of a button, it will hit to the server, but in lightning its different.

Visualforce pages has optional use of Javacsript and CSS, using Javascript we can do some client side processing in visualforce, Visualforce was meant for desktop, later on after Salesforce1, we started adding more CSS or Bootstrap etc, to make our visualforce pages work with Salesforce1.




Its kind of changing our way of working on apps, Lightning follows app-centric model, with Lightning you can send an interaction to the Salesforce servers and then update a specific component, this make performance of the application far more better. We can decide in lightning weather to process functionality on client side or server, lightning component comes in Bundles, that has there own files, for example Component, Controller, Helper, CSS, Documentation etc, you can optionally define weather you want to use the controller or not. Developing lightning component is much more complex then visualforce as you building an app not a page. It supports the latest in browser technology such as HTML5, CSS3, and touch events.


Wait....what about my visualforce page ?

You can still use your visualforce pages, as still many things lightning doesn't supports, visualforce are still standing strong, Lightning can't make a Homepage Component, email templates, or render pages as PDFs.
Lightning is still growing and it will take years to remove visualforce pages from salesforce, lightning is a new age of development of apps, and visualforce pages are everywhere, people still have to think about before migrating an existing visualforce pages to lightning.


Switching Visualforce page to Lightning 

I still say it not that easy to convert your visualforce pages to Lightning, it needs allot of analysis and rework to change a visauforce to lightning. Using SLDS you can have look and feel of a visualforce like lightning pages.


Important Links to know more about Lightning & Learning

These below link can surely help you learn and explore lightning experience and their advantages.

Share Visualforce Pages Between Classic and Lightning Experience

Lightnign FAQ

Using Lightning Components in Lightning Experience

Lightning Experience Development

Visualforce & Lightning Experience


So go ahead and explore...


Thank you!

Sunday, 5 March 2017

Lightning Modal Using Salesforce Lightning Component #Salesforce

After a long time I got some time for blogging, I've been thinking for a long to post something about lightning component, its feel great when you learn something, I've been now working on lightning for more then 6 months now, learned somethings about the SLDS (Salesforce Lightning Design System) and still learning about lightning Components,

Lightning Component Framework : It is one of the most powerful app development technology we have, Lightning Components is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Force.com apps. It uses JavaScript on the client side and Apex on the server side. (Source Trailhead)


(Source Trailhead)

I would highly recommend TRAILHEAD for learning Salesforce Lightning Component module

So here I am going to show you how simple is creating a modal in Lightning component, and if you ask why modal, then this is because, I get many requirement where client asks that we need this thing in a pop-up or that form should come in a modal, so it is very commonly used thing, so I thought it will be helpful to post about it.

I am not going into the basics of the lightning component framework, so here how it looks


So here is the component code for the lightning modal


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">
    
    <ltng:require styles="/resource/SLDS103/assets/styles/salesforce-lightning-design-system-ltng.css" />
    
    <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">
                            
                           London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
                        </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">Continue</button>
                        </div>
                    </div>
                </div>
            </div>
            <button class="slds-button slds-button--neutral" onclick="{!c.showModal}">Open Modal</button>
        </div>
    </div>
    
</aura:component>

And here is the controller code :

({  
    showModal : function(component, event, helper) {
        document.getElementById("newClientSectionId").style.display = "block";
    },
    
    hideModal : function(component,event, helper){
        document.getElementById("newClientSectionId").style.display = "none" ;
    }
 })

To run the above component, create a lightning app

<aura:application >
    <c:JustLightningModal />
</aura:application>


Note : Use SLDS library of Salesforce used in the component code.


Hope this help will soon continue to add more functionality to the modal using lightning component.

Thanks