Saturday, 16 September 2017

IBM Domino Feature Pack 9 Interim Fix 1 Available for Download on IBM Fix Central


Yesterday IBM released IBM Domino Feature Pack 9 Interim Fix 1 on IBM Fix Central.
Main Fix in this release concerns the SMTP regression issue in Domino 9.0.1 FP9 which can cause malformed headers & prevent Internet mail delivery with SMTPVerifyAuthenticatedSender=1


Domino 9.0.1 Feature Pack 9 introduced a regression issue where the To address fields of messages become malformed and nondeliverable when using the Domino notes.ini parameter SMTPVerifyAuthenticatedSender=1. This issue is fixed in Domino 9.0.1 FP9 Interim Fix 1.
Symptoms of the issue include receiving messages containing garbled sender names. Opening the message and replying results in a number of embedded garbled characters in the header. You can observe this by viewing the page source or by simply examining the content when opening an email. Another method is to capture the SMTP outbound message and examine the header.
NOTE: The solution for the above issue in 9.0.1 FP9 IF1 specifically reverts the following fix that was implemented in 9.0.1 FP9. IBM will revisit addressing the below issue in Domino 9.0.1 FP10.

Download: IBM Domino Feature Pack 9 Interim Fix 1


More information: - SMTP regression issue in Domino 9.0.1 FP9 - Technote 2008327

Friday, 15 September 2017

Free IBM Domino Community Server for Non-Production Environments Available for Download on IBM developerWorks

Today IBM released the IBM Domino Community Server for Non-Production Environments on IBM developerWorks. IBM Domino Community Server for Non-Production is a nonwarranted license option that enables your organization to test applications in a non-production environment. This offering will provide students, developers, and vendors with the capability to test their custom IBM Domino applications.
IBM Domino software and its various client software access options deliver a reliable, security-rich messaging and collaboration environment that helps companies enhance the productivity of their employees, streamline business processes, and improve overall business responsiveness. As an advanced platform for hosting social business applications, IBM Domino offers scalable, security-rich applications at a low cost, helping your organization to improve productivity, accelerate operations, and enhance decision-making.
For more information you can read the official IBM announcement for Europe or US.


Thursday, 14 September 2017

Using Smoke Form Validation And Components for Bootstrap in XPages Part 2 - Confirmation


In my previous blog post, Using Smoke Form Validation And Components for Bootstrap in XPages Part 1 - Alerts, I showed how Alerts can be used in XPages applications using the Smoke plugin. In this blog post I will show some examples of the Conformation component in combination with the Alerts component.
For more information about adding the JS and CSS files and adding the x$ jQuery selector for XPages see my prevoius blog post about the Smoke plugin in XPages.

