Tuesday, 5 September 2017

Using SweetAlert2 in XPages - A Beautiful, Responsive, Customizable and Accessible Replacement for JavaScript's Popup Boxes


In my continuous search for modern plugins for my XPages applications I came across SweetAlert2, a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes with zero dependencies. SweetAlert2 automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's highly customizeable.
In order to use Sweetalert2, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: SweetAlert2.
Below are some examples how SweetAlert2 can be used in an XPages application.

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 sweetalert has been added in the WebContent Folder.
Next the JavaScript and CSS files, sweetalert2.js and sweetalert2.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="sweetalert/sweetalert2.js"></script>
<link rel="stylesheet" href="sweetalert/sweetalert2.css" />

AMD Loader Fix
For using SweetAlert2 in XPages there is a need for an AMD Loader Fix. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. In the example below I use two javascript libraries, disable_amd.js and enable_amd.js, a solution provided by Mark Leussink. You can add these scripts to in the Script Libraries of the XPages application.

disable_amd.js
if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}

enable_amd.js
if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}

The first one is loaded before the js files, the second one after the js files.

<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="sweetalert/sweetalert2.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>

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

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. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){swal({
title: 'Delete selected document?',
text: "The selected document will be deleted!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes'
}).then(function () {
swal(
'Deleted!',
'The document has been deleted.',
'success'
)
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a beautiful, responsive, customizable and accessible replacement for JavaScript's Popup Boxes 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">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="sweetalert/sweetalert2.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>
<link rel="stylesheet" href="sweetalert/sweetalert2.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){swal({
title: 'Delete selected document?',
text: "The selected document will be deleted!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes'
}).then(function () {
swal(
'Deleted!',
'The document has been deleted.',
'success'
)
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){swal({
title: '<i>HTML</i> <u>example</u>',
type: 'info',
html:
'You can use <b>bold text</b>, ' +
'<a href="//github.com">links</a> ' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Great!',
cancelButtonText:
'<i class="fa fa-thumbs-down"></i>'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button value="Delete Document" id="button1"></xp:button>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:button value="Custom HTML" id="button2"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: SweetAlert2 documentation and examples.

No comments:

Post a Comment