3

I was able to append my data, and now the data does not align correctly with the column headers as well as it is not sortable (in the code I have sortable enabled. and the check boxes do not align with the first column or with the dataRow.

Screenshot of the table

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')}" />
<script>
// define the assets location for SLDS (this enables to use SLDS' fonts and icons)
var assetsLocation = '{! URLFOR($Resource.LidlSFDesign) }';
</script>
    </head>

<apex:remoteObjects >
  <apex:remoteObjectModel name="ICIX_V1__ICIX_Product__c" 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-no-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">
  <div class="slds-button-group" role="group">
      <button class="slds-button slds-button--neutral">Refresh</button>
  <button class="slds-button slds-button--neutral">Save</button>
  <button class="slds-button slds-button--neutral">Create Requests</button>
      <button class="slds-button slds-button--neutral">New ICIX Product</button>
  </div>
</div>

    <!-- / ACTION BUTTONS -->

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

  <!-- PAGE HEADER DETAIL ROW -->

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

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

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

  <!-- Product LIST TABLE -->

<div id="productTable" class="slds-p-vertical--medium">
<table class="slds-table slds-table--bordered slds-row-hover" id="product-Table">
<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" id="productName">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" id="itemFam">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" id="itemGroup">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" id="elwisId">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-is-sortable" scope="col">
<div class="slds-truncate" id="tPart">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-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>
         window.onload = fetchAllProducts;

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

    var prod = new SObjectModel.ICIX_V1__ICIX_Product__c();

    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.setAttribute("class", "slds-text-data--label");  
            dataRowCell1.appendChild(productName);
            dataRowCell1.setAttribute("data-label", "Product Name");


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

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

                         dataRowCell4 = dataRow.insertCell(4);  
            elwisId = document.createTextNode(record.get("L1dlF0rm0rg__ELWIS_Product_Number__c"));
            dataRowCell4.setAttribute("data-label", "ELWIS Product Number");
            dataRowCell4.setAttribute("class", "slds-text-data--label");  
            dataRowCell4.appendChild(elwisId); 

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

            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>
  • Seems like there is a problem with HTML structure, check generated HTML by JavaScript with inspect element in console. – Raul Oct 25 '16 at 7:50

Your Answer

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

Browse other questions tagged or ask your own question.