Display Generic sObject in Lightning

Posted on by Tushar Sharma

 

In the last post we study how we can iterate map in Lightning. There is one more thing which we face many time is dynamic field binding. Visualforce wit dynamic field binding we can dynamically create field instance but in lightning this is a major limitation.

Today we will see how we can use dynamic sObject binding in visualforce. For this we will create a sample component to display dynamic fields.


<aura:application controller="sObjectDetailController" extends="force:slds">
<aura:attribute name="objName" type="String" default='Account'/>
<aura:attribute name="sObjects" type="sObject[]"/>
<aura:attribute name="fieldNames" type="String[]" default='["Id","Name","Owner.Name"]'/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="slds-m-around_small">
<div class="slds-page-header">
<div class="slds-media">
<div class="slds-media__body">
<div class="slds-box slds-theme_shade">
<p> <h1>Ligtning Component Dynamic Field Binding.</h1></p>
</div>
<br/><br/>
<p class="slds-text-body_small slds-line-height_reset">
<div class="slds-table–header-fixed_container" style="height:450px;">
<div class="slds-scrollable_y" style="height:100%;">
<table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered slds-table_striped">
<thead>
<tr class="slds-text-title_caps">
<aura:iteration items="{!v.fieldNames}" var="fieldName">
<th scope="col">
<div title="{!fieldName}">{!fieldName}</div>
</th>
</aura:iteration>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.sObjects}" var="object">
<tr>
<aura:iteration items="{!v.fieldNames}" var="fieldName">
<th scope="row" data-label="{!fieldName}">
<div class="">
<c:SobjectComponent objName="{!object}" fieldName="{!fieldName}"/>
</div>
</th>
</aura:iteration>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</div>
</p>
</div>
</div><br/>
</div><br/>
</div>
</aura:application>

view raw

sObjectDemo.app

hosted with ❤ by GitHub


({
doInit : function(component, event, helper) {
var action = component.get("c.getsendObjectDetails");
action.setParams({ objName : component.get("v.objName") });
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
//console.log("SUCCESS");
component.set("{!v.sObjects}", response.getReturnValue());
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
},
})

view raw

sObjectDemo.controller

hosted with ❤ by GitHub

Here we will create app to get Object details. for demo I have select Account object we can select any object here. We can also select any fields here including the parent fields(cross reference field).

Now we will pass the object and field name in another component. Where we will display them on UI.


<aura:component >
<aura:attribute name="objName" type="String" />
<aura:attribute name="fieldName" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:formattedText aura:id="fielddata" />
</aura:component>

view raw

SobjectComponent.cmp

hosted with ❤ by GitHub


({
doInit : function(component, event, helper) {
var sobject = component.get('v.objName');
var fieldName = component.get('v.fieldName');
var formatText = component.find("fielddata");
if(!fieldName.includes('.')) {
formatText.set("v.value",sobject[fieldName]);
}
else {
console.log(sobject[fieldName.split(".")[0]]);
formatText.set("v.value",sobject[fieldName.split(".")[0]][fieldName.split(".")[1]]); //Here we are fetching data from parent field
}
}
})

view raw

SobjectComponent.js

hosted with ❤ by GitHub

So here we are using JavaScript to to get data from the field. This is similar of what we have done in Map Iteration post.

To display on UI I am using lightning:formattedText we can also use any other component as well.

dYnamicsObject.png

You can find the complete code here as well.

DO you want to add anything let me know in comments section. Happy programming 🙂

    • 5 thoughts on “Display Generic sObject in Lightning”

    1. Is there anywhere to query data and depend on objects that lighting component display? Let me explain my requirement.

      1.there are 2 objects that was using same my lighting component that i want to create
      2.one object, i want to query by where objecta__c= RecordID and another, i want to query by where accountID=recordID

      Could you please help me to guide with this

      Reply

      1. Yes, Just create a new attribute where we define our where condition and then pass same in controller. In controller Add this in where condition if(String.isNotBlank(whereCond)) { query+= ‘ and ‘+whereCond; }

        Reply
    2. Pingback: Display Generic sObject in Lightning Web Components – Salesforce News Technology Stuff

    3. I am using same for input fields, i am able to display existing value in input field, but when i am updating with new value its not updating. when I debugged the new value is not getting its displaying old value. I am updating in parent component

      Can you please help on this how to use for input fields(child component)

      Reply

    Leave a Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    %d bloggers like this: