2

I am creating a page through Visualforce and the Lightning design system, and my data is not showing up, neither is the table itself. I have the header as it is built into the Product List Table commented out section in the body.

The dev console shows 23 rows of data in the SOQL Query from the controller and that is from the logs not the query editor. The controller is reading and grabbing the information. Just the Table and data are not showing. I have tried many different things to make this show.

Please help!

CODE:

<apex:page controller="PLPcontroller" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Lidl US</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <apex:stylesheet value="{!URLFOR($Resource.LidlSFDesign, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />

    </head>

<apex:remoteObjects >
  <apex:remoteObjectModel name="ICIX_V1__ICIX_Product__c" jsShorthand="prod" fields="Id,Name,LastModifiedDate,ICIX_V1__ICIX_Product_ID__c,L1dlF0rm0rg__ELWIS_Product_Number__c,L1dlF0rm0rg__Item_Family_Picklist__c,L1dlF0rm0rg__Item_Family__c,L1dlF0rm0rg__Trading_Partner_Formula__c"/>
</apex:remoteObjects>


    <body>  

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="Lidl-Scoping">    


    <!-- PAGE HEADER -->

 <div class="slds-page-header" role="banner">
  <!-- LAYOUT GRID -->
  <div class="slds-grid">

    <!-- GRID COL -->
    <div class="slds-col slds-has-flexi-truncate">
      <!-- HEADING AREA -->



        <!-- MEDIA OBJECT = IcixProductIcon -->
<div class="slds-media">
  <div class="slds-media__icon">
    <span class="icix-Products-icon">
        <img src="{!URLFOR($Resource.LidlSFDesign, 'assets/icons/custom/custom4_60.png')}" alt="" />
    </span>
  </div>
  <div class="slds-media__body">
    <h1 class="slds-page-header__title slds-s-right--small slds-align-relative slds-truncate" title="Product Listing Plan">Product Listing Plan</h1>
  </div>
</div>

<!-- / MEDIA OBJECT -->
      <!-- / HEADING AREA -->
    </div>

    <!-- ACTION BUTTONS -->
      <div class="slds-col slds-flex slds-grid slds-align-top slds-checkbox--faux cell-buffer">
  <div class="slds-button-group" role="group">
      <button class="slds-button slds-button--neutral">Refresh</button>
  <button class="slds-button slds-button--neutral">Edit</button>
  <button class="slds-button slds-button--neutral">Save</button>
    <button class="slds-button slds-button--neutral"> 
        <a href="/apex/FindProduct?retURL=%2Fa0M%2Fo&save_new=1&sfdc.override=1" tabindex="-1" role="presentation" class="slds-truncate"> </a>
      New ICIX Product
    </button>
    <button class="slds-button slds-button--neutral">
      More
    </button>
  </div>
</div>

    <!-- / ACTION BUTTONS -->

  </div>
  <!-- / LAYOUT GRID -->

  <!-- PAGE HEADER DETAIL ROW -->

  <!-- / PAGE HEADER DETAIL ROW -->

</div>
    <!-- / PAGE HEADER -->

    <!-- PRIMARY CONTENT WRAPPER -->
<div class="LidlUS">

  <!-- Product LIST TABLE -->

