Apex Code Development You need to sign in to do that
Don't have an account?
Prateek jain 76 Need to create dynamic table in lightning
Hi All ,
I have requirment where i need to display the dynamic table in lightning based on the Object , fileds paased from the Components and display it in vf page.
Please see the code that i am trying here:
===Application====
<aura:application access="GLOBAL" extends="ltng:outApp" >
<c:PMD_LightningHomepage object="Opportunity" fields="Id" limit="5" tableId="table1"/>
<aura:dependency resource="c:PMD_LightningHomepage " />
</aura:application>
===Component==
<aura:component controller="controller" implements="force:appHostable,flexipage:availableForAllPageTypes">
<ltng:require styles="/resource/SDLC212/assets/styles/salesforce-lightning-design-system-vf.min.css" />
<aura:attribute name="object" type="String" />
<aura:attribute name="limit" type="String" default="5" />
<aura:attribute type="sObject[]" name="latestRecords" />
<aura:attribute name="fields" type="String[]" default="Id,Name" />
<aura:attribute name="tableId" type="String"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
</head>
<body>
<div class="wrapperscoop">
<div class="slds-card__header slds-grid">
<div class="slds-media slds-mcate">
<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="{!v.tableId}">
</tbody>
</table>
</div>
</section>
</div>
</div>
</body>
</html>
</aura:component>
===Js-controller=====
({
doInit : function(component, event, helper) {
var action = component.get("c.getRecords");
var fields = component.get("v.fields");
var tableId = component.get("v.tableId");
action.setParams({
ObjectName : component.get("v.object"),
limits : component.get("v.limit"),
//alert('Check1' + fields);
fieldstoget : fields.join()
});
action.setCallback(this,function(response){
var delayMillis = 1000;
var state = response.getState();
if(state === 'SUCCESS'){
component.set("v.latestRecords",response.getReturnValue());
var retRecords = response.getReturnValue();
retRecords.forEach(function(s) {
var tableRow = document.createElement('tr');
fields.forEach(function(field){
var tableData = document.createElement('td');
var tableDataNode = document.createTextNode(s[field]);
tableData.appendChild(tableDataNode);
tableRow.appendChild(tableData);
});
// alert(tableId);
//alert('tableval' + document.getElementById(tableId) );
setTimeout(function() {
alert(document.getElementById(component.get("{!v.tableId}")));
document.getElementById(component.get("{!v.tableId}")).appendChild(tableRow);
}, delayMillis);
});
}else if (state === "ERROR") {
console.log('Error');
}
});
$A.enqueueAction(action);
}
})
But when i try calling it from Vf page its not able to take the div id and reads it null and hence shows below error , can anybody help me on this,thanks..
Error:
I have requirment where i need to display the dynamic table in lightning based on the Object , fileds paased from the Components and display it in vf page.
Please see the code that i am trying here:
===Application====
<aura:application access="GLOBAL" extends="ltng:outApp" >
<c:PMD_LightningHomepage object="Opportunity" fields="Id" limit="5" tableId="table1"/>
<aura:dependency resource="c:PMD_LightningHomepage " />
</aura:application>
===Component==
<aura:component controller="controller" implements="force:appHostable,flexipage:availableForAllPageTypes">
<ltng:require styles="/resource/SDLC212/assets/styles/salesforce-lightning-design-system-vf.min.css" />
<aura:attribute name="object" type="String" />
<aura:attribute name="limit" type="String" default="5" />
<aura:attribute type="sObject[]" name="latestRecords" />
<aura:attribute name="fields" type="String[]" default="Id,Name" />
<aura:attribute name="tableId" type="String"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
</head>
<body>
<div class="wrapperscoop">
<div class="slds-card__header slds-grid">
<div class="slds-media slds-mcate">
<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="{!v.tableId}">
</tbody>
</table>
</div>
</section>
</div>
</div>
</body>
</html>
</aura:component>
===Js-controller=====
({
doInit : function(component, event, helper) {
var action = component.get("c.getRecords");
var fields = component.get("v.fields");
var tableId = component.get("v.tableId");
action.setParams({
ObjectName : component.get("v.object"),
limits : component.get("v.limit"),
//alert('Check1' + fields);
fieldstoget : fields.join()
});
action.setCallback(this,function(response){
var delayMillis = 1000;
var state = response.getState();
if(state === 'SUCCESS'){
component.set("v.latestRecords",response.getReturnValue());
var retRecords = response.getReturnValue();
retRecords.forEach(function(s) {
var tableRow = document.createElement('tr');
fields.forEach(function(field){
var tableData = document.createElement('td');
var tableDataNode = document.createTextNode(s[field]);
tableData.appendChild(tableDataNode);
tableRow.appendChild(tableData);
});
// alert(tableId);
//alert('tableval' + document.getElementById(tableId) );
setTimeout(function() {
alert(document.getElementById(component.get("{!v.tableId}")));
document.getElementById(component.get("{!v.tableId}")).appendChild(tableRow);
}, delayMillis);
});
}else if (state === "ERROR") {
console.log('Error');
}
});
$A.enqueueAction(action);
}
})
But when i try calling it from Vf page its not able to take the div id and reads it null and hence shows below error , can anybody help me on this,thanks..
Error:
This page has an error. You might just need to refresh it. Error in $A.getCallback() [Cannot read property 'appendChild' of null] Callback failed: apex://PMD_DispRecordsController/ACTION$getRecords Failing descriptor: {markup://c:PMD_LightningHomepage}
Please suggest .
Note : This coponnent Works fine when i do not call it from Vf page i.e preview it directly.
Please suggest .
Note : This coponnent Works fine when i do not call it from Vf page i.e preview it directly.
Will that code work on vf as well?? I realy appricate your help here i fyou can send me the code at prateek_jain61@yahoo.com.
Awaiting your reply on this, thanks
Hi, can you please send the code to vicky77kr@gmail.com
Thanks
Thank you!
Thank you!
I too am looking for the same solution. Can you share your code with me? kpshome@gmail.com
Thank you.
I am working on the same requirement, have to add filter on the rows, it would be great help if u send me the code to this mail anil.gangarajaiah11@gmail.com
I needed double qoutes on the element create to get it to work:
var tableRow = document.createElement("tr");