Monday, 4 April 2016

Bootstrap Plugins in XPages Part III - Dialog Boxes using Bootbox

In this blog post I will show how the Bootbox plugin can be used in XPages. Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.
The library exposes three methods designed to mimic their native JavaScript equivalents. Their exact method signatures are flexible as each can take various parameters to customise labels and specify defaults, but they are most commonly called like so:
- bootbox.alert(message, callback)
- bootbox.prompt(message, callback)
- bootbox.confirm(message, callback)

The only required argument for alert calls is message; callback is required for confirm and prompt calls in order to determine what the user’s response was. Even when calling alert a callback is useful to determine when the user dismissed the dialog since our wrapper methods can’t and don’t block like their native counterparts: they are asynchronous rather than synchronous.
Each of these three methods calls a fourth public method which you too can use to create your own custom dialogs: bootbox.dialog(options).
In this blog post de bootbox.dialog is used. Bootbox can be downloaded from GitHub.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox

Below a description of the setup of the Bootbox plugin.

1. Javascript
First the JavaScript file bootbox.js needs to be added to the WebContent folder in the Package Explorer. In this example a Folder 'bootbox' has been added in the WebContent folder.

Next the JavaScript file, bootbox.js needs to be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="bootbox/bootbox.js"></script>

2. AMD Fix
In this example version 4.4.0 is used and therefore the JavaScript file bootbox.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.

A. Go to the WebContent Folder and select the JavaScript file select2.js
B. Select Open With - Client/Server JS Editor

C. Remove in the third script line 'define.amd' and replace it with 'false'

D. Save the JavaScript file bootbox.js

3. Sample Code Setup Bootbox Dialogs

More information and examples: Bootbox
Recommended Blog Posts:
Bootstrap JS Modal plugin in XPages: Introduction
Bootstrap JS Modal plugin in XPages: Trigger via JavaScript including Modal Options
Bootstrap JS Modal plugin in XPages: Stackable Modals using the Bootstrap-Modal jQuery plugin

No comments:

Post a Comment