For using the Confirmation component the x$ jQuery selector for XPages script 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(){$.smkConfirm({
text:'Are you sure?',
accept:'OK',
cancel:'Cancel'
},function(res){
// Code here
if (res) {
$.smkAlert({
text: 'Confirmed!!',
type:'success',
time : 30,
position: 'bottom-center'
});
}
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive, customizable and accessible Confirmation in combination with the Alert component including 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="smoke/js/smoke.js"></script>
<link rel="stylesheet" href="smoke/css/smoke.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){$.smkConfirm({
text:'Are you sure?',
accept:'OK',
cancel:'Cancel'
},function(res){
// Code here
if (res) {
$.smkAlert({
text: 'Confirmed!!',
type:'success',
time : 30,
position: 'bottom-center'
});
}
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){$.smkPrompt({
text:'Enter Full Name',
accept:'OK',
cancel:'Cancel'
},function(res){
// Code here
if (res) {
$.smkAlert({
text: 'Response: ' + res,
type: 'success',
time: 10,
position: 'bottom-center'
});
} else {
$.smkAlert({
text: 'No response....',
type: 'info',
time : 10,
position: 'bottom-center'
});
}
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button value="Confirmation" id="button1" styleClass="btn btn-success"></xp:button>
<xp:button value="Confirmation Prompt" id="button2" styleClass="btn btn-info"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

Using Smoke Form Validation And Components for Bootstrap in XPages Part 1 - Alerts


In my continuous search for modern plugins for my XPages applications I came across Smoke, a multiple components plugin for Alerts, Confirmtions, Form Validation, Panels and more. The Smoke plugin requires the jQuery Library and the Bootstrap 3 Framework. Smoke is easy to use and the plugin works great in XPages applications. The main advantage is that multiple components are brought together in one plugin whereby the interconnections between the various components can easily be accomplished. The disadvantage is that the plugin is not actively maintained.
In order to use Smoke, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Smoke.
Below are some basic examples how Smoke Alerts 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 smoke has been added in the WebContent Folder.
Next the JavaScript and CSS files, smoke.js and smoke.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="smoke/js/smoke.js"></script>
<link rel="stylesheet" href="smoke/css/smoke.css" />

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(){$.smkAlert({
text: 'Alert type "success"',
type: 'success',
position:'bottom-center'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive, customizable and accessible Alert 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="smoke/js/smoke.js"></script>
<link rel="stylesheet" href="smoke/css/smoke.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){$.smkAlert({
text: 'Alert type "success"',
type: 'success',
position:'bottom-center'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){$.smkAlert({
text: 'Alert type "danger" time 10 seconds',
type: 'danger',
position:'bottom-center',
time: 10
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button3}" ).bind("click",function(){$.smkAlert({
text: 'Alert type "warning"',
type: 'warning',
position:'bottom-center'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock4">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button4}" ).bind("click",function(){$.smkAlert({
text: 'Alert type "info" permanent',
type: 'info',
position:'bottom-center',
icon: 'glyphicon-time',
permanent: true
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button value="Success" id="button1" styleClass="btn btn-success"></xp:button>
<xp:button value="Danger" id="button2" styleClass="btn btn-danger"></xp:button>
<xp:button value="Warning" id="button3" styleClass="btn btn-warning"></xp:button>
<xp:button value="Info" id="button4" styleClass="btn btn-info"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

Tuesday, 12 September 2017

Compatibility Mode Improvements in IBM Notes 9.0.1 Feature Pack 9


Today I came across a very interesting article on IBM developerWorks, Compatibility Mode improvements in IBM Notes 9.0.1 Feature Pack 9.
Before Feature Pack 9 a Notes user creating a repeating meeting with a non-Notes invitee encountered a dialog box warning of action limitations. With Feature Pack 9 that warning no longer appears.With Feature Pack 9, if a Notes user wants to reschedule or cancel a meeting with a non-Notes invitee, all the options on the Change Repeating Entry are enabled.This improvement also means that users with and without Compatibility Mode enabled have similar experiences, whether they are meeting chairs or invitees.
For more information about these improvements in Feature Pack 9 see this article: Compatibility Mode improvements in IBM Notes 9.0.1 Feature Pack 9

Saturday, 9 September 2017

Important - Resolve Synchronization Issues that start after Upgrading to IBM Traveler 9.0.1.18 (or higher)


IBM Traveler 9.0.1.18 enabled by default a feature that allows Traveler to "Run as a User" instead of as a server. This feature resolves several long standing issues with accessing the user's data as the server ID, including:
  • Preventing event notices and automated responses from being sent “from” the Traveler server ID (they are sent “from” the user ID instead)
  • Preventing the server ID from being assigned as the owner of the mail profile when there is no owner defined.
  • Honoring access controls on the mail file and corporate lookup for the user.
  • The last point above may cause sync issues for mobile users. If the access controls are inadvertently set to values that restrict individual users, but do not restrict the Traveler server, then users that could sync when running as the Traveler server ID might not be able to sync when running as their user ID. 
Note that the Traveler administrator can disable the Run as User feature by setting the notes.ini value NTS_USER_SESSION=false on all Traveler servers and restarting the servers. This may be a quick way of restoring sync capability to the few affected mobile users with restrictive access control settings. However, it is not recommended because it is a global setting, so all users will lose the benefits of Run as User when it is disabled.

The IBM Support document describes the access controls, and the symptoms seen by the Traveler administrator when the controls are set to values which restrict users access.
Traveler 9.0.1.19 introduces enhancements to the messaging, to make it easier for the administrator to identify which access control is causing the sync issue. Traveler 9.0.1.19 also introduces a modification to the Run as User feature, that enables users to sync even if one of the access controls is configured in a restrictive way.

More information: How to resolve synchronization issues that start after upgrading to IBM Traveler 9.0.1.18 (or higher)

Friday, 8 September 2017

IBM Traveler 9.0.1.19 Server Available for Download on IBM Fix Central with Important Fixes


IBM Traveler 9.0.1.19 is a maintenance release that provides new features and APAR fixes for the IBM Traveler server. The information below outlines the changes included. Be sure to review the IBM Traveler Product Documentation for additional information.

NOTE: IBM Traveler 9.0.1.19 does not include a database schema update. However, if upgrading from a version prior to 9.0.1.15 and running MS SQL Server, or if upgrading from a version prior to 9.0.1.16 and running DB2 Server, action may be required if you manually manage your database schema (this is not common). If you use auto schema updates (default behavior) there is no action required. See Updating the Enterprise Database for more information.

What's new?
- Support for MS SQL Server 2016 Enterprise Edition.
- Updated APNS Certificates with expiration 8/1/2018.
- Improvements for the Run as User Feature.

Fix List IBM Traveler 9.0.1.19 Server


IBM Traveler 9.0.1.19 Server can be downloaded from IBM Fix Central.

IBM JUMP Session - Whats new in IBM Notes Domino 9.0.1 Feature Pack 9

There will be an interesting IBM Jump Session on September 15th, Whats new in IBM Notes Domino 9.0.1 Feature Pack 9. JUMP stands for Join, Understand, Master and Participate.

Content
Topic: JUMP session Presentation on Whats new in IBM Notes Domino 9.0.1 Feature Pack 9.
Date: Friday, SEP 15th 2017 at 11.30 AM IST
Time: 11:30 AM IST (6 AM GMT) for 60 minutes or more

IBM Enterprise Social Solutions Support wants to help you take full advantage of your products. Join us for our Open Mic Webcast series as technical experts share their knowledge and answer your questions. These webcasts are designed to address specific topics and provide an in-depth and focused technical exchange in a convenient online webcast format. For more information about our Open Mic webcasts, visit the IBM Collaboration Solutions Support Open Mics page.

See also my blog post IBM Notes and Domino Feature Pack 9 Available for Download on IBM Fix Central (Zircon) for more information about Feature Pack 9.

Wednesday, 6 September 2017

Tokenize Combo Boxes and List Boxes in XPages Applications


Tokenize2 is a plugin which allows your users to select multiple items from a predefined list or ajax using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on Facebook or Tags on Tumblr. Tokenize2 has a lot of amazing options and events. Tokenize2 (currently v1.0) has a few easy ways to quickly get started, each one appealing to a different skill level and use case.
In order to use Tokenize2, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Tokenize2.
Below a basic example how Tokenize2 can be used in an XPages application.

Adding the JS and CSS files
The JavaScript and CSS files must be added to a WebContent Folder in the Package Explorer.
In this example the Folder tokenize2 has been added to the WebContent Folder.
Next the JavaScript and CSS files, tokenize2.min.js and tokenize2.min.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="tokenize2/tokenize2.min.js"></script>
<link rel="stylesheet" href="tokenize2/tokenize2.min.css" />

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:listBox1}" ).tokenize2({
placeholder: "Select a value",
tokensMaxItems: 2,
searchMinLength: 1    
});    
})
]]></xp:this.value>
</xp:scriptBlock>

AMD Loader Fix
Finally, the JavaScript file tokenize2.min.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 specific JavaScript file
2. Select Open With - Client/Server JS Editor


3. Find and Remove define.amd and replace it with false
4. Save the JavaScript file tokenize2.min.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).

Final Result
The final result is a responsive Combo- or List Box with selected items displayed as tokens/tags including 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="tokenize2/tokenize2.min.js"></script>
<link rel="stylesheet" href="tokenize2/tokenize2.min.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).tokenize2({
placeholder: "Select a value",
tokensMaxItems: 2,
searchMinLength: 1    
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).tokenize2();    
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:listBox id="listBox1" multiple="true">
<xp:this.attrs>
<xp:attr name="multiple" value=""></xp:attr>
</xp:this.attrs>
<xp:selectItem itemLabel="Africa" itemValue="Africa"></xp:selectItem>
<xp:selectItem itemLabel="America" itemValue="Ameria"></xp:selectItem>
<xp:selectItem itemLabel="Asia" itemValue="Asia"></xp:selectItem>
<xp:selectItem itemLabel="Europe" itemValue="Europe"></xp:selectItem>
</xp:listBox>
<xp:br></xp:br>
<xp:comboBox id="comboBox1">
<xp:this.attrs>
<xp:attr name="multiple" value=""></xp:attr>
</xp:this.attrs>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");  
var res = @DbColumn("C0007C43:002CD36F", "($Names)", 0) 
var list = arr.concat(res);
return list;
}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

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.

Friday, 1 September 2017

Using Bootstrap Material DateTimePicker in XPages


For a new XPages application I was looking for a simple DateTime Picker. In my search I came accross the Bootstrap Material DateTimePicker plugin. The Material DateTimePicker was originaly designed for Bootstrap Material, the V2.0 is now completely standalone and responsive. Bootstrap Material DateTime Picker relies on Bootstrap, jQuery, Google Material Icon Font and Moment.js.
In order to use the Bootstrap Material DateTimePicker plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Bootstrap Material DateTimePicker.

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 bootstrapmaterialdatetimepicker has been added in the WebContent Folder.
Next the JavaScript and CSS files, bootstrap-material-datetimepicker.js, moment.js and bootstrap-material-datetimepicker.css must be included on the XPage or Custom Control. In this example I add the files to an XPage. I also added the link for the fonts.

<script type="text/javascript" src="bootstrapmaterialdatetimepicker/moment.js"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/js/bootstrap-material-datetimepicker.js"></script>
<link rel="stylesheet" href="bootstrapmaterialdatetimepicker/css/bootstrap-material-datetimepicker.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

AMD Loader Fix
For using Moment 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 moments.js files, the second one after the moments.js files.

<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/moment.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:inputText1}" ).bootstrapMaterialDatePicker({
weekStart : 0,
format : 'DD-MM-YYYY',
time: false
});    
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result 
The final result is a good looking responsive DateTimePicker 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="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/moment.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/js/bootstrap-material-datetimepicker.js"></script>
<link rel="stylesheet" href="bootstrapmaterialdatetimepicker/css/bootstrap-material-datetimepicker.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).bootstrapMaterialDatePicker({
weekStart : 0,
format : 'DD-MM-YYYY',
time: false
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText2}" ).bootstrapMaterialDatePicker({
weekStart : 0,
date: false,
format : 'HH:mm'
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-md-7">
<h3>Bootstrap Material DateTime Picker</h3>
<h5>
Bootstrap Material DateTime Picker relies on Bootstrap, jQuery, Google Material Icon Font and Moment.js.
</h5>
</div>
<div class="col-md-7">
<xp:inputText id="inputText1"></xp:inputText>
</div>
<xp:br></xp:br>
<xp:br></xp:br>
<div class="col-md-7">
<xp:inputText id="inputText2"></xp:inputText>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bootstrap Material DateTimePicker examples.

