Winter'18 - Basic Visualforce is now Ready for Lightning View #Salesforce

In this winter 18 release, Salesforce has upgraded what was required, now even if you are new to SLDS, no need to worry about as Salesforce have introduced "lightningStylesheets" tag just to make your life easy.
Designing in lightning sometime you need to search the class name and then add it your page to check whether its the same that you want.

So here is a simple demo of the old style visualforce page having all the things that we might use, and using the same visuaforce page in Lightning by changing nothing. Everything will taken care by salesforce just by using lightningStylesheets.
I have added almost all type of fields as well just to show how it looks without adding any further styling.

Take a look how it works

Here is the Visualforce page

Some good guy said

Thank you!

Using lightning:tree to display Account Hierarchy #Salesforce Lightning Component #Winter'18

 Winter'18 Salesforce have added a new lightning component called lightning:tree, using this we can display the hierarchy of Salesforce.

In this component is going to be great help to all the devs, when they want achieve the accordion looking hierarchy displaying component. This component support only version 41.0 and above

Here is the working demo

So in this post we have a small component which displays the account hierarchy upto 3 levels, I am not further on achieving the hierarchy of Account using Apex, so I did what I can using just a single SOQL.

Here is the component code

 <aura:component controller="LightningTreeApexController" implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasRecordId"> >  
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />  
   <aura:attribute name="items" type="Object"/>  
   <aura:attribute name="recordId" type="String"/>  
   <lightning:tree items="{! v.items }" header="Account Hierarchy" onselect="{!c.handleSelect}"/>  
 </aura:component>  

Here Lightning component Controller code

 ({  
   doInit: function (cmp, event, helper) {  
     helper.apexMethod(cmp);  
   },  
   handleSelect: function (cmp, event, helper) {  
     //return name of selected tree item  
     var myName = event.getParam('name');  
     alert("You selected: " + myName);  
   }  
 })  

Here is the helper code

 ({  
   apexMethod : function(cmp) {  
     var action = cmp.get("c.getAccountHierarchy");  
     action.setParams({ accountId : cmp.get("v.recordId") });  
     action.setCallback(this, function(response) {  
       var state = response.getState();  
       if (state === "SUCCESS") {  
         cmp.set( "v.items", response.getReturnValue());  
       }  
     });  
     $A.enqueueAction(action);  
   }  
 })  

Here is Apex Controller

 public class LightningTreeApexController {  
     
   @AuraEnabled  
   public static List<items> getAccountHierarchy(Id accountId) {  
       
     //Wrapper instance  
     List<items> finalWrp = new List<items>();  
       
     //Going upto 2 level only as per SOQL limit  
     for(Account acc : [ Select Id, Name, Type, ParentId, Parent.Name, Parent.Type, Parent.ParentId, Parent.Parent.Name, Parent.Parent.Type From Account Where Id =: accountId]) {  
         
       //populating wrapper  
       List<items> trP1 = new List<items>{new items(acc.Type, acc.Name, false, null)};  
       List<items> trP2 = new List<items>{new items(acc.Parent.Type, acc.Parent.Name, false, trP1)};  
       finalWrp.add(new items(acc.Parent.Parent.Type, acc.Parent.Parent.Name, false, trP2));  
     }             
        
     System.debug('finalWrp:::' + finalWrp);  
     // return wrapper  
     return finalWrp;    
   }  
 }  

Here is wrapper class used in Apex controller

 public class items {  
     
   @AuraEnabled  
   public string label { get; set; }  
     
   @AuraEnabled  
   public string name { get; set; }  
     
   @AuraEnabled  
   public Boolean expanded { get; set; }  
     
   @AuraEnabled  
   public List<items> items { get; set; }  
     
   public items( String name, String label, Boolean expanded, List<items> items) {  
     this.label = label;  
     this.name = name;  
     this.expanded = expanded;  
     this.items = items;   
   }  
 }  

Some important links to learn more about Winter'18 Release

Salesforce Documentation

Lightning Design System : Lightning Tree

Salesforce Release Notes Winter'18

Thanks you