<div id="productList" class="slds-p-vertical--medium">
<table class="slds-table slds-table--bordered">
<thead>
<tr class="slds-text-heading--label">
<th class="slds-cell-shrink">
<label class="slds-checkbox">
<input type="checkbox" name="options" />
<span class="slds-checkbox--faux"></span>
<span class="slds-assistive-text">Select All</span>
</label>
</th>
<th class="slds-is-sortable" scope="col">
<div class="slds-truncate">Product Name
<button class="slds-button slds-button--icon-bare">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xlink:href="{! URLFOR($Resource.LidlSFDesign, '/assets/icons/utility-sprite/svg/symbols.svg#arrowdown') }"></use>
</svg>
<span class="slds-assistive-text">Sort</span>
</button>
</div>
</th>
<th class="slds-is-sortable" scope="col">
<div class="slds-truncate">Item Family
<button class="slds-button slds-button--icon-bare">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xlink:href="{! URLFOR($Resource.LidlSFDesign, '/assets/icons/utility-sprite/svg/symbols.svg#arrowdown') }"></use>
</svg>
<span class="slds-assistive-text">Sort</span>
</button>
</div>
</th>
<th class="slds-is-sortable" scope="col">
<div class="slds-truncate">Item Group
<button class="slds-button slds-button--icon-bare">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xlink:href="{! URLFOR($Resource.LidlSFDesign, '/assets/icons/utility-sprite/svg/symbols.svg#arrowdown') }"></use>
</svg>
<span class="slds-assistive-text">Sort</span>
</button>
</div>
</th>
<th class="slds-is-sortable" scope="col">
<div class="slds-truncate">Trading Partner
<button class="slds-button slds-button--icon-bare">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xlink:href="{! URLFOR($Resource.LidlSFDesign, '/assets/icons/utility-sprite/svg/symbols.svg#arrowdown') }"></use>
</svg>
<span class="slds-assistive-text">Sort</span>
</button>
</div>
</th>
<th class="slds-is-sortable" scope="col">
<div class="slds-truncate">ELWIS Item Number
<button class="slds-button slds-button--icon-bare">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
<use xlink:href="{! URLFOR($Resource.LidlSFDesign, '/assets/icons/utility-sprite/svg/symbols.svg#arrowdown') }"></use>
</svg>
<span class="slds-assistive-text">Sort</span>
</button>
</div>
</th>
<th class="slds-cell-shrink"></th>
</tr>
</thead>
</table>
</div>
  <!-- / Product LIST TABLE -->

</div>
    <!-- / PRIMARY CONTENT WRAPPER -->

<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around--large">
<!-- LAYOUT GRID -->
<div class="slds-grid slds-grid--align-spread">
<p class="slds-col">Powered by ICIX</p>
<p class="slds-col">&copy; 2016 ICIX </p>
</div>
<!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->

  </div>
  <!-- / REQUIRED SLDS WRAPPER -->    

 <!-- JAVASCRIPT -->

<script> 

var prods = new SObjectModel.prod();
var productTable = document.getElementById("productTable");

