Using The Lightning Design Checkbox Toggles In Salesforce Visualforce
Table of contents
- Step 1: Gathering the resources we need.
- Step 2: The Code.
- Scenario 1: Do something when a toggle is toggled.
- Scenario 2: Get the value of the toggle when a button is clicked or a function is called.
- Scenario 3: Set the value of the toggle when a button is clicked or a function is called.
- Scenario 4: The Toggle is checked by default.
Hello There! Welcome Back
Hope you are doing great
In this blog we are gonna take a look at javascripting Lightning Design System “Checkbox Toggle” component and some different scenarios for using them.
Let’s get started!
Things we will be using:
- The Salesforce Lightning Design System
2) jQuery
Step 1: Gathering the resources we need.
Salesforce Lightning Design System:
Download the Custom Scoped CSS form here with your desired Scoping Class. (be sure to prefix your scoping class with a dot)
The Scoping class wraps your content using the Lightning Design System to avoid CSS conflicts.
I am using “slds” as a scoping class in this blog post.The file you download will be named “salesforce-lightning-design-system.zip”, just rename it to something convenient and short like “SLDS”.
Upload the zip file as your Static Resource.
jQuery:
We will be using CDN for this here, you can always have it as a static resource. Either way is fine.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Now we have all the stuff we need, lets code what we want.
Step 2: The Code.
Set the StandardStylesheets to false and doctype to html-5.0 (All Code Blocks: Line 1)
We put all the resources we need into the page and set jQuery to noConflict mode and Salesforce Lightning Design System Wrapping Div with Scoping Class (All Code Blocks: Lines 2 to 15)
Create SLDS Toggle Component as shown in the SLDS website here,
Now, we have different scenarios as listed and demonstrated below.
Do something when a toggle is toggled.
Get the value of the toggle when a button is clicked or a function is called.
Set the value of the toggle when a button is clicked or a function is called.
The Toggle is checked by default.
The Toggle’s value is either true or false. We can get those values using the ‘checked’ property of the input of the toggle element.
Like(in jQuery):j$('#id_of_the_input_tag_of_the_toggle_element').prop('checked');
Scenario 1: Do something when a toggle is toggled.
<apex:page docType="html-5.0" standardStylesheets="false">
<!–jQuery CDN–>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!–Salesforce Lightning Design System Static Resource–>
<apex:stylesheet value="{!URLFOR($Resource.SLDS213, ‘assets/styles/salesforce-lightning-design-system-vf.min.css’)}" />
<script>
var j$ = jQuery.noConflict();
</script>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<!–The Salesforce Lightning Design System Wrapping Div with Scoping Class –>
<div class="minerva18">
<!–SLDS Checkbox Toggle Element Start–>
<div class="slds-form-element">
<label class="slds-checkbox–toggle slds-grid">
<span class="slds-form-element__label slds-m-bottom–none">Toggle Label</span>
<input id="toggle1" name="checkbox" type="checkbox" aria-describedby="toggle-desc" />
<span id="toggle-desc" class="slds-checkbox–faux_container" aria-live="assertive">
<span class="slds-checkbox–faux"></span>
<span class="slds-checkbox–on">Enabled</span>
<span class="slds-checkbox–off">Disabled</span>
</span>
</label>
</div>
<!–SLDS Checkbox Toggle Element End–>
<div class="slds-text-body–regular slds-m-top–small">The toggle is → <span style="font-weight:bold;" id="toggleValue1">Off</span></div>
<script>
j$(‘#toggle1’).on(‘change’,function() {
//The syntax inside the if statement below returns true for toggle checked and false for toggle unchecked
if(j$(this).prop(‘checked’)){
j$(‘#toggleValue1’).text(‘On’);
}else{
j$(‘#toggleValue1’).text(‘Off’);
}
});
</script>
</div>
</html>
</apex:page>
And it will look like this:
Scenario 2: Get the value of the toggle when a button is clicked or a function is called.
<apex:page docType="html-5.0" standardStylesheets="false">
<!–jQuery CDN–>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!–Salesforce Lightning Design System Static Resource–>
<apex:stylesheet value="{!URLFOR($Resource.SLDS213, ‘assets/styles/salesforce-lightning-design-system-vf.min.css’)}" />
<script>
var j$ = jQuery.noConflict();
</script>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<!–The Salesforce Lightning Design System Wrapping Div with Scoping Class –>
<div class="minerva18">
<!–SLDS Checkbox Toggle Element Start–>
<div class="slds-form-element">
<label class="slds-checkbox–toggle slds-grid">
<span class="slds-form-element__label slds-m-bottom–none">Toggle Label</span>
<input id="toggle2" name="checkbox" type="checkbox" aria-describedby="toggle-desc" />
<span id="toggle-desc" class="slds-checkbox–faux_container" aria-live="assertive">
<span class="slds-checkbox–faux"></span>
<span class="slds-checkbox–on">Enabled</span>
<span class="slds-checkbox–off">Disabled</span>
</span>
</label>
</div>
<!–SLDS Checkbox Toggle Element End–>
<button class="slds-button slds-button–neutral slds-m-top–small" onclick="gtv()">Get Toggle Value</button>
<div class="slds-text-body–regular slds-m-top–small">The toggle is → <span style="font-weight:bold;" id="toggleValue2">Off</span></div>
<script>
function gtv(){
//The syntax inside the if statement below returns true for toggle checked and false for toggle unchecked
if(j$(‘#toggle2’).prop(‘checked’)){
j$(‘#toggleValue2’).text(‘On’);
}else{
j$(‘#toggleValue2’).text(‘Off’);
}
}
</script>
</div>
</html>
</apex:page>
And it will look like this:
Scenario 3: Set the value of the toggle when a button is clicked or a function is called.
<apex:page docType="html-5.0" standardStylesheets="false">
<!–jQuery CDN–>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!–Salesforce Lightning Design System Static Resource–>
<apex:stylesheet value="{!URLFOR($Resource.SLDS213, ‘assets/styles/salesforce-lightning-design-system-vf.min.css’)}" />
<script>
var j$ = jQuery.noConflict();
</script>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<!–The Salesforce Lightning Design System Wrapping Div with Scoping Class –>
<div class="minerva18">
<button class="slds-button slds-button–neutral slds-m-bottom–small" onclick="stv()">Set Toggle Value</button>
<!–SLDS Checkbox Toggle Element Start–>
<div class="slds-form-element">
<label class="slds-checkbox–toggle slds-grid">
<span class="slds-form-element__label slds-m-bottom–none">Toggle Label</span>
<input id="toggle3" name="checkbox" type="checkbox" aria-describedby="toggle-desc" />
<span id="toggle-desc" class="slds-checkbox–faux_container" aria-live="assertive">
<span class="slds-checkbox–faux"></span>
<span class="slds-checkbox–on">Enabled</span>
<span class="slds-checkbox–off">Disabled</span>
</span>
</label>
</div>
<!–SLDS Checkbox Toggle Element End–>
<script>
function stv(){
//The syntax inside the if statement below returns true for toggle checked and false for toggle unchecked
if(j$(‘#toggle3’).prop(‘checked’)){
j$(‘#toggle3’).removeProp(‘checked’);
}else{
j$(‘#toggle3’).prop(‘checked’,’checked’);
}
}
</script>
</div>
</html>
</apex:page>
And it will look like this:
Scenario 4: The Toggle is checked by default.
<apex:page docType="html-5.0" standardStylesheets="false">
<!–jQuery CDN–>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!–Salesforce Lightning Design System Static Resource–>
<apex:stylesheet value="{!URLFOR($Resource.SLDS213, ‘assets/styles/salesforce-lightning-design-system-vf.min.css’)}" />
<script>
var j$ = jQuery.noConflict();
</script>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<!–The Salesforce Lightning Design System Wrapping Div with Scoping Class –>
<div class="minerva18">
<!–SLDS Checkbox Toggle Element Start–>
<div class="slds-form-element">
<label class="slds-checkbox–toggle slds-grid">
<span class="slds-form-element__label slds-m-bottom–none">Toggle Label</span>
<input id="toggle4" name="checkbox" checked="checked" type="checkbox" aria-describedby="toggle-desc" />
<span id="toggle-desc" class="slds-checkbox–faux_container" aria-live="assertive">
<span class="slds-checkbox–faux"></span>
<span class="slds-checkbox–on">Enabled</span>
<span class="slds-checkbox–off">Disabled</span>
</span>
</label>
</div>
<!–SLDS Checkbox Toggle Element End–>
</div>
</html>
</apex:page>
And it will look like this:
There it is! We just learned to javascript the Lightning Design System Checkbox Toggle Component and also the different scenarios for using them.
Awesome, Right?
Let me know in the comments below for which Lightning Design System components you want javascript for.
If you like the content, give it some sharing 🙂