Tuesday, 30 June 2015

Some great Notes Domino and XPages Resources

In my work as a Notes Domino and XPages developer  I make in certain cases use of some great resourses on the Internet. Below my favorite resources, news aggregators and blogs.

1. NotesIn9 - David Leedy
This site mostly focused on Web development by primarily using XPages technology from IBM Domino Servers but you never know when other technology might show up.


2. Collaboration Today
Collaboration Today is a news aggregator for IBM Collaboration Solutions professionals covering news about various IBM products like IBM Connections, IBM Domino, IBM WebSphere Portal etc. and cross product topics like mobile, cloud and analytics.

3. Planet Lotus
Planet Lotus is an aggregation of Lotus related blogs and news. It acquaints those interested in the Lotus Blogosphere with the best blogs out there. 264 Lotus blogs updated hourly.


4. Google+ XPages Community
Objectives for this community are to promote XPages technology and share info between XPages developers.

5. XPages.info
Get started with XPages, Downloads, Demos, Resources and Videos.
XPages is a web and mobile application development platform. It allows IBM Lotus Notes data as well as data from relational and other data sources to be displayed to browser clients on all platforms.
The programming model is based on standards and common web development skills like JavaScript, Ajax, the Dojo Toolkit, Server-side JavaScript, and JavaServer Faces. XPages leverages IBM Lotus Domino functionality, like its NoSQL document-oriented database.

6. Stackoverflow
A great resources for questions and answers about XPages. Just search for XPages or for a specific part of XPages.


7. Notes Domino XPages development forum

My favorite and highly recommended blogs:

- Oliver Busse
Xcellerant - Brad Balassaitis
- Xomino - Mark Roden
- XPageDeveloper - Fredrik Norling
- Notes Speak - Steve Zavocki
- LinQed - Mark Leusink
- Intec Blog - Paul Withers

Please share your favorite Notes and Domino XPages resources and blogs so that we can complement and help each other.

Sunday, 28 June 2015

Notes Domino and XPages Community

As you may know, I am Moderator of the Google+ XPages Community (and Curator of Collaboration Today). Together with the owner Rob Bontekoe, my old XPages teacher, the Google+ XPages community was founded some years ago.
The aim of this community is to promote XPages as a development tool and sharing information about XPages, Notes Domino and, in the near future, XPages for Bluemix.
Once a week The XPages Weekly is published, compiled by Rob Bontekoe.
At this time, the community has 394 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 Notes Domino and XPages then join the Google+ community now.
The more members the more news and the more it is shared within our community.

Link to the Google+ XPages Community : XPages Community


We hope at the end of this year to have more than 400 members :)

Friday, 26 June 2015

Building Apps with the IBM XPages for Bluemix runtime



IBM Bluemix provides an IBM XPages Web Starter starter application as a template so that you can add your code and push the changes back to the Bluemix environment. The IBM XPages for Bluemix runtime environment is the container for this type of application.
You must have version 901v00_13 or later of the XPages Extension Library or newer to use the integrated Bluemix tools for Domino Designer.

IBM Bluemix Document: Building apps with the IBM XPages for Bluemix runtime

See also : Getting started with IBM XPages NoSQL Database for Bluemix

IBM® XPages NoSQL Database for Bluemix™ is a service that adds a fully provisioned Domino® database to your XPages application. Use the IBM Bluemix dashboard or the Cloud Foundry command line tool to create an application and bind an XPages NoSQL Database to it.
The XPages Extension Library has support for Bootstrap, an open source, responsive UI framework. Build responsive applications that look great across a range of devices. Use the power of jQuery, glyphicons, Bootstrap themes and more.


IBM Bluemix Document: Getting started with IBM XPages NoSQL Database for Bluemix

See also : Creating apps with the IBM XPages Web Starter

IBM® Bluemix™ provides an XPages Web Starter application that gets you up and running with an XPages application in the cloud. You can then add your own code and push the changes back to the Bluemix environment.
The IBM XPages Web Starter application is a boilerplate that you can use to develop XPages applications in Bluemix. The starter application combines the IBM XPages for Bluemix runtime environment and the IBM XPages NoSQL Database for Bluemix service to create a functional to-do application that works immediately after you create it. You can create, modify, and delete to-do tasks. The tasks are then saved to the back-end database.

IBM Bluemix Document: Creating apps with the IBM XPages Web Starter

Thursday, 25 June 2015

Using Lightbox for Bootstrap 3 in XPages Part II - Programatically call

