Lightning Component to display dynamic sObject data

Here in this blog, we are going to build a Lightning Component to display some standard field's data (Like Id, Name, CreatedByName, etc.,) for any given sObject that we are going to dynamically retrieve based upon record detail page on which our Lightning Component is placed!

First we create a Class with a method to fetch records using sObject Name.....

Below is the Controller Class to return sObject rows:
1:  public class DynamicSObjectResults {  
2:    @AuraEnabled  
3:    public static List<Object> getObjRslts(String objName) {  
4:      String qry = 'Select Id, Name, CreatedBy.Name From ' + objName + ' Limit 6';  
5:      List<Object> lstRcds = Database.query(qry);  
6:      return lstRcds;  
7:    }  
8:  }  

Now we create our Component and Component Controller

Below is the Component Code:
1:  <aura:component controller="DynamicSObjectResults" implements="force:hasRecordId,force:hasSObjectName,flexipage:availableForAllPageTypes" access="global">  
2:    <!--string attribute to hold sobject name-->  
3:    <aura:attribute name="sObjectName" type="String" />  
4:    <!--list attribute to return sobject records from controller-->  
5:    <aura:attribute name="lstRcds" type="Object[]" />  
6:    <!--handler to fetch sobject records using doInit method-->  
7:    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />  
8:    <div class="card-list-heading" align="left">  
9:      <b>sObject Name: {!v.sObjectName}</b>  
10:    </div>  
11:    <div>  
12:      <ul>  
13:        <aura:iteration items="{!v.lstRcds}" var="rcd">  
14:          <div class="slds-card__header slds-grid">  
15:            <li>  
16:              <a href="{! '#/sObject/' + rcd.Id + '/view'}">  
17:                <p>{!rcd.Name}</p>  
18:              </a>  
19:            </li>  
20:          </div>  
21:          <p>Record Id: {!rcd.Id}</p>  
22:        </aura:iteration>  
23:      </ul>  
24:    </div>  
25:  </aura:component>  
**In the above component "force:hasSObjectName" holds a key role, it is going to return specific sObject name

Finally our Component Controller Code:
1:  ({  
2:    doInit : function(component, event, helper) {  
3:      var action = component.get("c.getObjRslts");  
4:      //alert('************' + component.get("v.sObjectName"));  
5:      action.setParams({  
6:        objName: component.get("v.sObjectName"),        
7:      });  
8:      action.setCallback(this, function(data) {  
9:        //alert(data.getReturnValue());  
10:        component.set("v.lstRcds", data.getReturnValue());  
11:      });      
12:      $A.enqueueAction(action);   
13:    }  
14:  })  

Once we have our Component created, we can just place it on any sObject record detail page using Lightning App Builder and our Component will fetch its records (Currently we have set  a Limit of 6 in our Query) and display!

Currently we are fetching only few system fields like Id, Name, CreatedBy.Name. We can further extend our Component code to be able to fetch list of all other field's including custom fields and pass it to our method and fetch data to display

Hope you like this post and any feedback or corrections are always welcome - Thanks!


Popular posts from this blog

Displaying Toast Message from Modal in Lightning Components

Lightning RecordForm - An enhanced Lightning Data Service