Saturday, 30 September 2017

Upcoming Webinar - Gain Cognitive Insights with the New IBM Watson Explorer


On October 19th, a very interesting webinar will be organized by IBM, Gain Cognitive Insights and Build Scalable Cognitive Solution with the New IBM Watson Explorer. Speakers are Nancy Hensley, Director Watson Explorer, Offering Management IBM and Tanmay Sinha, Offering Management Leader, Watson Explorer IBM.

The new Watson Explorer offers completely new cognitive platform that allows you to apply the power of Machine Learning to unlock new patterns, trends, and cognitive insights from across all your data. New Watson Explorer also enables you to ask questions in natural language, making it easier than ever to analyze both structured and unstructured data. New Watson Explorer helps you build and leverage highly custom cognitive solutions, at scale.

The new Watson Explorer empowers every knowledge worker, whether you are a business analyst, researcher, or a data scientist. New Watson Explorer simplifies the ability to extract invaluable insight from all the data residing within the organization, including dark data and with content repositories in the cloud. New Watson Explorer also brings the power of IBM Watson to your enterprise and allows you the flexibility of choosing your deployment environment – public, private or hybrid cloud.

Content Webinar
Introduction to the new Watson Explorer
How the new cognitive platform brings data from across the enterprise to deliver cognitive insights
Live demo of the new Watson Explorer
How to easily build custom cognitive solutions – at scale

Overview
Title: Gain Cognitive Insights and Build Scalable Cognitive Solution in minutes - Getting started with the new Watson Explorer!
Date: Thursday, October 19th, 2017
Time: 10:30 AM Eastern Daylight Time
Duration: 1 hour

Demo Video: How Watson Explorer Can Help Your Business
Watch this 3-minute video to learn how Watson Explorer combines cloud-based enterprise search and advanced analytics with unique cognitive computing capabilities to connect data across silos. Watson Explorer connects all your data to provide a unified view of critical insights, in context, across industries and roles. By fully leveraging Watson’s ability to mine both structured and unstructured data, Explorer helps employees, across teams, make better business decisions, scale human expertise, drive ROI and remain competitive in a data-driven marketplace. 



More information: IBM ECM Blog

Friday, 29 September 2017

IBM Notes Domino XPages Community - Extended And Expanding


As  you may know, I am Moderator of the Google+ XPages Community. Together with the founder and owner of the Google+ XPages Community, Rob Bontekoe, my old XPages teacher, this community was founded some years ago. The primary goal of the community was and still is to promote XPages as a development tool and sharing information about IBM XPages, IBM Notes Domino and IBM XPages for Bluemix.
Given recent developments we continue to expand our field of vision and we are also going to focus on other new developments and technologies such as IBM Watson Workspace and IBM Domino Applications on Cloud and other Cloud technologies and developments in addition to what we already do at present. Central focus will be on the future of work and related news and posts.

At this time, the community has 590 members and is still expanding!
If you are not yet a member of this community and want to be kept informed of the latest news and if you want to share news about IBM Notes Domino, IBM XPages, IBM XPages for Bluemix, Watson Workspace, IBM Watson, DAC or other modern (web) technologies then join the Google+ XPages Community now.
The more members the more news and the more it is shared within our amazing community.

Link to the Google+ XPages Community : XPages Community


Since end of 2016 The XPages Google+ Community can also be found on Twitter, @XPagesCommunity.


So  follow the Google+ XPages Community also on Twitter for the latest news on IBM XPages, IBM Notes Domino, IBM XPages for Bluemix, Bootstrap, IBM Watson Workspace, Domino Applications on Cloud, Watson and more!

IBM Domino Applications on Cloud (DAC)


In the IBM world developments are moving rapidly. After the release of IBM Watson Workspace this week IBM previously announced the availability of IBM Domino Application on Cloud (DAC) for October 2017 during the IBM Notes Domino Day 2017 in Tokyo. Today I looked around at what exactly Domino Applications on Cloud is and what the standard service features for application hosting are. Below some general information, some useful links and a video with more some more information about DAC.

Organizations use Cloud in some capacity to augment or streamline their existing operations, data storage, hosting and app deployment. You can now migrate your Domino Applications to the IBM Cloud.
IBM Domino Applications run important processes in your business. The dynamic nature of the business requires continued investment in hardware & infrastructure to run these apps. Further the skills, required to make changes to applications and the environment is both unpredictable and requires continued investment.
IBM Domino Applications on Cloud (DAC) offers hosting services, your way. It is Customizable as well as affordable and offers numerous benefits.

Standard Service features for App hosting


There is currently not much information available regarding Domino Applications on Cloud (DAC). I am sure that in the coming period IBM will provide more information about DAC. Below an IBM video about Domino Applications on Cloud.

IBM Domino Applications on Cloud
This subscription service offers IBM hosted solution for Domino Apps over IBM Bluemix Cloud. The service offers a structured and planned migration process avoiding business disruptions.


More information: IBM Domino Applications on Cloud
See also the related Blog posts Breaking News: IBM Domino Application on Cloud will be avaiable October 2017 by matteo Bisi and How much are your Domino Applications Worth? DAC Knows by Keith Brooks for more information about IBM Domino Application on Cloud.

IBM JUMP Session - Introduction to Transactional Logging


There will be an interesting IBM Jump Session on October 18th, Introduction to Transactional Logging. JUMP stands for Join, Understand, Master and Participate.

Content
Topic: Introduction to Transactional Logging
Date: Wednesday, October 18th, 2017
Time: 11:00 AM EDT (15:00 UTC/GMT, UTC-4 hours) for 60 minutes

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.

More information: IBM JUMP Session - Introduction to Transactional Logging.

IBM Watson Workspace - Team Collaboration with the Built-in Power of Watson


During the past week a lot of blog posts have been written about Watson Workspace after the official announcement made by IBM. In this blog post a little summary and some usefull links regarding IBM Watson Workspace.
Next week I will be participating in a study on interacting with cognitive features in IBM Watson Workspace.  I really looking forward to this study and working for the first time with cognitive features in Watson Workspace.

What is Watson Workspace
IBM Watson Workspace is a messaging app with the built-in power of Watson - it's designed to help you and your teams do your best work. With Watson Workspace, you can connect and collaborate with your teams, squads, and other work groups from anywhere, on any device. It has full, searchable history of all conversations and one central place for all shared images and resources. You can connect third party apps to work more seamlessly with your every day tools and when conversations move fast, cognitive technology summarizes conversations, prioritizes what's important to you and connects actionable language to next steps so you can get more done.

There are two editions of IBM Watson Workspace, Preview and Essentials.
The Preview edition is free and contains:
Persistent group chat
One-on-one direct messaging
File sharing and storage
1GB storage per user
Unlimited searchable history with modifiers
Push and email notifications + real time status indicators
Built-in Watson cognitive technology
Native apps for MacOS, Windows, iOS and Android
Open APIs and third-party apps
Open to anyone inside and outside your organization
Help Center & Forums

A lot for a Free Edition of IBM Watson Workspace. For more information regarding the free edition of IBM Watson Workspace see What is Watson Workspace. For more information about IBM Workspace Essentials see IBM Watson Workspace Purchase and Introducing Watson Workspace Essentials

The Value of Watson Workspace
The video below describes how you can use Watson Workspace to optimize your work day.  Learn how Watson can provide insights for better business outcomes at https://workspace.ibm.com.



For more information: Team Collaboration with the Built-in Power of Watson


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.