In this blog post I will show how an image or video can be opened in the Lightbox Plugin through a programatically call. This is an extension of the script used in the previous blog post, Bootstrap JS Modal plugin in XPages: Using Lightbox for Bootstrap 3 Part I.

Adding the Programatically call in the initialization script
//Programatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
$('#open-youtube').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});


Setup Programatically call in an XPage
<div class="col-sm-10">
<div class="row">
<a href="images/bs.png" id="open-image" data-title="Lightbox Plugin" data-footer="Programatically call" class="col-sm-5">
<img src="images/bs.png" class="img-responsive"></img>
</a>
<a href="https://www.youtube.com/watch?v=SrQT443zfl0" id="open-youtube" data-title="Lightbox Plugin" data-footer="Programatically call" class="col-sm-5">
<img src="images/webvideo.jpg" class="img-responsive"></img>
</a>
</div>
</div>

The final result using a Programatically call.


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">
<script type="text/javascript" src="lightbox/ekko-lightbox.js"></script>
<link rel="stylesheet" href="lightbox/ekko-lightbox.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
//Programatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
$('#open-youtube').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
var a = this.modal_content.find('.modal-footer a');
if(a.length > 0) {
a.click(function(e) {
e.preventDefault();
this.navigateTo(2);
}.bind(this));
}
}
});
});
});
</script>
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-sm-10">
<div class="row">
<a href="images/bs.png" id="open-image" data-title="Lightbox Plugin" data-footer="Programatically call" class="col-sm-5">
<img src="images/bs.png" class="img-responsive"></img>
</a>
<a href="https://www.youtube.com/watch?v=SrQT443zfl0" id="open-youtube" data-title="Lightbox Plugin" data-footer="Programatically call" class="col-sm-5">
<img src="images/webvideo.jpg" class="img-responsive"></img>
</a>
</div>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next post we'll look at image and video galleries.

Wednesday, 24 June 2015

New Notes Domino XPages Position

After a few months without a permanent employer I have, since last Monday, a new job as Notes Domino and XPages developer. My new employer per August 10 will be Kranendonk in Tiel. I am very happy that I may work at this company from August as a Notes Domino and XPages Developer (Functional Application Manager).

KRANENDONK is the robot technology centre for non-repetitive production. By implementing intelligent robot technology, KRANENDONK enables manufacturing companies to produce more efficiently and effectively. The production systems that KRANENDONK supplies are custom-build solutions that are cleverly integrated into material and data flows.
The field in which KRANENDONK operates is not bound by a product or industry, but by a production principle. Traditionally, robots are used for repetitive production. KRANENDONK’s competence lies in the opposite: realizing non-repetitive production by smart implementation of robotics. This opens a range of automation opportunities for manufacturing companies.
KRANENDONK is a Dutch company with subsidiaries in Japan and Denmark. A technology centre position is maintained by simultaneously fulfilling the roles of engineer, supplier, supporter and partner. A key part of KRANENDONK’s position is the ability to continuously work on new robot applications. It does this together with universities and other technology partners.

More information about Kranendonk

Monday, 22 June 2015

Notes Domino 9.0.1 Fix Pack 4 - XPages DatabaseName URL Parameter


In IBM Notes/Domino 9.0.1 FixPack 4 and in releases containing the fix for SPR#MKEE9TKDEM, you may see an error page with the following error message:

CLFAD0382E: The databaseName URL parameter value is not one of the allowed database names. The parameter is &databaseName=otherserver!!app.nsf. The allowed names are configured in the option xsp.data.domino.param.databaseName.whitelist.

There has been a change in the XPages default behavior, that now requires that the allowable databaseNames be configured in a whitelist. The white list is an option that lists allowed databaseNames. Where the whitelist has not been configured, the error above will occur for remote applications (i.e., applications that are not on the current server). There is an option to revert to the previous behavior but there are security implications associated with that decision.
The reason for this change is because of security concerns around malicious users causing the server to run slowly in a Denial Of Service attack. A malicious browser user can use a URL to point the XPages application to read and write the data from any application on the internet or network. The read will be successful if the user currently logged in has access to the application, or especially if the application allows anonymous access.

