In this blog post I will show how Bootstrap Confirmation, a Bootstrap plugin for on-place confirming boxes using Popover, can be used in XPages.
Setup in XPagesA. Adding the JS and CSS filesIn order to use Bootstrap Confirmation, the JavaScript file needs to be included on the XPage or Custom Control. The plugin uses the default popover styling Bootstrap provides, a CSS file is not required. The latest version can be downloaded from GitHub:
Bootstrap Confirmation. In this example a Folder bootstrapconfirmation has been added in the WebContent Folder.
Next the JavaScript file, bootstrap-confirmation.js must be included on the XPage or Custom Control. In this example I add the file to an XPage.
<script type="text/javascript" src="bootstrapconfirmation/bootstrap-confirmation.js">
B. Adding the x$ jQuery selector for XPagesFurthermore I use the the great XSnippet by Mark Roden (again),
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}" ).confirmation();
}
);
]]></xp:this.value>
</xp:scriptBlock>
C. Basic setup Bootstrap ConfirmationThe basic setup of Bootstrap Confirmation is as follows. In the example below, a button is used to trigger the confirmation, the on-place confirmation box.
<button class="btn btn-default" id="example1"
data-toggle="confirmation" data-btn-ok-label="Continue"
data-btn-ok-icon="glyphicon glyphicon-share-alt"
data-btn-ok-class="btn-success" data-btn-cancel-label="Stop!"
data-btn-cancel-icon="glyphicon glyphicon-ban-circle"
data-btn-cancel-class="btn-danger">Confirmation
</button>
D. Converting to an XPage buttonThe basic setup can be converted as follows into an XPage button. For the conversion you need to use data attributes.
<xp:button value="Confirmation" id="button1"
styleClass="btn btn-primary btn-lg" style="color:rgb(255,255,255)">
<xp:this.attrs>
<xp:attr name="data-toggle" value="confirmation"></xp:attr>
<xp:attr value="Continue" name="data-btn-ok-label"></xp:attr>
<xp:attr name="data-btn-ok-icon" value="glyphicon glyphicon-share-alt"></xp:attr>
<xp:attr name="data-btn-ok-class" value="btn-success"></xp:attr>
<xp:attr name="data-btn-cancel-label" value="Stop"></xp:attr>
<xp:attr name="data-btn-cancel-icon" value="glyphicon glyphicon-ban-circle"></xp:attr>
<xp:attr name="data-btn-cancel-class" value="btn-danger">
</xp:attr>
</xp:this.attrs>
<span class="glyphicon glyphicon-cloud"></span>
</xp:button>
E. Final result in XPagesF. 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="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).confirmation();
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<button class="btn btn-default" id="example1"
data-toggle="confirmation" data-btn-ok-label="Continue"
data-btn-ok-icon="glyphicon glyphicon-share-alt"
data-btn-ok-class="btn-success" data-btn-cancel-label="Stop!"
data-btn-cancel-icon="glyphicon glyphicon-ban-circle"
data-btn-cancel-class="btn-danger">
Confirmation
</button>
<h2>Bootstrap Confirmation</h2>
<xp:button value="Confirmation" id="button1"
styleClass="btn btn-primary btn-lg" style="color:rgb(255,255,255)">
<xp:this.attrs>
<xp:attr name="data-toggle" value="confirmation"></xp:attr>
<xp:attr value="Continue" name="data-btn-ok-label"></xp:attr>
<xp:attr name="data-btn-ok-icon" value="glyphicon glyphicon-share-alt"></xp:attr>
<xp:attr name="data-btn-ok-class" value="btn-success"></xp:attr>
<xp:attr name="data-btn-cancel-label" value="Stop"></xp:attr>
<xp:attr name="data-btn-cancel-icon" value="glyphicon glyphicon-ban-circle"></xp:attr>
<xp:attr name="data-btn-cancel-class" value="btn-danger"></xp:attr>
</xp:this.attrs>
<span class="glyphicon glyphicon-cloud"></span>
</xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>
$('#example1').confirmation()
</script>
</xp:view>
In the next blog post more about the options of the Bootstrap Confirmation Plugin. So stay tuned!
