Day: May 10, 2018

Usage of lightning:tree

In this blog, I am going to show how to use the lightning:tree component. In this example, I am fetching the data from the account and contact and opportunity object and show the data as a tree. A lightning:tree component displays the visualization of a structural hierarchy, such as a sitemap for a website or a role hierarchy in an organization. Items are displayed as hyperlinks and items in the hierarchy can be nested. Items with nested items are also known as branches.

Apex Class 

public class TreeController {
    @AuraEnabled
    public static String getTreeData(){
        List<Account> accs = [Select Id , Name,(Select Id , Name from Contacts) from Account];
        Map<Id , Contact> opps =new Map<Id , Contact>( [Select Id , Name,(Select Id ,Name From Opportunities) from Contact]);
        
        List<AccountWrapper> aooo = new List<AccountWrapper>();
        for(Account a : accs){
            AccountWrapper aWraper = new AccountWrapper() ; 
            aWraper.name =a.Name ;
            aWraper.label =a.Name ;
            aWraper.expanded =true ;
            List<Items> co = new List<Items>();
            for(Contact c : a.Contacts){
                Items conWrapp = new Items();
                conWrapp.name =c.Name ;
                conWrapp.label =c.Name ;
                conWrapp.expanded =true ;
                
                List<Items> wrapperOooo = new List<Items>();
                for(Opportunity o : opps.get(c.Id).Opportunities){
                    Items ooo = new Items(); 
                    ooo.name = o.Name ;
                    ooo.label = o.Name ;
                    ooo.expanded = true ;
                    wrapperOooo.add(ooo);
                }
                
                conWrapp.items =wrapperOooo ;
                co.add(conWrapp);
            }
            aWraper.items = co;
            aooo.add(aWraper);
            
        }
        return JSON.serializePretty(aooo) ;
    } 
    public Class AccountWrapper{
        @AuraEnabled
        public String name {get;set;}
        @AuraEnabled
        public String label {get;set;}
        @AuraEnabled
        public Boolean expanded {get;set;}
        @AuraEnabled
        public List<Items> items {get;set;}
        
    }
    public Class Items{
        @AuraEnabled
        public String name {get;set;}
        @AuraEnabled
        public String label {get;set;}
        @AuraEnabled
        public Boolean expanded {get;set;}
        @AuraEnabled
        public List<Items> items {get;set;}
    }
    
}

Lightning Component

<aura:component controller="TreeController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="items" type="Object"/>
    <lightning:tree items="{! v.items }" header="Account - Contact - Opportunity"/>
    
</aura:component>
({
    doInit: function (cmp, event, helper) {
        var action = cmp.get("c.getTreeData");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set('v.items', JSON.parse(response.getReturnValue()));
            }
            
        });
        $A.enqueueAction(action);
    }     
})

Here is the output

 

Usage of lightning:combobox

In this blog I am going to show a simple usage of the lightning:combobox .lightning:combobox is an input element that enables single selection from a list of options. The result of the selection is displayed as the value of the input.A widget that provides an input field that is read-only, accompanied with a dropdown list of selectable options.In this example, once the user selects the Department from the contact, it will get all the contacts and display as the table shown below.

Apex Class

public class ContactsController {
    @AuraEnabled
    public static List<String> getDepartment () {
        Set<String> uniqDepartment = new Set<String>();
        List<Contact> results=[Select Id, Department from Contact];
        for(Contact c : results){
            if(c.Department!=null){
                uniqDepartment.add(c.Department); 
            }
        }
        List<String> finalResult =  new List<String>();
        finalResult.addAll(uniqDepartment); 
        finalResult.sort();
        return  finalResult;
    }
    
    @AuraEnabled
    public static List<Contact> getContactsByDept (String deptName) {
        List<Contact> results=[Select Id,FirstName,LastName,Email,Department from Contact where Department=:deptName];
        return  results;
    }
    
    
    
}

 

Lightning Component 

<aura:component controller="ContactsController">
    <aura:attribute name="statusOptions" type="List" default="[]"/>
    <aura:attribute name="contacts" type="Contact[]" default="[]"/>
    
    <aura:handler name="init" value="{! this }" action="{! c.loadOptions }"/>
    <lightning:combobox aura:id="selectItem" name="status" label="Status"
                        placeholder="Choose Status"
                        value="new"
                        required="true"
                        dropdownAlignment="right"
                        variant="standard"
                        messageWhenValueMissing="You Must Select the Value"
                        onchange="{!c.handleOptionSelected}"
                        options="{!v.statusOptions}"/>
    
    <table class="slds-table slds-table--bordered">
        <thead>
            <th>
                LastName 
            </th>
            
            <th>
                FirstName
            </th>
            <th>
                Email
            </th>
        </thead>
        <tbody>
            <aura:iteration items="{!v.contacts}" var="row">
                <tr>
                    <td>
                        {!row.LastName}
                    </td>
                    <td>
                        {!row.FirstName}
                    </td>
                    <td>
                        {!row.Email}
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    
    
