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.