Sign Up ›
  • Prateek jain 76
  • NEWBIE
  • 0 Points
  • Member since 2017
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 0
    Replies
18 replies

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:
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.