Convert Visualforce Checkboxes And Radio Buttons in Lightning Design System Using Javascript

vf2lds
Hi Everyone

As we know that with the Lightning Design System(LDS) we can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering our styles. See here more about LDS.

We have lots of standard visualforce pages. Now a days we all are facing some problems to convert standard visualforce pages in Lightning design system. We need to customize all of the standard things.

We can easily implement LDS to many standard components like checkbox, picklist etc. But in these days i am facing problem in convert list of checkboxes And list of  Radio Buttons to LDS view.

So for this I have written a script to convert list of checkboxes and list of radio buttons to LDS. Using this, we don’t loose our binding with controllers as well.

Update : Previously this script is used for  list of checkboxes, now I have updated it, for list of radio buttons as well.

Script :

    function convertCheckBoxToLDS() {
        var Row = document.getElementsByClassName("convertToLSD");
        for (var k = 0; k < Row.length; k++) {
            var colTds = Row[k].getElementsByTagName("td");
            for (var i = 0; i < colTds.length; i++) {
                var inrHtml = colTds[i].innerHTML;
                var chkId = inrHtml.substring(inrHtml.indexOf("id=") + 4, inrHtml.indexOf("\"", inrHtml.indexOf("id=") + 4));
                var chkBx = inrHtml.substring(inrHtml.indexOf("<input"), inrHtml.indexOf(">") + 1);
                var chkLable = colTds[i].getElementsByTagName("label")[0].textContent;
                var typeOfInput = colTds[i].getElementsByTagName("input")[0].getAttribute("type");
                var newChkBox = '<label class="slds-' + typeOfInput + '" for="' + chkId + '">' + chkBx +
                    '<span class="slds-' + typeOfInput + '--faux"></span>' +
                    '<span class="slds-form-element__label">' + chkLable + '</span>' +
                    '</label>';
                colTds[i].innerHTML = newChkBox;
            }
        }
    }

Here is example :
Create a class :

public class VFToLDSController{
    public List<SelectOption> lstSelOpt{get;set;}
    public VFToLDSController(){
        lstSelOpt = new List<SelectOption>();
        for(integer i=1 ; i<100 ; i++ ){
           lstSelOpt.add( new SelectOption( 'ID-'+i, 'CheckBox'+i ) ); 
        }
    }
}

Create a VisulaforcePage :

<apex:page controller="VFToLDSController" sidebar="false" showHeader="false" standardStylesheets="false">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="{!URLFOR($Resource.SLDS080,'SLDS080/assets/styles/salesforce-lightning-design-system.css')}" type="text/css" rel="stylesheet" />

<style>
    body{
        background-color: whitesmoke;
    }
</style>

<script>
    $( document ).ready(function() {
        convertCheckBoxToLDS();
    });
    
    //Convert standard checkboxes to Lightning Design System
    function convertCheckBoxToLDS() {
        var Row = document.getElementsByClassName("convertToLSD");
        for (var k = 0; k < Row.length; k++) {
            var colTds = Row[k].getElementsByTagName("td");
            for (var i = 0; i < colTds.length; i++) {
                var inrHtml = colTds[i].innerHTML;
                var chkId = inrHtml.substring(inrHtml.indexOf("id=") + 4, inrHtml.indexOf("\"", inrHtml.indexOf("id=") + 4));
                var chkBx = inrHtml.substring(inrHtml.indexOf("<input"), inrHtml.indexOf(">") + 1);
                var chkLable = colTds[i].getElementsByTagName("label")[0].textContent;
                var typeOfInput = colTds[i].getElementsByTagName("input")[0].getAttribute("type");
                var newChkBox = '<label class="slds-' + typeOfInput + '" for="' + chkId + '">' + chkBx +
                    '<span class="slds-' + typeOfInput + '--faux"></span>' +
                    '<span class="slds-form-element__label">' + chkLable + '</span>' +
                    '</label>';
                colTds[i].innerHTML = newChkBox;
            }
        }
    }
</script>

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<div class="slds-page-header nav" role="banner">
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <div class="slds-media">
        <div class="slds-media__figure">
          <b>VF<font style="font-size:40px;color: blue;">2</font>LDS</b>
        </div>
        <div class="slds-media__body">
            <p class="slds-text-heading--label" style="font-size: 15px;margin-top: 13px;">Convert Visualforce checkboxes And Radio Buttons in Lightning Design System Using Javascript</p>
        </div>
      </div>
    </div>    
  </div> 
</div>
<apex:form >       
    <table style="width:100%;margin-left: 16%;">       
        <tr> 
            <td>           
                <h1><b>Before</b></h1>         
                <div style="height:200px;width:200px;" class="slds-scrollable--y">                        
                    <apex:selectCheckboxes layout="pageDirection">
                        <apex:selectOptions value="{!lstSelOpt}"/>
                    </apex:selectCheckboxes>
                </div>
            </td>
            <td>                   
                <h1><b>After</b></h1> 
                <div style="height:200px;width:200px;" class="slds-scrollable--y">                        
                    <apex:selectCheckboxes styleClass="convertToLSD" layout="pageDirection">
                        <apex:selectOptions value="{!lstSelOpt}"/>
                    </apex:selectCheckboxes>
                </div>
            </td>
        </tr>
    </table>        
</apex:form>
</html>
</apex:page>

Happy LDS !!!

Advertisements

2 thoughts on “Convert Visualforce Checkboxes And Radio Buttons in Lightning Design System Using Javascript

  1. Pingback: Convert Visualforce Checkboxes And Radio Buttons in Lightning Design System Using Javascript | SutoCom Solutions

  2. Pingback: Convert Standard Page Messages in Lightning Design System | Vishnu Kumar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s