Only applications that use the databaseName URL parameter will be effected by these changes, but the parameter is used by default, unless explicitly set to ignore. In XPages, the Domino Document (xp:dominoDocument) and Domino View (xp:dominoView) data sources read certain parameters from the URL and apply those parameters to the data source. For example, the Domino Document data source will read a URL parameter named "documentId" and then use that as the document that should be displayed. Both of the data sources support reading the parameter "databaseName". When this is absent, the document or view entries are read from the current application or from the application configured in the XPage source. When the "databaseName" URL parameter is present, the documents are instead read from the application specified in the parameter. The data sources can be configured in the XPage source with the property ignoreRequestParams="true", which means that the parameters are not read from the URL, but that is not the default behavior.

For more information see the Technote (troubleshooting): XPages DatabaseName URL Parameter Whitelist

Sunday, 21 June 2015

Notes Domino 9.0.1 Fix Pack 4 includes TLS 1.2 and upgrades to Dojo 1.9.7 and CKEditor 4.4.3

Back to Notes Domino XPages and Bootstrap. Last week Fix Pack 4 was released. 9.0.1 Fix Pack 4 is a collection of low-risk, high-impact fixes to help customers safely avoid known issues. IBM strongly recommends that customers running Notes/Domino 9.0.1x upgrade to this latest Fix Pack since it addresses a small percentage of defects that impact the broadest set of customers.
9.0.1 Fix Pack 4 addresses defects in the Client, Server, Notes Browser Plug-in and Domino SE OpenSocial component and includes upgrades of Dojo and the CKEditor. Below an overview of the Fix Lists.


9.0.1 Fix Pack 4 Fix List descriptions:

Client

  • IFAY9QZGKG (LO82854) - Fixes issue where when a user attempts to add a private Google calendar to their Notes calendar, the error "Must be a calendar user to use Google Calendar private feeds" is received. (technote 1690894)
  • NNBN999LWB (LO76096) - Fixes issue where meetings sent from Outlook as rich text format, arrive in Notes as plain text emails. (technote 1511942)
  • JSTN9QJV73 (LO82640) - Fixes intermittent Notes Client crash on Startup / Launch
  • +IFAY9PMFDX (LO82254) - Fixes issue where the Notes Client refuses to launch after doing "Show Duplicate Calendar Entries". This is a regression in 9.0.1.
  • SHEZ9P3KAP (LO82001) - Fixes install failure when installing 9.0.1 FP2 or 9.0.1 FP3 on Windows due to low memory condition in Java.
  • RCFE9K5TRJ (LO80436) - Fixes Notes Client scaling issues with high screen resolutions.
  • +LQPG9SPCL4 (LO83822) - Fixes Notes Client hang when pasting certain Mac clipboard content (screenshot, Keynote, etc) into a Notes Rich Text Field. This is a regression in 9.0.1 FP3.
  • SHEZ9DCEWP (LO77845) - Fixes issue where the 'All Mail and Archives' search does not work when sever based archived policy is in place.

Server

  • JRED8DVKSU (LO58322) - Fixes issue where Domino's time will be wrong when DST is set to take place at a time other than 2am. If the DST change occurs at 11:59:59pm, DST will occur 22 hours early on Notes/Domino. If it occurs at midnight, it will be off by 2 hours because Domino does not actually change time until 2AM. This fix is OFF by default and controlled through a new Notes.ini DSTLAWTIME=x DSTLAWTIME not defined in Notes.ini -> Use default behavior of 2am for DST Begin, and 1am for DST End. DSTLAWTIME=Hour:Min;Hour:Min - Hour is 0-23, and Min is 0-59 - DST Time for the boundaries Begin/End. DSTLAWTIME=99 -> Windows only, use the value from stucture for DST Date Hour:Min. (technote 1687371)
  • TOCL9UJJU4 (LO84263) - Fixes issue where after installing the Domino JVM security patch, running Domino as a service no longer works
  • KLYH9QKT4B (LO82912) - Notes / Domino Support for TLS 1.2 (Transport Layer Security 1.2) with protocols: HTTP, SMTP, LDAP, POP3 & IMAP.
  • +RGAU9T8P4Y (LO83641) - Fixes LS2J Error With "Java Constructor Failed To Execute" after installing 901FP3. This is a regression in 9.0.1 FP3. (technote 1696682)
  • JACE98S37Z (LO76425) - Fixes issue where when replying to a mail that includes a graphic image, "HTMLAPI Problem converting to HTML" error occurs.
  • TCHL9SST8V (LO83505) - Fixes security issue in NSD (technote 1700029)
  • TMAI8UAJH9 (LO69373) - Fixes issue where the "Date of Creation of a message in the mail database becomes out of sync with the date column in the inbox.
  • +TSOE8KCJCP (LO63227) - Fixes issue where Fixup does not repair corrupt database with UNID index problems. This is a regression in 8.5.1.
  • JMDK9MA6EJ (LO81366) - Fixes memory overwrite caused by Domino Server crash due to improper string length being returned

