Untitled

<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" 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:remoteObjectModel name="ICIX_V1__PP_Relationship__c" fields="Id,Name,LastModifiedDate,RecordTypeId"/>
</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-no-flex slds-grid slds-align-top slds-checkbox--faux">
  <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="" 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="myapp">

  <!-- Product LIST TABLE -->
  <div id="prod-list" class="slds-p-vertical--medium"></div>
  <!-- / Product LIST TABLE -->

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

    <!-- FOOTER -->
    <!-- / FOOTER -->

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

 <!-- JAVASCRIPT -->
<script>
  (function() {
    var prod = new SObjectModel.ICIX_V1__ICIX_Product__c();
    var outputDiv = document.getElementById('prod-list');

    var updateOutputDiv = function() {

      prod.retrieve(
        { orderby: [{ LastModifiedDate: 'DESC' }], limit: 50 },
        function(error, records) {
          if (error) {
            alert(error.message);
          } else {
            // create data table
            var dataTable = document.createElement('table');
            dataTable.className = 'slds-checkbox--faux slds-table slds-table--bordered slds-table--cell-buffer slds-row-hover';

            // add header row
            var tableHeader = dataTable.createTHead();
            var tableHeaderRow = tableHeader.insertRow();

            var tableHeaderRowCell1 = tableHeaderRow.insertCell(0);
            tableHeaderRowCell1.setAttribute('input', 'slds-checkbox--faux');
            tableHeaderRowCell1.appendChild(document.createTextNode('Product name'));
            tableHeaderRowCell1.setAttribute('scope', 'col');
            tableHeaderRowCell1.setAttribute('class', 'slds-text-heading--label');


            var tableHeaderRowCell2 = tableHeaderRow.insertCell(1);
            tableHeaderRowCell2.setAttribute('checkbox', 'slds-checkbox--faux');
            tableHeaderRowCell2.appendChild(document.createTextNode('Item Family Description'));
            tableHeaderRowCell2.setAttribute('scope', 'col');
            tableHeaderRowCell2.setAttribute('class', 'slds-text-heading--label');
            tableHeaderRowCell2.setAttribute('input', 'slds-checkbox--small');

           var tableHeaderRowCell3 = tableHeaderRow.insertCell(2);
            tableHeaderRowCell3.setAttribute('input', 'slds-checkbox--faux');
            tableHeaderRowCell3.appendChild(document.createTextNode('Item Group Description'));
            tableHeaderRowCell3.setAttribute('scope', 'col');
            tableHeaderRowCell3.setAttribute('class', 'slds-text-heading--label');


            var tableHeaderRowCell4 = tableHeaderRow.insertCell(3);
            tableHeaderRowCell4.setAttribute('input', 'slds-checkbox--faux');
            tableHeaderRowCell4.appendChild(document.createTextNode('ELWIS Item Number'));
            tableHeaderRowCell4.setAttribute('scope', 'col');
            tableHeaderRowCell4.setAttribute('class', 'slds-text-heading--label');


            var tableHeaderRowCell5 = tableHeaderRow.insertCell(4);
            tableHeaderRowCell5.setAttribute('input', 'slds-checkbox--faux');
            tableHeaderRowCell5.appendChild(document.createTextNode('Trading Partner'));
            tableHeaderRowCell5.setAttribute('scope', 'col');
            tableHeaderRowCell5.setAttribute('class', 'slds-text-heading--label');


            // build table body
            var tableBody = dataTable.appendChild(document.createElement('tbody'))
            var dataRow, dataRowCell1, dataRowCell2, dataRowCell3, dataRowCell4,dataRowCell5, recordName, recordId;
            records.forEach(function(record) {
              dataRow = tableBody.insertRow();

              dataRowCell1 = dataRow.insertCell(0);
              recordName = document.createTextNode(record.get('Name'));
              dataRowCell1.appendChild(recordName);

             dataRowCell2 = dataRow.insertCell(1);
              ItemFamily = document.createTextNode(record.get('L1dlF0rm0rg__Item_Family_Picklist__c'));
              dataRowCell2.appendChild(ItemFamily);

             dataRowCell3 = dataRow.insertCell(2);
              ItemGroup = document.createTextNode(record.get('L1dlF0rm0rg__Item_Family__c'));
              dataRowCell3.appendChild(ItemGroup);

             dataRowCell4 = dataRow.insertCell(3);
              ELWISId = document.createTextNode(record.get('L1dlF0rm0rg__ELWIS_Product_Number__c'));
              dataRowCell4.appendChild(ELWISId);

              dataRowCell5 = dataRow.insertCell(4);
              TradingPartner = document.createTextNode(record.get('L1dlF0rm0rg__Trading_Partner_Formula__c'));
              dataRowCell5.appendChild(TradingPartner);
            });

            if (outputDiv.firstChild) {

              outputDiv.replaceChild(dataTable, outputDiv.firstChild);
            } else {
              outputDiv.appendChild(dataTable);
            }
          }
        }
      );
    }
    updateOutputDiv();
  })();
</script>
         <script type="text/javascript">
        function selectAllCheckboxes(ICIX_V1__ICIX_Product__c,receivedInputID) {
            var inputCheckbox = document.getElementsByTagName("input");
            for(var i=0; i<inputCheckbox.length; i++) {
                if(inputCheckbox[i].id.indexOf(receivedInputID)!=-1) {
                    inputCheckbox[i].checked = ICIX_V1__ICIX_Product__c.checked;
                }
            }
        }
    </script>
  <!-- / JAVASCRIPT -->

</body>
</html>
</apex:page>