Friday, 18 September 2015

Bootstrap in XPages: Using Bootstrap Popover.js A Custom jQuery Plugin in XPages

In my blog post from yesterday, Bootstrap in XPages: Using Bootstrap Confirmation A Bootstrap Plugin for On-Place Confirm Boxes using Popover, I showed how you can use Bootstrap Confirmation in XPages. This plugin uses Bootstrap Popover, a custom jQuery plugin. In this blog post I will show how Bootstrap Popover.js can be used in XPages. Considering we make use of Bootstrap it is not necessary to add JavaScript and CSS files in order to make use of this custom JQuery plugin.

Setup in XPages
A. Adding the x$ jQuery selector for XPages
In the example below I make use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the XPage. The XSnippet can be added to the Script Libraries. The script itself can be made up as follows.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).popover();
}
);
]]></xp:this.value>
</xp:scriptBlock>

B. Basic setup Bootstrap Popover
The basic setup of Bootstrap Popover is as follows. In the example below, a button is used to trigger the popover (confirmation box).

<button type="button" id="example"
class="btn btn-lg btn-danger" data-toggle="popover"
title="Bootstrap Popover"
data-content="Add small overlays of content, like those on the iPad.">
Bootstrap Popover
</button>

C. Converting to an XPage button
The basic setup can be converted as follows into an XPage button. For the conversion you need to use data attributes.

<xp:button value="Bootstrap Popover" id="button1"
styleClass="btn btn-primary btn-lg" style="color:rgb(255,255,255)">
<xp:this.attrs>
<xp:attr name="data-toggle" value="popover"></xp:attr>
<xp:attr name="title" value="Bootstrap Popover"></xp:attr>
<xp:attr name="data-content" value="Add small overlays of content, like those on the iPad, to any element for housing secondary information.">
</xp:attr>
</xp:this.attrs>
<span class="glyphicon glyphicon-question-sign"></span>
</xp:button>

D. Final result in XPages


E. 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">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapconfirmation/bootstrap-confirmation.js">
</script>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).popover();
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<button type="button" id="example"
class="btn btn-lg btn-danger" data-toggle="popover"
title="Bootstrap Popover"
data-content="And here's some amazing content. It's very engaging. Right?">
Bootstrap Popover
</button>
<xp:br></xp:br><xp:br></xp:br>
<h2>Bootstrap Popover</h2>
<xp:br></xp:br><xp:br></xp:br>
<xp:button value="Bootstrap Popover" id="button1"
styleClass="btn btn-primary btn-lg" style="color:rgb(255,255,255)">
<xp:this.attrs>
<xp:attr name="data-toggle" value="popover"></xp:attr>
<xp:attr name="title" value="Bootstrap Popover"></xp:attr>
<xp:attr name="data-content" value="Add small overlays of content, like those on the iPad, to any element for housing secondary information."></xp:attr>
</xp:this.attrs>
<span class="glyphicon glyphicon-question-sign"></span>
</xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>$('#example').popover()</script>
</xp:view>

More information : Bootstrap Popover

No comments:

Post a Comment