iNotes

  • FLII9P8DA5 (LO82067) - Fixes issue where the message: "Wrong password entered for old password" error incorrectly appears when the user tries to change the password from iNotes in particular configurations. This is a regression in 8.5.3. (technote 1692952)
  • +MBOA9DDC3T (LO77864) - Fixed an issue where editing the subject of a message after Spell checking and choosing "Cancel Send" would result in the edits being ignored and sending the original subject. This is a regression in 9.0.
  • HMUH9Q58GQ (LO82455) - Fixed an issue where the error message "A problem has occurred which may have caused the current operation to fail" displayed when opening a specific email message with Internet Explorer 10.

More information : IBM Notes/Domino 9.0.1 Fix Pack 4 Release Notice
Download : Download Options for Notes & Domino 9.0.1 Fix Packs

CKEditor 4.4.3 Fixed Issues:

  • Fixed XSS vulnerability in the Preview plugin reported by Mario Heiderich of Cure53.
  • #12110: Fixed: Editor crash after deleting a table. Thanks to Alin Purcaru!
  • #11897: Fixed: Enter key used in an empty list item creates a new line instead of breaking the list. Thanks to noam-si!
  • #12140: Fixed: Double-clicking linked widgets opens two dialog windows.
  • #12132: Fixed: Image is inserted with width and height styles even when they are not allowed.
  • #9317: [IE] Fixed: config.disableObjectResizing does not work on IE. Note: We were not able to fix this issue on IE11+ because necessary events stopped working. See a last resort workaround and make sure to support our complaint to Microsoft.
  • #9638: Fixed: There should be no information about accessibility help available under the Alt+0 keyboard shortcut if theAccessibility Help plugin is not available.
  • #8117 and #9186: Fixed: In HTML5 <meta> tags should be allowed everywhere, including inside the <body> element.
  • #10422: Fixed: config.fillEmptyBlocks not working properly if a function is specified.

New Features:

  • #12164: Added the "Justify" option to the "Horizontal Alignment" drop-down in the Table Cell Properties dialog window.
More info about the CKEditor : The best web text editor for everyone
More info about Dojo 1.9 : Dojo 1.9 Release Notes

Saturday, 20 June 2015

This is even nicer than XPages

For a change something different than XPages and Bootstrap. Thursday night my daughter's son Noah was born. It was a long and heavy delivery. All is well with mother and child. For the first time I am a grandfather. Everyone is tired but very happy. He weighs 2890 gram and is 50 cm tall.


During the coming period I will be blogging somewhat less and I'm going to enjoy my grandchild :)

Wednesday, 17 June 2015

IBM Notes Domino Next

Domino, Notes, and Verse - Where Are We and Whats the Future?
Last Tuesday we have seen what IBM has in store for the future of Notes Domino and IBM Verse. In case you missed the webinar of Teamstudio and T.L.C.C. below the replay and the slides.


The content of this webinar was:
Come hear from IBM's product team and learn where Notes, Domino and Verse are headed in this webinar for administrators, application developers and managers. The product team from IBM will cover the following topics:
Domino and Notes Directions with Scott Vrusho - Learn the future directions of the Notes and iNotes client, and the Domino server.
Domino Security with Dave Kern and Kevin Lynch - Learn how the recent changes to the Domino server have enabled Domino to be a very secure platform and learn what you should do to make sure your Domino servers are using the latest security enhancements.
IBM Verse with Scott Souder - Scott will review what IBM Verse is and where it is going. Then hold onto your seat as Scott shows you why Verse is the new way to work!




For more information about the future of Domino (XPages) Application Development see the earlier blog post: The Future of Domino Application Development.

Tuesday, 16 June 2015

Bootstrap JS Modal plugin in XPages: Using Lightbox for Bootstrap 3 Part I

In this blog post I show how through the Lightbox Plugin the functionality of the Bootstrap JS Modal can be extended. Lightbox for Bootstrap 3 utilizes Bootstraps modal plugin to implement a lightbox gallery. In other words, a lightbox module for Bootstrap that supports images, YouTube videos, and galleries - built around Bootstrap's Modal plugin. In this first part of this series, the basic setup will be explained.
In order to use the Lightbox Plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Lightbox for Bootstrap 3.

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 lightbox has been added in the WebContent Folder.


