lightning:verticalNavigation Example

Apex Class 

public class SobjectController {
    @AuraEnabled 
    public static List<SObject> getSobject(String objName){
        String queryStr='select Id,Name from ' + objName;
        System.debug('queryStr'+queryStr);
        List<Sobject> results=Database.query(queryStr);
        System.debug('results'+results);
        return results ;
    }
    
    
}

Lightning Component 

 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                controller="SobjectController" access="global" >
    
    
    
    <aura:attribute name="asyncValidation" type="Boolean" />
    <aura:attribute name="hasBeenEdited" type="Boolean" />
    <aura:attribute name="selectedItem" type="String" />
    <aura:attribute name="activeItem" type="String" />
    <aura:attribute name="resultData" type="List" />
    
    
    <div>
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="3">
                <lightning:verticalNavigation onbeforeselect="{! c.handleBeforeSelect }"
                                              selectedItem="{! v.selectedItem }" >
                    <lightning:verticalNavigationSection label="Click on Each Object to see">
                        
                        <lightning:verticalNavigationItem label="Account" name="Account" />
                        <lightning:verticalNavigationItem label="Contact" name="Contact" />
                        <lightning:verticalNavigationItem label="Opportunity" name="Opportunity" />
                        <lightning:verticalNavigationItem label="Lead" name="Lead" />
                        <lightning:verticalNavigationItem label="Task" name="Task" />
                    </lightning:verticalNavigationSection>
                </lightning:verticalNavigation>
            </lightning:layoutItem>
            
            <lightning:layoutItem padding="around-small" size="9">
                
                <p>You Are Viewing: {! v.activeItem } Object Data </p>
                <div class="slds">
                    <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-max-medium-table--stacked-horizontal">
                        <thead>
                            <tr class="slds-text-heading--label">
                                <th scope="col" class="nobordertop" title="Id">
                                    <div> Id</div>
                                </th>
                                <th scope="col" class="nobordertop" title="Name">
                                    <div> Name</div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <aura:iteration items="{!v.resultData}" var="result">     
                                <tr>
                                    <td data-label="Id" title="Id">
                                        <div><a data-record="{!result.Id}" onclick="{!c.redirectToSobject}">{!result.Name}</a></div>
                                    </td>
                                    <td data-label="Name" title="Name">
                                        <div>{!result.Name}</div>
                                    </td>
                                    
                                </tr>
                            </aura:iteration>
                        </tbody>
                    </table> 
                </div>
                
                
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    
</aura:component>

 

({
    init: function (component) {
    },
    
    handleClick: function(component) {
    },
    
    handleBeforeSelect: function(component, event) {
        event.preventDefault();
        console.log(event.getParam('name'));
        component.set('v.activeItem', event.getParam('name'));
        var action = component.get("c.getSobject");
        action.setParams({ objName : component.get("v.activeItem") });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log(response.getReturnValue());
                component.set("v.resultData" ,response.getReturnValue())
            }
        });
        $A.enqueueAction(action);
        
        
    },
    redirectToSobject: function(component, event) {
        var selectedItem = event.currentTarget;
        var recordId = selectedItem.dataset.record;
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": recordId,
            "slideDevName": "related"
        });
        navEvt.fire();
        
        
    },
})

Based on the selected Object from the Navigation menu, you will see the data from the corresponding object as shown below.

Advertisement