Wednesday, 30 August 2017

Using Dropify in XPages - Override Your Input Files with Style


For a single FileUpload Control in one of my XPages applications I was looking for a simple plugin to override the default style. In my search I came accross a relative new plugin, Dropify - Override your input files with style. jQuery is required to do the magic.
In order to use Dropify, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Dropify.

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

AMD Loader Fix
For using Dropify 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="dropify/js/dropify.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:fileUpload1}" ).dropify({
messages: {
'default': 'Drag and drop a file here or click',
'replace': 'Drag and drop or click to replace',
'remove':  'Remove',
'error':   'Ooops, something wrong happended.'
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive FileUploadControl 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="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="dropify/js/dropify.js"></script>
<link rel="stylesheet" href="dropify/css/dropify.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:fileUpload1}" ).dropify({
messages: {
'default': 'Drag and drop a file here or click',
'replace': 'Drag and drop or click to replace',
'remove':  'Remove',
'error':   'Ooops, something wrong happended.'
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-md-7">
<h3>Dropify</h3>
<h5>
Override your input files with style! jQuery is required to do the magic.
</h5>
</div>
<div class="col-md-7">
<xp:fileUpload id="fileUpload1"></xp:fileUpload>
</div>
<xp:br></xp:br>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Dropify documentation and examples

Complete Document Edit History Tracking Using LotusScript


Using LotusScript it is possible to save all changes made by users in a Notes document. Below a possible solution on which I was made noticeable and which I have implemented in a standard Notes application. In this case a DocumentHistory Field is updated if a value of a Field on the Notes Form has been changed by a user. The Date, the Name of the user, the Fieldname, the original value and the new value are stored in the DocumentHistory Field. The code is easy to customize to suit your own wishes.

A. Field DocumentHistory
First create a Field DocumentHistory on a Notes Form.
On the Field Properties Basic Tab set the Field DocumentHistory to a Multi-Value Text Field, computed with the formula DocumentHistory.



On the Field Properties Advanced Tab select Comma and Semicolon in the field Separate values when user enters. Select New Line in the field Display separate values with.


B. Form - Globals - Declarations
First a dynamic array in the Form Declarations section needs to be declared.

Dim FieldValues() As String 

C. PostModeChange
Next add the following code in the Postmodechange Event of the Form.

Sub Postmodechange(Source As Notesuidocument) 
'build array of current filed values 
Dim session As New NotesSession 
Dim db As NotesDatabase 
Dim doc As NotesDocument 
Dim form As NotesForm 
Dim fieldnum As Integer 
Dim counter As Integer 
Set db = session.CurrentDatabase 
Set doc = Source.Document 
Set form = db.GetForm(doc.Form(0)) 
fieldnum = Ubound(form.fields) 
Redim FieldValues(fieldnum,1) 
counter = 0 
Forall field In form.fields 
FieldValues(counter,0) = field 
FieldValues(counter,1) = source.fieldgettext(field) 
counter = counter + 1 
End Forall 
End Sub 

Remark: If document are automatically opend in Edit Mode the above code should be added to the PostOpen Event of the Form.

D. QuerySave
Next add the following code in the QuerySave Event of the Form. If the is already some code in the QuerySave Event place the code below after all the other code.

If Not Source.IsNewDoc Then 
Call DocumentHistory 
End If 

E. Subroutine DocumentHistory
Finally add the following Sub in the Form Declarations section or a Script Library.

Sub DocumentHistory 
Dim session As New NotesSession 
Dim workspace As New NotesUIWorkspace 
Dim source As NotesUIDocument 
Dim fieldnum As Integer 
Dim entry As String 
Set source = workspace.CurrentDocument 
For fieldnum = 0 To Ubound(FieldValues) 
If FieldValues(fieldnum,1) <>source.fieldgettext(FieldValues(fieldnum,0)) Then 
entry = Date$+Chr(9)+ session.CommonUserName+Chr(9) +"Changed Field: " + FieldValues(fieldnum,0)+ " from " + FieldValues(fieldnum,1)+ " to " + source.fieldgettext(FieldValues(fieldnum,0)) 
Call source.FieldAppendText("DocumentHistory",";"+entry)
End If 
Next
End Sub

The final result is a nice document history of all the changes made by users.

Tuesday, 29 August 2017

Using Boostrap Date Range Picker in XPages


The Bootstrap Date Range Picker component creates a dropdown menu from which a user can select a range of dates. Features include limiting the selectable date range, localizable strings and date formats, a single date picker mode, optional time picker (for e.g. making appointments or reservations), and styles that match the default Bootstrap 3 theme. Originally built for reporting at Improvely, the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or from predefined ranges like "Last 30 Days". Bootstrap Date Range Picker relies on Bootstrap, jQuery and Moment.js.
In order to use Bootstrap Date Range Picker, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Bootstrap Date Range Picker.

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

AMD Loader Fix
For the Bootstrap Date Range Picker 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="daterangepicker/moment.js"></script>
<script type="text/javascript" src="daterangepicker/daterangepicker.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:inputText1}" ).daterangepicker({
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 30,
locale: {
format: 'DD-MM-YYYY hh:mm',        
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive Date Range Picker 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="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="daterangepicker/moment.js"></script>
<script type="text/javascript" src="daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>
<link rel="stylesheet" href="daterangepicker/daterangepicker.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).daterangepicker({
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 30,
locale: {
format: 'DD-MM-YYYY hh:mm',        
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText2}" ).daterangepicker({
singleDatePicker: true,
showDropdowns: true,  
locale: {
format: 'DD-MM-YYYY'
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="col-md-7">
<h3>DateRangePicker</h3>
<h5>
A JavaScript component for choosing date ranges. Designed to work with the Bootstrap CSS
framework. Date Range Picker relies on Bootstrap, jQuery and Moment.js.
</h5>
</div>
<div class="col-md-7">
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="name" value="daterange"></xp:attr>
<xp:attr name="value" value="01/01/2017 - 31/01/2017">
</xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<xp:br></xp:br>
<xp:br></xp:br>
<div class="col-md-7">
<xp:inputText id="inputText2">
<xp:this.attrs>
<xp:attr name="name" value="daterange"></xp:attr>
<xp:attr name="value" value="01-08-2017">
</xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bootstrap Date Range Picker documentation

Disable Double-Click and CTRL+E to Edit Documents Using LotusScript


In an old Notes Application I've been working on last week one of the requirements was to prevent that user were able through a double click or using CTRL + E to put a document in Edit Mode. In some old documentation I came across a solution that I had previously used in Notes applications to solve this problem. In this case I could quickly implement a solution by using some LotusScript in the Form Events Querymodechange and QueryOpen and an Action Button Edit (Document). In case I ever need this again I described the solution for myself in this blog post.

A. Form - Globals - Declarations
Initially, add in the Form Globals - Declarations the line below.

Dim EditAction As Boolean

B. Querymodechange
Next enter the following code in the Querymodechange Event of the Form.

Sub Querymodechange(Source As Notesuidocument, Continue As Variant)
If Not Source.EditMode And Not EditAction Then
Messagebox "You must use the Action Button Edit to Edit the document",64,"Edit " &_
"Document"
Continue = False
End If
End Sub

C. Queryopen
Next enter the following code in the QueryOpen Event of the Form.

Sub Queryopen(Source As Notesuidocument, Mode As Integer, Isnewdoc As Variant, Continue As Variant)
If Not Isnewdoc Then
If Source.EditMode Then
Messagebox "This document cannot be opened in Edit mode",16,"Edit Document"
Continue = False
End If
End If
End Sub

D. Action Button Edit
To make sure a document can be edited enter the following code in the Action Button Edit on the Form.

Sub Click(Source As Button)
Dim ws As New NotesUIWorkspace
EditAction = True
'   Do your checks to make sure they can edit the document, then put it into Edit mode
ws.CurrentDocument.EditMode = True
EditAction = False
End Sub

When a user double clicks in a Form in Read Mode or using CTRL + E to try to put the document in Edit Mode the Message below will appear.


A nice and simple LotusScript solution.

Friday, 18 August 2017

IBM Notes and Domino Feature Pack 9 Available for Download on IBM Fix Central (Zircon)

IBM Notes Domino Feature Pack 9 is available for download on IBM Fix Central. It seems that all Feature Packs are getting a 'name'. For Features Pack 9 this is Zircon.
Notes/Domino 9.0.1 Feature Pack 9 addresses defects in the Client, Server, and the Domino OpenSocial component. All Feature Packs are language independent and may be applied on any language version of Notes®/Domino® 9.0.1.

IBM Notes Feature Pack 9


IBM Domino Feature Pack 9


New Features in IBM Domino 9.0.1 Social Edition Feature Pack 9
The documentation in Knowledgebase will be updated with these new features to coincide with the ship date of 9.0.1 FP9

Enhancement Request To Be Able To Increase The Amgr Queue Beyond 100 (SPR #RSTNA4SL7C APARID: LO87242)
The Agent Manager's Eligible queue is now able to change from the lowest value possible at 100, to 255 which is the highest value possible via an INI AMGRMaxQueue.

Databases and views can be opened more quickly in databases that are enabled for transaction logging
It takes less time to open databases and views that are at ODS 52 or higher and enabled for transaction logging. Previously, performance for opening databases or views could be slow in frequently updated databases. This improvement is due to the implementation of less contention with update operations.

Restricting the use of mail rules to forward messages to external domains (SPR #JPAR9NEACX APARID: LO81771
You can control the extent to which users can use the Send copy to mail rule to automatically forward received messages to external domains that are not recognized by the mail server. This feature does not affect any forwarding rules that are specified in a user's Person document or any other type of mail server
forwarding or re-direction.

New Features in IBM Notes 9.0.1 Social Edition Feature Pack 9

Delegated mail files are refreshed automatically (SPR #RGAU829D4G APARID: LO48407)
If you have delegate access to another user's mail file, that mail file is refreshed automatically in your Notes client. To enable this feature, upgrade to the Mail9.ntf template provided with the FP9 Client. No notes.ini setting is required for this feature.

Support for recall of messages created with Memo stationary (SPR #JLEN9C9E3G APARID: LO77349)
When message recall is configured on the server, messages created using Memo stationery can now be recalled. To enable this feature, upgrade to the Mail9.ntf template provided with FP9.

High resolution support for the Notes Client
The Notes client on Windows correctly scales text and icons when high resolution monitors or custom DPI settings are used.

Improved name lookup in Notes
Searching by <last name first name> through typeahead or in the ambiguous name dialog, returns the same results as searching by <first name last name>. For example, searching for don smith or smith don returns the same results, including variants such as Donald, Donovan, Smithfield. To enable this feature, upgrade to the pernames.ntf template provided with 9.0.1 FP9 and add the notes.ini setting AllowWildcardLookup=1 to the Notes 9.0.1 FP9 client.

Improved support for Notes addressing with mobile directory catalogs (SPR #SAPLAK8ANL)
The list of names that is shown when using typeahead to search a mobile directory catalog is now sorted according to the directory catalog configuration. Names in local contacts follow this list. In addition, the Search directory for <characters> option is available at the end of the list to facilitate server lookup. To enable this feature, add the notes.ini setting $TypeAheadShowDircatFirst = 1 to the Notes 9.0.1 FP9 client.

Enabling and managing inline view indexing
A view index is an internal filing system that Notes uses to build the list of documents to display in a database view or folder. By default, view indexes are updated on a server at scheduled intervals. To update a view index immediately after documents change instead, administrators can enable inline view indexing. When you enable inline view indexing, a critical view is always kept up-to-date for your users.

Updating the default Java from 1.6 to 1.8 on IBM i (SPR #BYAGALM8J8)

For more information: IBM Notes/Domino 9.0.1 Feature Pack 9 (Zircon) Release Notice

Thursday, 27 July 2017

Using jQuery-Confirm a Multipurpose Plugin for Alert, Confirm and Dialog with Extended Features in XPages


In my continuous search for modern plugins for my XPages applications I came across jquery-confirm, a good alternative for iziToast (see my previous blog post Using iziToast an Elegant, Responsive, Flexible and Lightweight Notification Plugin in XPages). jquery-confirm is a multipurpose plugin for alert, confirm and dialogs with Extended features. jquery-confirm is easy to use, highly flexible and provides a great set of features like, Auto-close, Ajax-loading, Themes, Animations and more. This plugin is actively developed.
In order to use jquery-confirm, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: jquery-confirm.
Below are some examples how jquery-confirm can be used in an XPages application. In the examples I use a simple button to display the notifications.

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

jquery-confirm Plugin initialization
jquery-confirm can be initialized using a simple script. In the example below I used use a button with CSJS.

<xp:button id="button1" value="Error" styleClass="btn-warning" rendered="false">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$.confirm({
title: 'Error!',
content: 'Error during submit.',
type: 'red',
icon: 'fa fa-warning',
closeIcon: true,
closeIconClass: 'fa fa-close',
draggable: true,
typeAnimated: true,
animationSpeed: 2000, // 2 seconds
buttons: {
tryAgain: {
text: 'Try again',
btnClass: 'btn-red',
action: function(){
}
},
close: function () {
}}
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>

It is also possible to 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. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
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.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){$.confirm({
title: 'Success!',
content: 'Document has been saved.',
type: 'green',
icon: 'fa fa-check-square-o',
closeIcon: true,
closeIconClass: 'fa fa-close',
draggable: true,
typeAnimated: true,
animationSpeed: 2000 // 2 seconds  
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result are modern responsive notifications.


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="confirm/js/jquery-confirm.js"></script>
<link rel="stylesheet" href="confirm/css/jquery-confirm.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){$.confirm({
title: 'Success!',
content: 'Document has been saved.',
type: 'green',
icon: 'fa fa-check-square-o',
closeIcon: true,
closeIconClass: 'fa fa-close',
draggable: true,
typeAnimated: true,
animationSpeed: 2000 // 2 seconds  
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h4>jQuery-Confirm</h4>
<h5>A multipurpose plugin for alert, confirm and dialog, with Extended features.</h5>
<xp:br></xp:br>
<xp:button id="button1" value="Error" styleClass="btn-warning" rendered="true">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$.confirm({
title: 'Error!',
content: 'Error during submit document.',
type: 'red',
icon: 'fa fa-warning',
closeIcon: true,
closeIconClass: 'fa fa-close',
draggable: true,
typeAnimated: true,
animationSpeed: 2000, // 2 seconds
buttons: {
tryAgain: {
text: 'Try again',
btnClass: 'btn-red',
action: function(){
}
},
close: function () {
}
}
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:button value="Confirm" id="button2" styleClass="btn-success"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information: jquery-confirm documentation

Friday, 21 July 2017

Using iziToast an Elegant, Responsive, Flexible and Lightweight Notification Plugin in XPages


After the implementation of iziModal in a new XPages application, see my previous blog post 'Using iziModal An Elegant, Responsive, Flexible and Lightweight Modal Plugin in XPages', I also chose a modern notification plugin for this XPages application, IziToast. iziToast is an legant, responsive, flexible and lightweight notification plugin with no dependencies. All modern browsers are supported (Tested in Chrome, Firefox, Opera, Safari, IE10+ and Edge). In order to use iziToast, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: iziToast.
Below are some examples how iziTaost can be used in an XPages application. In the examples I use a simple button to display the notifications.

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

AMD Loader Fix
For iziToast 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 this case, I modified the javaScript file iziToast and replaced 'define.amd' with 'false'.
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).

iziToast Plugin initialization
iziToast can be initialized using a simple script. In the example below I used use a button with CSJS.

<xp:button id="button1" value="iziToast Warning" styleClass="btn-warning">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[iziToast.warning({
title: 'Warning',
position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
drag: true,
timeout: 10000,
balloon: false,
close: false,
transitionOut: 'fadeOutUp',
message: 'FirstName is a mandatory field.'
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>

It is also possible to 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. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
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.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button4}" ).bind("click",function(){iziToast.info({
title: 'Info',
drag: true,
position: 'center',
timeout: 10000,
balloon: false,
close: false,
transitionOut: 'fadeOutUp',
message: 'FirstName is a mandatory field.!'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result are modern responsive Notifications.



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:styleSheet href="/microlight.css"></xp:styleSheet>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="izitoast/js/iziToast.js"></script>
<link rel="stylesheet" href="izitoast/css/iziToast.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button4}" ).bind("click",function(){iziToast.info({
title: 'Info',
drag: true,
position: 'center',
timeout: 10000,
balloon: false,
close: false,
transitionOut: 'fadeOutUp',
message: 'FirstName is a mandatory field.!'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:panel>
<xp:br></xp:br>
<xp:button id="button1" value="iziToast Warning" styleClass="btn-warning">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[iziToast.warning({
title: 'Warning',
position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
drag: true,
timeout: 10000,
balloon: false,
close: false,
transitionOut: 'fadeOutUp',
message: 'FirstName is a mandatory field.'
});]]></xp:this.script>
</xp:eventHandler></xp:button>
<xp:button id="button2" value="iziToast Error" styleClass="btn-danger">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[iziToast.error({
title: 'Error',
position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
transitionIn: 'flipInX',
transitionOut: 'flipOutX',
timeout: 10000,
message: 'FirstName is a mandatory field.'
});]]></xp:this.script>
</xp:eventHandler></xp:button>
<xp:button id="button3" value="iziToast Success" styleClass="btn-success">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[iziToast.success({
title: 'Success',
position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
timeout: 10000,
message: 'Document has been saved!'
});]]></xp:this.script>
</xp:eventHandler></xp:button>
<xp:button id="button4" value="x$ jQuery Selector" styleClass="btn-info"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: iziToast documentation