Next the JavaScript and CSS files, ekko-lightbox.js and ekko-lightbox.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="lightbox/ekko-lightbox.js"></script>
<link rel="stylesheet" href="lightbox/ekko-lightbox.css" type="text/css" />

Initializing the plugin
To to initialize the plugin the script below is used in this basic setup.

<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
var a = this.modal_content.find('.modal-footer a');
if(a.length > 0) {
a.click(function(e) {
e.preventDefault();
this.navigateTo(2);
}.bind(this));
}
}
});
});
});
</script>

Basic setup in XPages
<div class="col-sm-4">
<a href="images/bs.png" data-toggle="lightbox"
data-title="Lightbox Plugin" data-footer="Basic Setup">
<img src="images/Photo1.jpg" class="img-responsive"></img>
</a>
</div>

Remark: you can use for example the modal plugin title option via data-title and the custom footer tag using data-footer.

The result is a responsive Lightbox using the Bootstrap JS Modal.


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">
<script type="text/javascript" src="lightbox/ekko-lightbox.js"></script>
<link rel="stylesheet" href="lightbox/ekko-lightbox.css"
type="text/css" />
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
var a = this.modal_content.find('.modal-footer a');
if(a.length > 0) {
a.click(function(e) {
e.preventDefault();
this.navigateTo(2);
}.bind(this));
}
}
});
});
});
</script>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-sm-4">
<a href="images/bs.png" data-toggle="lightbox" data-title="Lightbox Plugin" data-footer="Basic Setup">
<img src="images/bs.png" class="img-responsive"></img>
</a>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next post we will further expand the Lightbox Plugin.

Monday, 15 June 2015

Bootstrap in XPages: Using the new Bootstrap Fileinput Plugin in XPages Part I

Many Bootstrap Plugins have moved during the past period to a new version. Examples include among others are Select2 and the Bootstrap Date-Time Picker. Also the Bootstrap FileInput Plugin has moved to a new version, at this point version 4. In this mini-series I will show how the new version can be used in XPages. In this introduction I will explain the basic setup.

The Bootstrap FileInput Plugin is an enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging and dropping files, viewing upload progress, and selectively previewing, adding, or deleting files.
In order to use the Bootstrap FileInput 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-FileInput.

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 bootstrapfileinput4 has been added in the WebContent Folder.


Next the JavaScript and CSS files, fileinput.js and fileinput.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="bootstrapfileinput4/js/fileinput.js"></script>
<link rel="stylesheet" href="bootstrapfileinput4/css/fileinput.css" media="all" type="text/css" />

Adding the x$ jQuery selector for XPages
Furthermore I 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.


<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

The script itself can be made up as follows. In this example I use a few Options. In the next few blog posts these options will be explained in more detail.

<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
$(document).ready(
function() {
$('input[type=file]').fileinput({
previewFileType: "image",
browseClass: "btn btn-primary",
browseLabel: "Browse",
browseIcon: '<i class="glyphicon glyphicon-plus"></i>',
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
});
}
);
]]>
</xp:this.value>
</xp:scriptBlock>

Basic Setup fileUpload in XPages
<xp:fileUpload id="fileUpload1"
value="#{document1.fileAttachment}">
<xp:this.attrs>
<xp:attr name="accept" value="image/*" />
</xp:this.attrs>
</xp:fileUpload>

