Here comes the another #Salesforce custom lightning component blog post. With this custom lightning components its easy to get the recent items of an object with dynamic fields and also it allows to limit the number of recent records you want to display in the page. This simple lightning component UI is designed with the salesforce lightning design system



Let's get into the details, The recently viewed records of the current user are stored in the RecentlyViwed object which includes the user information, ID and object name of the recently viewed record. The following apex code contains the logic to get the recently accessed records. The logic is straightforward we will pass the following user input values name of the object, fields to get and the number of the records to be returned. The annotation @AuraEnabled allows the lighting javascript controller to call the method

RecentRecordsController.cls
public class RecentRecordsController {
   
    @AuraEnabled public static List<sobject> getRecentRecords(String ObjectName,String limits,String fieldstoget){     
        
        List<Id> recentlyViewedIds = new List<Id>();
        Integer limitofRecord = Integer.valueOf(String.escapeSingleQuotes(limits));
        for(sObject obj : [Select Id from RecentlyViewed where Type =:String.escapeSingleQuotes(ObjectName)]){
            recentlyViewedIds.add(obj.Id);
        }
        String queryString = 'Select '+ String.escapeSingleQuotes(fieldsToGet)+
                             ' from '+ String.escapeSingleQuotes(ObjectName) +
                             ' where ID IN:recentlyViewedIds Limit '+ limitofRecord;
      
        return database.query(queryString);
    }
}


The above apex class will be called from the lightning javascript controller doInit function. Below is the lightning controller code

doinit.js
doInit : function(component, event, helper) {
  var action = component.get("c.getRecentRecords");
  var fields = component.get("v.fields");
  action.setParams({
    ObjectName : component.get("v.object"),
    limits : component.get("v.limit"),
    fieldstoget : fields.join()
  });
  action.setCallback(this,function(response){
    // Logic to process the returned value          
  });
  $A.enqueueAction(action);
}


The syntax to call the apex controller from lightning javascript is component.get(“c.MethodName”) you can able to pass parameters to the method using action.setParams({parameters}); here we will be sending the ObjectName, Field names and limit as parameters. The setCallback function where we will form the table dynamically for the returned values from the apex controller.

doinit.js
doInit : function(component, event, helper) {
  var action = component.get("c.getRecentRecords");
  var fields = component.get("v.fields");
  action.setParams({
    ObjectName : component.get("v.object"),
    limits : component.get("v.limit"),
    fieldstoget : fields.join()
  });
  action.setCallback(this,function(response){
    // Logic to process the returned value          
  });
  $A.enqueueAction(action);
}


Final & the important part of the component is UI which should give the native look and feel, so I chose Lightning Design system which brings the new salesforce lightning UI design for the custom component. The lightning component is easy to use similar to the other UI design system. To know more about the lighting design system check this link - https://www.lightningdesignsystem.com/

RecentRecordsController.html
<aura:component controller="RecentRecordsController" implements="force:appHostable,flexipage:availableForAllPageTypes">
    <ltng:require styles="/resource/SLDS080/assets/styles/salesforce-lightning-design-system-vf.css" />
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
        <head>
        </head>    
        <body> 
            <div class="slds">                
                <div class="slds-card__header slds-grid">
                    <div class="slds-media slds-media--center slds-has-flexi-truncate">
                        <div class="slds-media__figure">                           
                        </div>
                        <div class="slds-media__body">
                            <h2 class="slds-text-heading--small slds-truncate">Recently Viewed</h2>
                        </div>
                    </div>                   
                </div>
                <div class="slds-card__body">                    
                    <section class="slds-card__body">
                        <div class="slds-scrollable--x">
                            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">
                                <thead>
                                    <tr class="slds-no-hover">
                                        <aura:iteration items="{!v.fields}" var="field" >
                                        <th class="slds-text-heading--label slds-size--1-of-6" scope="col">{!field}</th>
                                        </aura:iteration>
                                    </tr>
                                </thead>
                                <tbody id="data">
                                </tbody>
                            </table>
                        </div>
                    </section>
                </div>
            </div>            
        </body>
    </html>
</aura:component>


The complete source code of this component is in the following Github repo - https://github.com/Karanraj/RecentItems-Lightning



References


← Back to all writing