Thursday, 22 June 2017

Using SweetModal in XPages: Alert, Confirm, Prompt and Modal- Only Better!

One of the requirements for a new XPages Project constisted of a lightweight and powerful Confirm, Alert, Prompt and Modal functionality. In my search I came across SweetModal, a lightweight and powerful jQuey Plugin.
In order to use SweetModal, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: SweetModal. Below a basic example how SweetModal 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 flatpickr has been added in the WebContent Folder.
Next the JavaScript and CSS files, jquery.sweet-modal.js and jquery.sweet-modal.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<link rel="stylesheet" href="sweetmodal/dev/jquery.sweet-modal.css" />
<script type="text/javascript" src="sweetmodal/dev/jquery.sweet-modal.js"></script>

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(){$.sweetModal({
content: 'Dialog Message including Theme Dark and a Button.',
title: 'Dialog Message',
icon: $.sweetModal.ICON_ERROR,
theme: $.sweetModal.THEME_DARK,
buttons: [
{
label: 'Close Dialog',
classes: 'redB'
}
]
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Another possibility for example is to add the script in the OnClick Event of a Button (CSJS). For more information see the XPage Example Code below.

Final Result
The final result is a responsive Alert, Confirm, Prompt and Modal functionality 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">
<link rel="stylesheet" href="sweetmodal/dev/jquery.sweet-modal.css" />
<script type="text/javascript" src="sweetmodal/dev/jquery.sweet-modal.js"></script>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){$.sweetModal({
content: 'Dialog Message including Theme Dark and a Button.',
title: 'Dialog Message',
icon: $.sweetModal.ICON_ERROR,
theme: $.sweetModal.THEME_DARK,
buttons: [
{
label: 'Close Dialog',
classes: 'redB'
}
]
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button id="button1" value="Sweet Modal">
</xp:button>
<xp:br></xp:br>
<xp:button id="button2" value="Dialog Tabs">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$.sweetModal({
theme: $.sweetModal.THEME_DARK,
title: {
tab1: {
label: 'Message'
},
tab2: {
label: 'Detailed Info'
}
},
content: {
tab1: 'Sweet Modal Dialog',
tab2: 'TABBED WITH BUTTONS'
},
buttons: {
someOtherAction: {
label: 'Action 2',
classes: 'orangeB',
action: function() {
return $.sweetModal('You clicked Action 2!');
}
},
someAction: {
label: 'Action 1',
classes: '',
action: function() {
return $.sweetModal('You clicked Action 1!');
}
}
}
});]]></xp:this.script>
</xp:eventHandler></xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information: Documentation SweetModal

No comments:

Post a Comment