Remark: In this example I use the data-attribute  accept with a value image/*. This means that only images can be added to the FileInput. The data attributes will be described in more detail in the next few blog posts.

The result is a  good looking Bootstrap FileInput.


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.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapfileinput4/js/fileinput.js"></script>
<link rel="stylesheet" href="bootstrapfileinput4/css/fileinput.css" media="all" type="text/css" />
<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
$(document).ready(
function() {
$('input[type=file]').fileinput({
previewFileType: "image",
browseClass: "btn btn-primary",
browseLabel: "Browse",
browseIcon: '<i class="glyphicon glyphicon-plus"></i>',
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
});
}
);
]]>
</xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="page-header">
<h1>
FileInput
<xp:span style="color:rgb(255,255,255)"></xp:span><small>Bootstrap FileInput Plugin</small>
</h1>
</div>
<xp:fileUpload id="fileUpload1"
value="#{document1.fileAttachment}">
<xp:this.attrs>
<xp:attr name="accept" value="image/*" />
</xp:this.attrs>
</xp:fileUpload>
<xp:br></xp:br>
<xp:fileDownload rows="30" id="fileDownload1"
displayLastModified="true" value="#{document1.fileAttachment}"
hideWhen="true" allowDelete="true">
</xp:fileDownload>
<xp:button value="Save Document" id="button1" styleClass="btn btn-primary">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument></xp:saveDocument>
<xp:openPage name="/BootstrapFileInput4.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next blog posts we will also look more closely at the new features of this Plugin. So stay tuned, there is more to come. For more information, see also my previous blog post Using FileInput in XPages.

Friday, 12 June 2015

The Future of Domino Application Development, XPages, Notes and Verse

About four weeks ago we have seen what IBM has to offer regarding the future of Domino (XPages) Application Development. In case you missed it below the webinar and the associated slides.


The content of this webinar was:
Learn IBM's product directions for Domino and XPages application development from 3 speakers from the IBM development team: Pete Janzen, Martin Donnelly, and Brian Gleeson.
The Domino application development landscape is about to get a whole lot richer. Not only is IBM giving developers new features that will enhance their on-premises platform, XPages runtime and Domino Designer, but they will show how they are bringing the value of Domino to the cloud with new services for IBM Bluemix. New responsive design features, RDBMS data sources, document encryption on the Web, and Bluemix: there's a lot to pack in!



Coming Tuesday, June 16th, there is another webinar, Domino, Notes and Verse - Where are we and What's the Future?

Contents of this webinar will be:
Come hear from IBM's product team and learn where Notes, Domino and Verse are headed in this webinar for administrators, application developers and managers. The product team from IBM will cover the following topics:
Domino and Notes Directions with Scott Vrusho - Learn the future directions of the Notes and iNotes client, and the Domino server.
Domino Security with Dave Kern and Kevin Lynch - Learn how the recent changes to the Domino server have enabled Domino to be a very secure platform and learn what you should do to make sure your Domino servers are using the latest security enhancements.
IBM Verse with Scott Souder - Scott will review what IBM Verse is and where it is going. Then hold onto your seat as Scott shows you why Verse is the new way to work!
For this webinar you can register on the website of TLCC: Register

This week Chris Miller also wrote an excellent blog post about what we can expect - Update on IBM Verse and the IBM Messaging Roadmap.
There is more to come next week so stay tuned and register for the upcoming webinar next Tuesday.

Wednesday, 10 June 2015

IBM Connect 2016

A New Way to Engage — Save the Date! 
Mark your calendars for Connect 2016 in Orlando! Get ready to explore the future of Enterprise Social Software and Digital Experience solutions and innovations, driven by IBM's unparalleled expertise in cloud, analytics, mobile and social.


Mark your calendar now for this exciting event! Check back in early August to find out about registration and details on how you can become a speaker.

For some highlights IBM Connected 2015 see my earlier blog post: IBM ConnectED 2015.


For more information visit the IBM site: IBM Connect 2016

Monday, 8 June 2015

Migrating to Select2 version 4.0.0. including a simple AMD Loader Fix in XPages

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. In this blog post I will show how to 'migrate' in a simple manner to the new version including the most simple AMD Loader fix that always works without any problem. In the following example is transitioned from version 3.5.1 to 4.0.0 (for using Select2 version 3.5.1 see the blog post Using Select2 in XPages Part I.
In order to use Select2, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Select2 version 4.0.0.

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 select2V4 has been added in the WebContent Folder.


Next the JavaScript and CSS files, select2.js and select2.css, must be included on the XPage or Custom Control. In this example I add the files to a Custom Control.

<script type="text/javascript" src="select2v4/js/select2.js"></script>
<link rel="stylesheet" href="select2v4/css/select2.css" />

Adding the x$ jQuery selector for XPages
Furthermore I use the the great XSnippet by Mark Roden (again), x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. The XSnippet can be added to the Script Libraries.


<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

The script itself can be made up as follows. The name of the id in the script must correspond with the id of the Combo Box / List Box.

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).select2({
placeholder: "Select a category",
allowClear: true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

Remark: When a placeholder is used for a non-multi-value select box such as a Combo Box, an empty tag is required as a first option. One possibility is to generate computed items, including an empty tag, as values for the Combo Box.

var arr = new Array("");  
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list;

Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value (allowClear: true).

AMD Loader Fix
Finally, the JavaScript file select2.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. This solution is put forward by Mark Roden in one of his recent blog posts. Select2 v4 needs AMD fixing in Domino R9 XPages.

1. Go to the WebContent Folder and select the JavaScript file select2.js
2. Select Open With - Client/Server JS Editor


3. Removed in the second line define.amd and replace it with false 


4. Save the JavaScript file select2.js

Responsive design - Percent width
Select2's width can be set to a percentage of its parent to support responsive design.
The best way to ensure that Select2 is using a percent based width is to inline the style declaration into the tag.
In the All Properties of the Combo Box set the Property style to the desired percentage.
I always use: style="width: 100% !important;"

Basic Setup Combo Box in XPages
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1" value="#{document1.Categories}" style="width: 100% !important;">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");  
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list;}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
</div>

The result is a  good looking Bootstrap style select box.


Example with List Box (multi value)
Select2 also supports multi-value select boxes. The select below is declared with the multiple data-attribute.

<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<xp:listBox id="listBox1" value="#{document1.Categories}" style="width: 100% !important;">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript: @DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
<div class="panel-footer">List Box - Multiple Values</div>
</div>
</div>

The result is a  good looking Bootstrap style multi select box.


Code Custom Control
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="select2v4/js/select2.js"></script>
<link rel="stylesheet" href="select2v4/css/select2.css" />
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).select2({
placeholder: "Select a category",
allowClear: true
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).select2({
placeholder: "Select a software category",
allowClear: true
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div class="page-header">
<h1>Select2 - Version 4.0.0 <xp:span style="color:rgb(255,255,255)">.</xp:span>
<small>Combo Box / List Box</small>
</h1>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1" value="#{document1.Categories}" style="width: 100% !important;">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");  
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list;}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<xp:listBox id="listBox1" value="#{document1.Categories}" style="width: 100% !important;">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript: @DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
<div class="panel-footer">List Box - Multiple Values</div>
</div>
</div>
</xp:panel>
</xp:view>

For more Core Options I refer to the documentation: Options.

Concluding Remark
In the above examples I've used the following basic view.

Wednesday, 3 June 2015

Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages

A few months ago I wrote a post blog post about how to use the Bootstrap 3 DateTime Picker in XPages, Using Bootstrap DateTimePicker. In this revised blog post I will show how the Bootstrap 3 DateTime Picker can be used in XPages using a slightly different appraoch. I am using version 4 of the the Bootstrap 3 DateTime Picker and version 2.10 of Moment, the latest revisions. There are some major changes in the Options and Functions. The plugin is actually completely rewritten.

Minimal Requirements
- jQuery
- Moment.js
- Bootstrap.js (transition and collapse are required)
- Bootstrap Datepicker script
- Bootstrap CSS
- Bootstrap Datepicker CSS
- Locales: Moment's locale files

Adding the JS and CSS files
To use the Bootsrap 3 DateTime Picker in XPages first the Bootstrap 3 DateTime Picker and Moment files must be downloaded and added to the WebContent Folder in the Package Explorer.
You can download the Bootstrap DateTime Picker files from GitHub : DateTimePicker
You can also download the Moment files from GitHub: Moment


Next the JavaScript files / Stylesheet  bootstrap-datetimepicker.css, bootstrap-datetimepicker.js and moment-with-locales.js must be included on the XPage or Custom Control. In this example I add the files directly to the XPage. Further I load Moment first to avoid any possible sequential loading problems. Hereby I use the provided solution by Sven Hasselbach. I use moment-with-locales.js in order to make use of the Locales files.

<xp:this.properties>
<xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>  
<xp:this.resources>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value="moment210/moment-with-locales.js"/>
</xp:this.attributes>
</xp:headTag>

<script type="text/javascript" src="bootstrapdatetimepicker4/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="/bootstrapdatetimepicker4/css/bootstrap-datetimepicker.css" />

Adding the x$ jQuery selector for XPages
Furthermore I use the the great XSnippet by Mark Roden (again), x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. You can add the XSnippet to the Script Libraries.



<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

The script itself can be made up as follows. The name of the id in the script must correspond with the id of the DateTime Picker (input-group).

<xp:scriptBlock id="scriptBlock1">
  <xp:this.value><![CDATA[
     $(document).ready(
       function() {
          x$( "#{id:datetimepicker1}" ).datetimepicker({
                    locale: 'nl'
                });
            });
   ]]></xp:this.value>
 </xp:scriptBlock>

AMD Loader
Finally, the JavaScript file bootstrap-datetimepicker.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. You have to change the source code of the library. In the JavaScript file (bootstrap-datetimepicker.js) find the lines that determine if it can use the AMD loader. They can mostly be found at the beginning or end of a JavaScript file. Below the modifications made in the bootstrap-datetimepicker.js file.

(function (factory) {
    'use strict';
    //if (typeof define === 'function' && define.amd) {
        // AMD is used - Register as an anonymous module.
        //define(['jquery', 'moment'], factory);
    //} else if (typeof exports === 'object') {
        //factory(require('jquery'), require('moment'));
   // } else {
        // Neither AMD nor CommonJS used. Use global variables.
       if (typeof jQuery === 'undefined') {
            throw 'bootstrap-datetimepicker requires jQuery to be loaded first';
        }
        if (typeof moment === 'undefined') {
            throw 'bootstrap-datetimepicker requires Moment.js to be loaded first';
        }
        factory(jQuery, moment);
   // }

Basic Setup in XPages
<div class="page-header">
<h1>
Datetimepicker V4 <xp:span style="color:rgb(255,255,255)"></xp:span><small>Bootstrap plugin</small></h1>
</div>
<div class="col-sm-12">
<div class="well well-small">Format date, Locales and placeholder with an Attribute</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<xp:inputText id="inputText2" styleClass="form-control" value="#{document1.DateOfBirth}">
<xp:this.attrs>
<xp:attr name="data-date-format" value="DD-MM-YYYY hh:mm:ss"></xp:attr>
<xp:attr name="placeholder" value="Enter data and time"></xp:attr>
</xp:this.attrs>
<xp:this.converter>
<xp:convertDateTime type="date" dateStyle="short"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>

The result is a  good looking Bootstrap style DateTime Picker Control.


Example with Options
In the example below, I use the following options (for a complete list I refer to the documentation: Options ):
- locale: 'nl'
- showTodayButton:true - Show the "Today" button in the icon toolbar.
- showClose: true - Show the "Close" button in the icon toolbar.
- daysOfWeekDisabled: [0,6] - Disables the section of days of the week, e.g. weekends.
- format:('DD-MM-YYYY, HH:mm:ss') - Format Day, Month, Year including 24 hour display

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:datetimepicker2}" ).datetimepicker({
locale: 'nl',
showTodayButton:true,
showClose: true,
daysOfWeekDisabled: [0,6],
format:('DD-MM-YYYY HH:mm:ss')
});
});
]]></xp:this.value>
</xp:scriptBlock>

<div class="col-sm-12">
<div class="well well-small">Date Time Picker including options</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<xp:inputText id="inputText3" styleClass="form-control">
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>

The final result. 
Remark: If only the date should be displayed it can be specified in the Option Format.
Format dictates what components are show, eg DD-MM-YYYY will not display the time picker.



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.properties>
<xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>     
<xp:this.resources>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value="moment210/moment-with-locales.js"/>
</xp:this.attributes>
</xp:headTag>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapdatetimepicker4/js/bootstrap-datetimepicker.js" clientSide="true"></script>
<link rel="stylesheet" href="bootstrapdatetimepicker4/css/bootstrap-datetimepicker.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:datetimepicker1}" ).datetimepicker({
locale: 'nl'
});
});
]]></xp:this.value>
</xp:scriptBlock> 
<xp:scriptBlock id="scriptBlock2">
 <xp:this.value><![CDATA[
 $(document).ready(
 function() {
 x$( "#{id:datetimepicker2}" ).datetimepicker({
 locale: 'nl',
 showTodayButton:true,
 showClose: true,
 daysOfWeekDisabled: [0,6],
 format:('DD-MM-YYYY HH:mm:ss')
 });
 });
 ]]></xp:this.value>
 </xp:scriptBlock>
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>Datetimepicker V4<xp:span style="color:rgb(255,255,255)"></xp:span>
<small>Bootstrap plugin</small></h1>
</div>
<div class="col-sm-12">
<div class="well well-small">Format date, Locales and placeholder with an Attribute</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<xp:inputText id="inputText2" styleClass="form-control" value="#{document1.DateOfBirth}">
<xp:this.attrs>
<xp:attr name="data-date-format" value="DD-MM-YYYY hh:mm:ss"></xp:attr>
<xp:attr name="placeholder" value="Enter data and time"></xp:attr>
</xp:this.attrs>
<xp:this.converter>
<xp:convertDateTime type="date" dateStyle="short">
</xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>        
<div class="col-sm-12">
<div class="well well-small">Date Time Picker including options</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<xp:inputText id="inputText3" styleClass="form-control">
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>        
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

There are other ways to integrate the  Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages but in this particular case I have chosen for a different approach which also works properly.