Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!--
Description: The main script to convert select list/radio from classic to lightning UI.
Author: Vishnu Kumar
-->
<style>
.convertToLSD{
opacity: 0;
}
</style>
<script>
//Convert Standard Checkboxes and Radio Buttons to SLDS
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;
}
Row[k].style.opacity = 1;
}
}
</script>
<!--
Description: Demo of using the auto conversion select list from classic to lightning.
Author: Vishnu Kumar
-->
<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 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">
<!--This list will be converted in SLDS format-->
<!--I have specified styleclass here as convertToLSD. The script will pick this list only.-->
<apex:selectCheckboxes styleClass="convertToLSD" layout="pageDirection">
<apex:selectOptions value="{!lstSelOpt}"/>
</apex:selectCheckboxes>
</div>
</td>
</tr>
</table>
</apex:form>
</html>
</apex:page>
/*
Description: This class is generation dummy data for select list.
Author: Vishnu Kumar
*/
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 ) );
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.