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(";");

  <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); }" />
        <!-- <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"));
                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");
                jQuery("#mainCbx").attr("class", "cbx");    
  • probably best link to transform VF page into Lightning ready – Rohit Mourya Jun 2 '17 at 6:02
  • I've already converted it in lightning but the problem with the background. How can I have the lightning effect in the overall page? The one highlighted with the Black Arrow. – sami ullah Jun 2 '17 at 6:26
  • Do u have an apex:slds tag on the page? – Eric Jun 2 '17 at 6:41
  • I am using the APi version 29 that does not support apex:slds tag. I 've uploaded the SLDS in static resource. – sami ullah Jun 2 '17 at 6:42

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

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

    <apex:repeat  value="{!lstOpport}" var="opp"> 

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



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

Refer Lightning design system

  • 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 2 '17 at 6:40
  • Yes.. because you're using pageblock. Just remove it. – Rohit Mourya Jun 2 '17 at 6: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 2 '17 at 6:51
  • replace it with <div id="block"> or <apex:outputPanel id="block"/>. – Rohit Mourya Jun 2 '17 at 6: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 2 '17 at 7:06

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/

  • 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 2 '17 at 6:25

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.