// fetching all products and fill the table
 function fetchAllProducts(){

  prod.retrieve({orderby: [{Name: 'DESC'}]},
      function(error, records) {
        if (error) {
          alert(error.message);
        } else {
    var dataTable = document.createElement('table');
      dataTable.className = 'slds-checkbox--faux slds-table slds-table--bordered slds-table--cell-buffer slds-row-hover';
          // build table body
          var tableBody = dataTable.appendChild(document.createElement('tbody'));
          var dataRow, dataRowCell1, dataRowCell2, dataRowCell3, dataRowCell4, dataRowCell5, productName, itemFam, itemGroup, elwisId, tradingPart;
          records.forEach(function(record) {
    dataRow = tableBody.insertRow();
    dataRow.setAttribute("class", "slds-hint-parent");

    dataRowCell1 = dataRow.insertCell(0);
    dataRowCell1.setAttribute("class", "slds-cell-shrink");
    dataRowCell1.setAttribute("data-label", "Select Row");

    var lbl = document.createElement('label');
    lbl.setAttribute("class", "slds-checkbox");
    lbl.innerHTML = '<input type="checkbox" name="options" /><span class="slds-checkbox--faux"></span><span class="slds-assistive-text">Select Row</span>';
    dataRowCell1.appendChild(lbl);
    dataRowCell1 = dataRow.insertCell(1);

    productName = document.createElement('a');
    productName.setAttribute('href','/' + record.get("Id"));
    productName.innerHTML = record.get("Name");
    dataRowCell1.appendChild(productName);
    dataRowCell1.setAttribute("data-label", "Product Name");

    dataRowCell2 = dataRow.insertCell(2);
    itemFam = document.createTextNode(record.get("L1dlF0rm0rg__Item_Family_Picklist__c"));  
    dataRowCell2.appendChild(itemFam);
    dataRowCell2.setAttribute("data-label", "Item Family");

    dataRowCell3 = dataRow.insertCell(3);
    itemGroup = document.createTextNode(record.get("L1dlF0rm0rg__Item_Family__c"));
    dataRowCell3.appendChild(itemGroup);
    dataRowCell3.setAttribute("data-label", "Item Group");

    dataRowCell4 = dataRow.insertCell(4);
    elwisId = document.createTextNode(record.get("L1dlF0rm0rg__ELWIS_Product_Number__c"));
    dataRowCell4.appendChild(elwisId);
    dataRowCell4.setAttribute("data-label", "Elwis Item Number");

    dataRowCell5 = dataRow.insertCell(5);
    tradingPart = document.createTextNode(record.get("L1dlF0rm0rg__Trading_Partner_Formula__c"));
    dataRowCell5.appendChild(tradingPart);
    dataRowCell5.setAttribute("data-label", "Trading Partner"); 


    dataRowCell1 = dataRow.insertCell(6);
    dataRowCell1.setAttribute("class", "slds-cell-shrink");
    dataRowCell1.setAttribute("data-label", "Actions");

    var btn = document.createElement('button');
    btn.setAttribute("class", "slds-button slds-button--icon-border-filled slds-button--icon-x-small");
    btn.innerHTML = "<svg aria-hidden=\"true\" class=\"slds-button__icon slds-button__icon--hint slds-button__icon--small\"><use xlink:href=\"{! URLFOR($Resource.LidlSFDesign, '/assets/icons/utility-sprite/svg/symbols.svg#down') }\"></use></svg><span class=\"slds-assistive-text\">Show More</span>";
    dataRowCell1.appendChild(btn);
              });
        }
      }
    );

   </script>
  <!-- / JAVASCRIPT -->

</body>
</html>
</apex:page>
  • Where are you calling fetchAllProducts? – Raul Oct 24 '16 at 11:18
  • I don't see any code where you are appending the rows to table in JavaScript – Raul Oct 24 '16 at 11:32
2

You are just preparing the table but not have appended the table in JavaScript, here is a working example:

<apex:page standardController="Account" showHeader="false" standardStylesheets="false" 
  sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Lidl US</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <apex:stylesheet value="{!URLFOR($Resource.SLDS_2_1_3, 
    'assets/styles/salesforce-lightning-design-system.min.css')}" />

</head>

<apex:remoteObjects >
  <apex:remoteObjectModel name="Account" jsShorthand="prod" fields="Id,Name"/>
</apex:remoteObjects>

