Skip to content

Instantly share code, notes, and snippets.

@amitastreait
Created February 26, 2018 13:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amitastreait/42e2f6b27c270e0ccd65d3f653f45683 to your computer and use it in GitHub Desktop.
Save amitastreait/42e2f6b27c270e0ccd65d3f653f45683 to your computer and use it in GitHub Desktop.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,force:hasSObjectName"
controller='DynamicBindingDemoController'
access="global" >
<!-- call the doInit method to load the list of All the Available Objects into the Org -->
<aura:handler name='init' value='{!this}' action='{!c.doInit}' />
<aura:attribute name='objectList' type='List' />
<aura:attribute name="isSending" type="boolean" />
<c:Spinner />
<div class="slds-m-around_small">
<div class="slds-page-header">
<div class="slds-media">
<div class="slds-media__body">
<h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Dynamic Binding in Ligtning Component">
Dynamic Field Binding in Ligtning Component</h1>
<p class="slds-text-body_small slds-line-height_reset">
By SFDC Panther • 24/02/2018</p>
</div>
</div><br/>
</div><br/>
<div class="slds-grid slds-wrap">
<div class="slds-size_1-of-2">
<div class="slds-box_x-small">
<!-- show the list of All the Object -->
<lightning:select name="selectObject" label="Select an Object"
onchange="{!c.doHandleChange}" aura:id='selectObject'>
<option value="" text="- None -" />
<aura:iteration items='{!v.objectList}' var='obj'>
<option value="{!obj.key}" text="{!obj.value}" />
</aura:iteration>
</lightning:select>
</div>
</div>
<br/>
<ui:scrollerWrapper class="scrollerSize">
<div class="slds-size_2-of-2">
<div id='sfdctable' aura:id='sfdcDiv'>
<!-- devision that will show the dynamic content -->
</div>
</div>
</ui:scrollerWrapper>
</div>
</div>
</aura:component>
({
doInit : function(component, event, helper) {
helper.onInit(component, event, helper);
},
doHandleChange : function(component, event, helper) {
helper.onHandleChange(component, event, helper);
},
})
({
onInit : function(component, event, helper) {
/* Call the Apex class method to fetch the List of all object */
var action = component.get('c.listAllObject');
action.setCallback(this, function(response){
var state = response.getState();
if(state === 'SUCCESS' && component.isValid()){
/* set the value to the attribute of the component */
var responseValue = response.getReturnValue();
var lstOptions = [];
for(var i=0; i < responseValue.length; i++){
lstOptions.push({
value : responseValue[i].split('####')[1],
key : responseValue[i].split('####')[0]
});
}
lstOptions.sort();
component.set('v.objectList', lstOptions);
}else{
var errors = response.getError();
$A.log(errors);
if(errors || errors[0].message){
console(errors[0].message);
}
}
});
$A.enqueueAction(action);
},
onHandleChange : function(component, event, helper){
/* Call this method whenever user will select the Obejct
* and show the Dynamic Content */
var selObject = component.find('selectObject').get('v.value');
var action = component.get('c.listAllFields');
if(selObject!=null && selObject!='' && selObject!=undefined){
action.setParams({
"objectName" : selObject
});
action.setCallback(this, function(response){
var state = response.getState();
if( state === 'SUCCESS' && component.isValid()){
//component.find("dynamicBody").set("v.body",[]);
component.find('sfdcDiv').set("v.body",[]);
var responseValue = response.getReturnValue();
var objectValue = responseValue.sObjectData;
var fieldList = responseValue.fieldList;
/* Create Dynamic Table */
var sObjectDataTableHeader = [];
// Create table Header
for (var i=0; i < fieldList.length; i++) {
sObjectDataTableHeader.push(fieldList[i].label);
}
console.log(sObjectDataTableHeader);
//Get the count of columns.
var columnCount = sObjectDataTableHeader.length;
//Create a HTML Table element.
var table = document.createElement("TABLE");
//table.border = "1";
//Add the header row.
var row = table.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = sObjectDataTableHeader[i];
headerCell.className='hearderClass';
row.appendChild(headerCell);
}
var dvTable = document.getElementById("sfdctable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
/* Create Dynamic Table End */
if(objectValue.length){
for(var j=0; j < objectValue.length; j++){
// Dynamic table Row
row = table.insertRow(-1);
// Dynamic Table Row End
for (var i=0; i < fieldList.length; i++) {
// Dynamic table Row
var cell = row.insertCell(-1);
cell.innerHTML = objectValue[j][fieldList[i].apiName];
component.set('v.isSending' , false);
}
}
}else{
}
}else{
var errors = response.getError();
$A.log('Error Details '+errors);
if( errors || errors[0].message){
console.log('Error Details '+errors[0].message);
}
}
});
$A.enqueueAction(action);
}else{
component.set('v.isSending' , false);
}
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment