Tuesday, 22 November 2016

Using Bootstrap Toggle a Highly Flexible Bootstrap Plugin that Converts Checkboxes into Toggles in XPages

One of the requirements for a new XPages Project constisted of a toggle functionality for checkboxes. In my search I came across the Bootstrap Toggle Plugin, a highly flexible Bootstrap plugin that converts checkboxes into toggles. Options can be passed via data attributes or JavaScript. For data attributes, it is only necessary to append the option name to data-, as in data-on="Enabled". It is also possible to use Methods to control toggles directly. Below is an example of how the Bootstrap Toggle Plugin can be used in an XPages application.
In order to use the Bootstrap Toggle Plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Bootstrap Toggle.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder bootstraptoggle has been added in the WebContent Folder.
Next the JavaScript and CSS files, bootstrap-toggle.js and bootstrap-toggle.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<link rel="stylesheet" href="bootstraptoggle/css/bootstrap-toggle.css" />
<script type="text/javascript" src="bootstraptoggle/js/bootstrap-toggle.js"></script>

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries.

The script itself can be made up as follows. In this example I use a few Options including Font Awesome.


<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:checkBox1}" ).bootstrapToggle({
on: "<i class='fa fa-play'></i> Play",
off: "<i class='fa fa-pause'></i> Pause",
onstyle:'info',
offstyle:'danger',
size:'small'
});
})
]]></xp:this.value>
</xp:scriptBlock>

Basic Setup Checkbox
In the example below I use some data-attributes which can not be included as shorthand property in the x$ jQuery selector for XPages.

<xp:checkBox text="" id="checkBox1"
value="#{document1.FIELDNAME}" checkedValue="Yes"
uncheckedValue="No">
<xp:this.attrs>
<xp:attr name="checked" value="checked"></xp:attr>
<xp:attr name="data-onstyle" value="info"></xp:attr>
</xp:this.attrs>
</xp:checkBox>

Final Result
The final result is a responsive Bootstrap Toggle functionality with some additional options in the initial setup.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<style>
.slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; }
.fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; }
.quick .toggle-group { transition: none; -webkit-transition: none; }
</style>
<xp:this.data>
<xp:dominoDocument var="document1" formName="Visitors"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="bootstraptoggle/css/bootstrap-toggle.css" />
<script type="text/javascript" src="bootstraptoggle/js/bootstrap-toggle.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:checkBox1}" ).bootstrapToggle({
on: "<i class='fa fa-play'></i> Play",
off: "<i class='fa fa-pause'></i> Pause",
onstyle:'info',
offstyle:'danger',
size:'small'
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:checkBox2}" ).bootstrapToggle({
on: 'Yes',
off: 'No',
onstyle:'primary',
offstyle:'danger',
size:'small'
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h4>Bootstrap Toggle</h4>
<h5>
Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.
</h5>
<br />
<div class="row">
<div class="col-sm-2">
<xp:checkBox text="" id="checkBox1"
value="#{document1.Video}" checkedValue="Play" uncheckedValue="Pause">
<xp:this.attrs>
<xp:attr name="data-style" value="slow"></xp:attr>
<xp:attr name="checked" value="checked"></xp:attr>
</xp:this.attrs>
</xp:checkBox>
</div>
<div class="col-sm-2">
<xp:checkBox text="" id="checkBox2"
value="#{document1.Question}" checkedValue="Yes" uncheckedValue="No" defaultChecked="true">
</xp:checkBox>
</div>
</div>
<br />
<xp:button value="Save Toggle Values" id="button1" styleClass="btn btn-primary"><xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument var="document1"></xp:saveDocument>
<xp:openPage name="/bootstraptoggle.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action></xp:eventHandler></xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information: Bootstrap Toggle Plugin

No comments:

Post a Comment