<body>  

  <div class="Lidl-Scoping">    

    <div class="slds-page-header" role="banner">

      <div class="slds-grid">

        <div class="slds-col slds-has-flexi-truncate">

          <div class="slds-media">
            <div class="slds-media__icon">
              <span class="icix-Products-icon">
                  <img src="{!URLFOR($Resource.SLDS_2_1_3, 
                    'assets/icons/custom/custom4_60.png')}" alt="" />
              </span>
            </div>
            <div class="slds-media__body">
              <h1 class="slds-page-header__title slds-s-right--small slds-align-relative slds-truncate" 
                title="Product Listing Plan">Product Listing Plan</h1>
            </div>
          </div>

        </div>

      </div>

    </div>

    <div class="LidlUS">

      <div id="productList" class="slds-p-vertical--medium">
        <table class="slds-table slds-table--bordered" id="productTable">
          <thead>
            <tr class="slds-text-heading--label">
              <th class="slds-cell-shrink">
                <label class="slds-checkbox">
                  <input type="checkbox" name="options" />
                  <span class="slds-checkbox--faux"></span>
                  <span class="slds-assistive-text">Select All</span>
                </label>
              </th>
              <th class="slds-is-sortable" scope="col">
                <div class="slds-truncate">Product Name
                  <button class="slds-button slds-button--icon-bare">
                    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
                      <use xlink:href="{! URLFOR($Resource.SLDS_2_1_3, 
                        '/assets/icons/utility-sprite/svg/symbols.svg#arrowdown') }"></use>
                    </svg>
                    <span class="slds-assistive-text">Sort</span>
                  </button>
                </div>
              </th>
              <th class="slds-cell-shrink"></th>
            </tr>
          </thead>
        </table>
      </div>

    </div>

    <footer role="contentinfo" class="slds-p-around--large">
      <div class="slds-grid slds-grid--align-spread">
        <p class="slds-col">Powered by ICIX</p>
        <p class="slds-col">&copy; 2016 ICIX </p>
      </div>
    </footer>

  </div>

  <script> 

  window.onload = fetchAllProducts;

  // fetching all products and fill the table
  function fetchAllProducts(){

    var prod = new SObjectModel.prod();

    prod.retrieve({orderby: [{Name: 'DESC'}]},
      function(error, records) {
        if (error) {
          alert(error.message);
        } else {

          // access the existing product table to append rowsa
          var productTable = document.getElementById("productTable");

          // build table body
          var tableBody = productTable.appendChild(document.createElement('tbody'));
          var dataRow, dataRowCell1, dataRowCell2, dataRowCell3, dataRowCell4, 
            dataRowCell5, productName, itemFam, itemGroup, elwisId, tradingPart;
          records.forEach(function(record) {

            dataRow = tableBody.insertRow();
            dataRow.setAttribute("class", "slds-hint-parent");

            dataRowCell1 = dataRow.insertCell(0);
            dataRowCell1.setAttribute("class", "slds-cell-shrink");
            dataRowCell1.setAttribute("data-label", "Select Row");

            var lbl = document.createElement('label');
            lbl.setAttribute("class", "slds-checkbox");
            lbl.innerHTML = '<input type="checkbox" name="options" />'+
              '<span class="slds-checkbox--faux"></span>'+
              '<span class="slds-assistive-text">Select Row</span>';
            dataRowCell1.appendChild(lbl);
            dataRowCell1 = dataRow.insertCell(1);

            productName = document.createElement('a');
            productName.setAttribute('href','/' + record.get("Id"));
            productName.innerHTML = record.get("Name");
            dataRowCell1.appendChild(productName);
            dataRowCell1.setAttribute("data-label", "Product Name");

            dataRowCell1 = dataRow.insertCell(2);
            dataRowCell1.setAttribute("class", "slds-cell-shrink");
            dataRowCell1.setAttribute("data-label", "Actions");

            var btn = document.createElement('button');
            btn.setAttribute("class", "slds-button slds-button--icon-border-filled slds-button--icon-x-small");
            btn.innerHTML = "<svg aria-hidden=\"true\" "+
              "class=\"slds-button__icon slds-button__icon--hint slds-button__icon--small\">"+
              "<use xlink:href=\"{! URLFOR($Resource.SLDS_2_1_3, "+
                "'/assets/icons/utility-sprite/svg/symbols.svg#down') }\"></use>"+
              "</svg><span class=\"slds-assistive-text\">Show More</span>";
            dataRowCell1.appendChild(btn);
          });

        }
      }
    );
  }
   </script>
  <!-- / JAVASCRIPT -->

</body>
</html>
</apex:page>
  • @Rahula Sharma, – Jason Oct 24 '16 at 15:13
  • @Rahula Sharma I put your code in my dev console as a test and I am getting a Syntax Error. Missing ")" Line 0 . I have been searching around for missing ) or semi-colons. I also tried adding in the pieces from your code into my code and I was unsuccessful. – Jason Oct 24 '16 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.