</aura:component>

 

({
    loadOptions: function (cmp, event, helper) {
        var options = [
        ];
        var action = cmp.get("c.getDepartment");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var arr = response.getReturnValue() ;
                arr.forEach(function(element) {
                    options.push({ value: element, label: element });
                });
                cmp.set("v.statusOptions", options);
                
            }
            
            
        });
        $A.enqueueAction(action);
        
    },
    handleOptionSelected: function (cmp, event) {
        var action = cmp.get("c.getContactsByDept");
        action.setParams({deptName:event.getParam("value")});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.contacts" ,  response.getReturnValue() ) ; 
            }
        });
        $A.enqueueAction(action); 
        
    }
})

 

Usage of lightning:picklistPath

A lightning:picklistPath component displays the progress of a process, which is based on the picklist field specified by the picklistFieldApiName attribute. The path is rendered as a horizontal bar with one chevron for each picklist item. Paths created by this component do not have key fields or guidance and do not display the Mark Complete button. In this example, Lead Record Status is updated based on the path selected.

Apex Class

public class LeadStatusUpdate {
    @AuraEnabled
    public static void updateStage(String leadStatus , String recordId){
        Lead l = [Select Id ,Status from Lead where Id=:recordId] ; 
        l.Status =leadStatus ; 
        update l ;
        
    }
    
}

Lightning Component 

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="LeadStatusUpdate">
    <lightning:picklistPath aura:id="picklistPath" recordId="{!v.recordId}"
                            variant="linear"
                            picklistFieldApiName="LeadSource"
                            onselect="{!c.handleSelect}">
    </lightning:picklistPath>
</aura:component>

 

({  
    handleSelect : function (component, event, helper) {
        var stepName = event.getParam("detail").value;
        console.log(stepName);
        console.log(component.get("v.recordId"));
        var action = component.get("c.updateStage");
        action.setParams({leadStatus:stepName , recordId : component.get("v.recordId")});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var toastEvent = $A.get("e.force:showToast");
                if (state === 'SUCCESS'){
                    toastEvent.setParams({
                        "title": "Success!",
                        "message": " Status is Update Succesfully !."
                    });
                }
                toastEvent.fire();
                $A.get('e.force:refreshView').fire();
                
            }
        });
        $A.enqueueAction(action);
    }})

 

 

Usage Of lightning:path

In this post, I am going to explain how to use lightning:path component. A lightning:path component displays the progress of a process, which is based on the picklist field that’s specified by Path Settings in Setup. The path is rendered as a horizontal bar with a chevron for each picklist item. The key fields and guidance for success are displayed below the path. In this example, I customized the opportunity path. Based on the user selection on the path, opportunity record stage will be updated.

Apex Class

public class OpportunityStageUpdate {
    @AuraEnabled
    public static void updateStage(String stageName , String recordId){
        Opportunity opp = [Select Id ,StageName from Opportunity where Id=:recordId] ; 
        opp.StageName =stageName ; 
        update opp ;
        
    }
}

Lightning Component

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="OpportunityStageUpdate">
    <aura:attribute name="variant" type="String" default="non-linear"/>
    <aura:attribute name="hideUpdateButton" type="Boolean" default="true"/>
    <lightning:path aura:id="path" recordId="{!v.recordId}"
                    variant="{!v.variant}"
                    hideUpdateButton="{!v.hideUpdateButton}"
                    onselect="{!c.handleSelect}"
                    />
</aura:component>

 

({
    handleSelect : function (component, event, helper) {
        var stepName = event.getParam("detail").value;
        console.log(stepName);
        console.log(component.get("v.recordId"));
        var action = component.get("c.updateStage");
        action.setParams({stageName:stepName , recordId : component.get("v.recordId")});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var toastEvent = $A.get("e.force:showToast");
                if (state === 'SUCCESS'){
                    toastEvent.setParams({
                        "title": "Success!",
                        "message": " Status is Update Succesfully !."
                    });
                }
                toastEvent.fire();
                $A.get('e.force:refreshView').fire();
                
            }
        });
        $A.enqueueAction(action);
    }
})