You need to sign in to do that
Don't have an account?
Akanksha Gupta 77
how to make a dynamic table using list in lightning component
Hi all I am new to lightning component so can anyone tell me how to display the list of records fetched from apex class in a form of dynamic table in lightning component
helper class
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 selfield=component.get('v.selectedArray');
console.log('JSON.stringify(selfield)',JSON.stringify(selfield));
var selected=JSON.stringify(selfield);
var action = component.get('c.listAllFields');
if(selected!=null && selected!='' && selected!=undefined){
action.setParams({
"fieldlist" : selected
});
action.setCallback(this, function(response){
var state = response.getState();
if( state === 'SUCCESS' && component.isValid()){
component.find('sfdcDiv').set("v.body",[]);
//var responseValue=response.getReturnValue();
// var responseValue = JSON.parse(response.getReturnValue());
// var responseValue = JSON.stringify(response.getReturnValue());
console.log('responseValue'+responseValue);
component.set( 'v.response', 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);
}
},
Apex class:
public static DynamicBindingWrapper listAllFields(String fieldlist){
String[] lststr;
String response = '';
lststr=(string[])JSON.deserialize(fieldlist,List<String>.class);
System.debug('lststr'+lststr);
String objectname='Account';
System.debug('fieldlist'+fieldlist);
System.debug('objectname'+objectname);
DynamicBindingWrapper dynamicData = new DynamicBindingWrapper();
List<fieldDataWrapper> wrapperList = new List<fieldDataWrapper>();
// Create Dynamic Query Start ..
String theQuery = 'SELECT Id ';
//List<String> str=new List<String>();
//str.addAll(fieldlist);
for(String s:lststr){
theQuery=theQuery+', '+s;
}
System.debug('theQuery'+theQuery);
//theQuery = theQuery.subString(0, theQuery.length() - 1);
theQuery=theQuery+' FROM '+objectname;
System.debug('theQuery'+theQuery);
List<sObject>mydata=Database.query(theQuery);//execute query
if(mydata!=null && mydata.size()>0)
dynamicData.sObjectData = mydata;
else
dynamicData.sObjectData = new List<sObject>{};
dynamicData.fieldList = wrapperList;
System.debug('#### dynamicData '+dynamicData);
/* response = JSON.serialize(dynamicData);
System.debug('response'+response);
return response;*/
return dynamicData;
}
public class DynamicBindingWrapper{
@AuraEnabled
public List<sObject> sObjectData { get; set; }
@AuraEnabled
public List<fieldDataWrapper> fieldList { get; set; }
}
/*
* Class to store the field information
*/
public class fieldDataWrapper{
@AuraEnabled
public String label { get; set; }
@AuraEnabled
public String apiName { get; set; }
}
helper class
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 selfield=component.get('v.selectedArray');
console.log('JSON.stringify(selfield)',JSON.stringify(selfield));
var selected=JSON.stringify(selfield);
var action = component.get('c.listAllFields');
if(selected!=null && selected!='' && selected!=undefined){
action.setParams({
"fieldlist" : selected
});
action.setCallback(this, function(response){
var state = response.getState();
if( state === 'SUCCESS' && component.isValid()){
component.find('sfdcDiv').set("v.body",[]);
//var responseValue=response.getReturnValue();
// var responseValue = JSON.parse(response.getReturnValue());
// var responseValue = JSON.stringify(response.getReturnValue());
console.log('responseValue'+responseValue);
component.set( 'v.response', 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);
}
},
Apex class:
public static DynamicBindingWrapper listAllFields(String fieldlist){
String[] lststr;
String response = '';
lststr=(string[])JSON.deserialize(fieldlist,List<String>.class);
System.debug('lststr'+lststr);
String objectname='Account';
System.debug('fieldlist'+fieldlist);
System.debug('objectname'+objectname);
DynamicBindingWrapper dynamicData = new DynamicBindingWrapper();
List<fieldDataWrapper> wrapperList = new List<fieldDataWrapper>();
// Create Dynamic Query Start ..
String theQuery = 'SELECT Id ';
//List<String> str=new List<String>();
//str.addAll(fieldlist);
for(String s:lststr){
theQuery=theQuery+', '+s;
}
System.debug('theQuery'+theQuery);
//theQuery = theQuery.subString(0, theQuery.length() - 1);
theQuery=theQuery+' FROM '+objectname;
System.debug('theQuery'+theQuery);
List<sObject>mydata=Database.query(theQuery);//execute query
if(mydata!=null && mydata.size()>0)
dynamicData.sObjectData = mydata;
else
dynamicData.sObjectData = new List<sObject>{};
dynamicData.fieldList = wrapperList;
System.debug('#### dynamicData '+dynamicData);
/* response = JSON.serialize(dynamicData);
System.debug('response'+response);
return response;*/
return dynamicData;
}
public class DynamicBindingWrapper{
@AuraEnabled
public List<sObject> sObjectData { get; set; }
@AuraEnabled
public List<fieldDataWrapper> fieldList { get; set; }
}
/*
* Class to store the field information
*/
public class fieldDataWrapper{
@AuraEnabled
public String label { get; set; }
@AuraEnabled
public String apiName { get; set; }
}
Greetings to you!
Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
Apex:
Component:
Controller:
CSS:
Please refer to the below links which might help you further with the above requirement.
https://sfcure.com/2017/09/26/lightning-component-display-records-in-a-dynamic-table-using-fieldset-on-any-object/
https://sfdcpanther.wordpress.com/2018/02/23/dynamic-binding-salesforce-lightning-component/
https://blogs.absyz.com/2018/04/25/dynamic-reusable-lightning-table-component/
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
I am not getting how to only select the selected fields from the fields map. can u please suggest me something