Friday, 14 October 2016

Using Bootstrap Dialog Plugin in XPages - Making Bootstrap Modals Easy and Draggable

Bootstrap Dialog is a jQuery plugin that simplifies the standard Bootstrap Modal. The plugin is very easy to implement in any XPages Applications. It works with CSJS and the x$ jQuery Selector for XPages Snippet. This plugin is all about making Bootstrap Modals Easy and Draggable. I use this plugin in a lot of applications instead of the standard Bootstrap Modal, Bootbox, PNotify or other Dialog plugins.
In order to use the Bootstrap Dialog plugin the JavaScript and CSS file(s) need to be included on the XPage or Custom Control. The latest version can be downloaded from GitHub: Bootstrap Dialog.

1. Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In the example below a Folder bootstrapdialog has been added in the WebContent Folder.


Next the JavaScript and CSS files, bootstrap-dialog.js and bootstrap-dialog.css must be included on the XPage or Custom Control. In this example I add the files to an XPage.

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

2. Adding the x$ jQuery selector for XPages
Furthermore I 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. In this example the name of the Script Library is JQueryXSnippet.js.

<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

The script itself can be made up as follows. The name of the id in the script must correspond with the id of the Button. In the example below I used some extra options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){BootstrapDialog.show({
draggable: true,
title: 'jQuery Selector for XPages',
message: 'Bootstrap Dialog!',
buttons: [{
label: 'Button 1'
}, {
label: 'Button 2',
cssClass: 'btn-primary',
action: function(){
alert('Bootstrap Dialog!');
}
}, {
icon: 'glyphicon glyphicon-ban-circle',
label: 'Button 3',
cssClass: 'btn-warning'
}, {
label: 'Close',
action: function(dialogItself){
dialogItself.close();
}
}]
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Note: For using CSJS see the example code below.

3. AMD Loader Fix
Finally, the JavaScript file select2.js needs to be adjusted. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. The source code of the library can be adjusted in a very simple way with just a slight modification.

1. Go to the WebContent Folder and select the JavaScript file bootstrap-dialog.js
2. Select Open With - Client/Server JS Editor


3. Removed define.amd and replace it with false


4. Save the JavaScript file bootstrap-dialog.js

Note: There are other solutions for the AMD Fix. For more information about thes solution see my blog post Bootstrap Plugins in XPages Part VI - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2).

The final result is a responsive draggable Bootstrap Dialog in XPages.


4. 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="bootstrapdialog/js/bootstrap-dialog.js"></script>
<link rel="stylesheet" href="bootstrapdialog/css/bootstrap-dialog.css" />
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){BootstrapDialog.show({
draggable: true,
title: 'jQuery Selector for XPages',
message: 'Bootstrap Dialog!',
buttons: [{
label: 'Button 1'
}, {
label: 'Button 2',
cssClass: 'btn-primary',
action: function(){
alert('Bootstrap Dialog!');
}
}, {
icon: 'glyphicon glyphicon-ban-circle',
label: 'Button 3',
cssClass: 'btn-warning'
}, {
label: 'Close',
action: function(dialogItself){
dialogItself.close();
}
}]
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h3>Bootstrap Dialog</h3>
<h4>Boostrap Dialog in XPages - Making Bootstrap Modals Easy and Draggable</h4>
<br />
<xp:button styleClass="btn-primary" id="button1" value="jQuery For XPages"></xp:button>
<br /><br />
<xp:button value="Client Side JavaScript" id="button2" styleClass="btn-primary">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[BootstrapDialog.show({
 title: 'CSJS',
 message: 'Bootstrap Dialog!',
 buttons: [{
 label: 'Button 1'
 }, {
 label: 'Button 2',
 cssClass: 'btn-primary',
 action: function(){
 alert('Bootstrap Dialog!');
 }
 }, {
 icon: 'glyphicon glyphicon-ban-circle',
 label: 'Button 3',
 cssClass: 'btn-warning'
 }, {
 label: 'Close',
 action: function(dialogItself){
dialogItself.close();
}
}]
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information and documentation about all options: Bootstrap Dialog Examples

No comments:

Post a Comment