2

I have a visual force page and I want to convert it into lightning. Somehow I replace the PageBlockTable by DataTable to have the lightning effects, but I am having lightning effects only on DataTable. How can I have the lightning effects on whole Visualforce page? enter image description here

I want to have the lightning effect on pointing the Black arrow.

<apex:form id="myform" >
    <apex:actionFunction action="{!newLine}" name="newLine" rerender="myBlock"  />
    <apex:pageBlock title=""  id="myBlock" >
    <apex:inputHidden id="selectedLineNRs" value="{!selectedLineNRs}" />
    <apex:inputHidden id="allLineNRs" value="{!allLineNRs}" />
    <script type="text/javascript">
        var hdnInputIDs = document.getElementById('{!$Component.myPage.myform.myBlock.selectedLineNRs}');
        var arrayIDs = hdnInputIDs.value.split(";");
    </script>

  <apex:dataTable value="{!lines}" var="line" id="table" styleClass="slds-table slds-table--bordered slds-table--cell-buffer" >
    <apex:column value="{!line.lineNumber}" />
    <apex:column >
        <apex:facet name="header">
            <!-- <input type="checkbox" class="mainCbx" onclick="selectAllRows(this.checked);" style="cursor: help;" title="Delete or Credit" /> -->
            <div title="Delete or Credit" class="cbx" width="16px" id="mainCbx" onClick="if(this.className == 'cbx'){ this.className = 'mainSelected'; selectAllRows(true); } else { this.className = 'cbx'; selectAllRows(false); }" />
        </apex:facet>
        <!-- <input type="checkbox" style="background-color: red; cursor: help;" class="cbx_{!line.lineNumber}" onclick="addSelectedID('{!line.lineNumber}');" title="{!line.actionTitle}" /> -->
        <div lang="{!line.actionTitle}" title="{!line.actionTitle}" id="cbx_{!line.lineNumber}" class="cbx" onClick="if(this.className == 'cbx'){ this.className = this.lang; } else { this.className = 'cbx'; } addSelectedID('{!line.lineNumber}');"/>
        <script type="text/javascript">
            if(jQuery.inArray('{!line.lineNumber}', arrayIDs) > -1)
                jQuery("#cbx_{!line.lineNumber}").attr("class", jQuery("#cbx_{!line.lineNumber}").attr("lang"));
            else
                jQuery("#cbx_{!line.lineNumber}").attr("class", "cbx");
            var hdnInputIDs = document.getElementById('{!$Component.myPage.myform.myBlock.selectedLineNRs}');
            var arrayIDs = hdnInputIDs.value.split(";");
            if(arrayIDs.length - 1 == jQuery('.clsTable >tbody >tr').length)
                jQuery("#mainCbx").attr("class", "mainSelected");
            else
                jQuery("#mainCbx").attr("class", "cbx");    
        </script>
    </apex:column>
</apex:dataTable>
compski
  • 1,352
  • 1
  • 27
  • 57
sami ullah
  • 89
  • 12

2 Answers2

3

Try utilizing <table> tag using <apex:repeat>. Refer below example:

<table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Account Name">Account Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Close Date">Close Date</div>
      </th>

    </tr>
  </thead>
   <tbody>
    <apex:repeat  value="{!lstOpport}" var="opp"> 

        <tr>
          <th scope="row" data-label="Opportunity Name">
            <div class="slds-truncate" title="Cloudhub">
              <a href="javascript:void(0);">{!Opp.Name}</a>
            </div>
          </th>
          <td data-label="Account Name">
            <div class="slds-truncate" title="Cloudhub">{!Opp.AccountId}</div>
          </td>
          <td data-label="Close Date">
            <div class="slds-truncate" title="4/14/2015">{!Opp.CloseDate}</div>
          </td>

        </tr>
        <tr>

    </apex:repeat>
    </tbody>
</table>

Edit: Replace pageblock with <div id="block"> or <apex:outputPanel id="block"/>

Refer Lightning design system

Rohit Mourya
  • 3,861
  • 2
  • 15
  • 23
  • I've done it and working fine if you see the attached pic. The problem is with the background of the whole page. If you see the black arrow that part is still in Classis I want that part in lightning. – sami ullah Jun 02 '17 at 06:40
  • Yes.. because you're using pageblock. Just remove it. – Rohit Mourya Jun 02 '17 at 06:46
  • Ok but pageBlock is necessary for me as I am rendering some of the page blocks. Is there any way to apply the lighting on all the page blocks? – sami ullah Jun 02 '17 at 06:51
  • replace it with <div id="block"> or <apex:outputPanel id="block"/>. – Rohit Mourya Jun 02 '17 at 06:52
  • Thanks it works and the only problem left with pageBlockButtons. I remove the PageBlockButton tag and replace it with apex:outputpanel and it shows the button fully left side and the buttons are congested. – sami ullah Jun 02 '17 at 07:06
  • That should be not difficult – Rohit Mourya Jun 02 '17 at 07:08
0

Well, assuming you just want to adapt the visualforce and not re-develop with components or anything, your best bet would be to import SLDS at the start of the file and add the corresponding CSS classes to each tag. For that check the docs at: https://www.lightningdesignsystem.com/platforms/visualforce/

Javier García Manzano
  • 3,417
  • 5
  • 27
  • 61
  • I've uploaded the static resources and using it on my page. There is just the background which is still in classic, I highlight it with the Black Arrow. Can you tell me How can I convert it in lightning.? using the SLDS styleClass in apex form or where? – sami ullah Jun 02 '17 at 06:25