Monday, 29 September 2014

Using Bootstrap DateTimePicker

In this blog post I try to give a basic idea about how the Bootstrap DateTimePicker plugin can be used in an XPages application.

1. Minimal Requirements
- jQuery
- Moment.js
- Bootstrap.js
- Bootstrap Datetimepicker script
- Bootstrap CSS
- Bootstrap Datetimepicker CSS
- Optional Locales: Moment's locale files

2. Download Bootstrap DateTime Picker and Moment and add the files to the XPages Application
You can download the Bootstrap Datepicker file from GitHub : DateTimePicker
You can also download Moment from GitHub: Moment

Add the extracted files to the WebContent Folder (Package Explorer).

3 .Include moment.js, bootstrap-datepicker.js and bootstrap-datetimepicker.min.css on your XPage
The files / stylesheet  bootstrap-datetimepicker.min.css, bootstrap-datetimepicker.js and  moment.js must be included on the XPage or Application (Theme).
In this example I added the files directly to the XPage.
Note: In this example I use the OpenNTF Bootstrap4XPages plugin so the bootstrap files do not need to be added to the XPages separately.

<xp:script 
src="moment/moment.js"clientSide="true">
</xp:script>
<xp:script 
src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"clientSide="true">
</xp:script>
<xp:styleSheet 
href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
</xp:styleSheet>

4. Using Bootstrap Datetimepicker
Basic Setup:
- Create a new XPage
- On the XPage add a Date Time Picker Control

Sample Code Basic Setup

<?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="moment/moment.js" clientSide="true"></xp:script>
<xp:script
src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"
clientSide="true">
</xp:script>
<xp:styleSheet
href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
</xp:styleSheet>
</xp:this.resources>
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
 <xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>
Datetimepicker
<xp:span style="color:rgb(255,255,255)">
</xp:span>
<small>Bootstrap plugin</small>
</h1>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date'
id='datetimepicker1'>
<xp:inputText id="inputText2"
styleClass="form-control">
<xp:this.converter>
<xp:convertDateTime type="both"
timeStyle="short" />
</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:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(function () {
    $('#datetimepicker1').datetimepicker();
    });]]></xp:this.value>
</xp:scriptBlock>
</xp:view>

The result is a  good looking Bootstrap style Date Time Picker Control.

Important
Opening the XPage for the first time gives the following error in Chrome's console:


In this blog post I use the solution provided by Mark Leussink for this problem ( there is also a method to load the (JavaScript) resources before Dojo by Sven Hasselbach).
Cause: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages.
You have to hange 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 (root, 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 or CommonJS used. Use global variables.
        if (!jQuery) {
            throw new Error('bootstrap-datetimepicker requires jQuery to be loaded first');
        }
        if (!moment) {
            throw new Error('bootstrap-datetimepicker requires moment.js to be loaded first');
        }
        factory(root.jQuery, moment);
    //}
}(this, function ($, moment) {
    'use strict';
    if (typeof moment === 'undefined') {
        throw new Error('momentjs is required');
    }


5. Customization / options
It is possible to customize the Bootstrap Date Time Picker with a lot of options / attributes.
For example, disable the Time or Date Picker, display time and date side by side or disable one or more days of the week in the date picker.
See the documentation for all options : Documentation
In the examples below I show a few of these customizations / options.

It is also possible to use attributes.

<xp:this.attrs>
   <xp:attr name="data-date-format"
     value="DD-MM-YYYY">
   </xp:attr>
</xp:this.attrs>

Sample Code Bootstrap Datetimepicker

<?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="moment/moment.js" clientSide="true"></xp:script>
<xp:script
src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"
clientSide="true">
</xp:script>
<xp:styleSheet
href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
</xp:styleSheet>
</xp:this.resources>

<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>

<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>
Datetimepicker
<xp:span style="color:rgb(255,255,255)">
</xp:span>
<small>Bootstrap plugin</small>
</h1>
</div>
 
    Format date and placeholder with an Attribute
<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>
<xp:br></xp:br>
 
    Disable Time Picker and Days of Week
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<xp:inputText id="inputText1"
styleClass="form-control">
<xp:this.attrs>
<xp:attr name="data-date-format"
value="DD-MM-YYYY">
</xp:attr>
<xp:attr name="placeholder"
value="Enter a date">
</xp:attr>
</xp:this.attrs>
<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>
 
    Disable Time Picker
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date'
id='datetimepicker3'>
<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-clock">
</span>
</span>
</div>
</div>
</div>
<xp:br></xp:br>
 
    Select Date in Field and Icon
<div class="col-sm-12">
<div class="form-group">
<div id="datetimepicker4">
<div class='input-group date'>
<xp:inputText id="inputText4"
styleClass="form-control">
<xp:this.converter>
<xp:convertDateTime type="date">
</xp:convertDateTime>
</xp:this.converter>
<xp:this.attrs>
<xp:attr name="data-date-format"
value="DD-MM-YYYY">
</xp:attr>
</xp:this.attrs></xp:inputText>
<span class="input-group-addon">
<span
class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>

  <xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[$(function () {
                $('#datetimepicker1').datetimepicker({
                   pick12HourFormat: true,
                   sideBySide: true                               
                });
            });]]></xp:this.value>
</xp:scriptBlock>

  <xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(function () {
                $('#datetimepicker2').datetimepicker({
                    pickTime: false,
                    daysOfWeekDisabled:[0,6]
                });
            });
]]></xp:this.value>
</xp:scriptBlock>

  <xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[$(function () {
                $('#datetimepicker3').datetimepicker({
                    pickDate: false,
                    pick12HourFormat: true
                });
            });
]]></xp:this.value>
</xp:scriptBlock>
 
  <xp:scriptBlock id="scriptBlock4">
<xp:this.value><![CDATA[$(function () {
                $('#datetimepicker4').datetimepicker({
                    pickTime: false                    
                });
            });
]]></xp:this.value>
</xp:scriptBlock>
</xp:view>

Tuesday, 23 September 2014

Readers and Authors Fields

During the past period I have repeatedly been asked how Readers and Authors fields can be added in XPages.
There are several ways to achieve this. For example you could use the property ComputeWithForm.
In this blog post I will show you my solution to add Readers and Authors fields to a Notes Document in XPages.

1. Notes Form
In this example I use a simple form with an Authors and Readers field.


2. XPage
To add the Readers and Authors Fields to the Notes Document I use the following SSJS in the querySave event of the XPage (or Custom Control).
Use getDocument(true) to have the backend document synced with changes made in the frontend document.

var doc:NotesDocument = document1.getDocument(true)


3. Create a new document


4. Readers and Author Fields Notes Document
In the Notes document the Authors en Readers have been set properly.

Authors Field
SSJS : var authors = new Array("[Admin]","[Editors]", @Name("[CN]",@UserName()));


Readers Field
SSJS: var readers = new Array("[Users]","[Admin]");


Sample Code SSJS

//Sync backend document with changes made in the frontend document
var doc:NotesDocument = document1.getDocument(true)
//Authors Field
var authors = new Array("[Admin]","[Editors]", @Name("[CN]",@UserName()));
var item:NotesItem = doc.replaceItemValue("Authors", authors);
item.setAuthors(true);
document1.replaceItemValue("Authors",item);
//Readers Field
var readers = new Array("[Users]","[Admin]");
var item:NotesItem = doc.replaceItemValue("Readers", readers);
item.setReaders(true);
document1.replaceItemValue("Readers",item);
//Save Document
document1.save();

So, this is only one solution to add Readers and Authors Fields to a Notes Document, but this solution works for me.

Friday, 19 September 2014

Using FileInput in XPages

In this blog post I try to give a basic idea about how the Bootstrap FileInput plugin can be used in an XPages application.
This plugin enhances the HTML 5 file input for Bootstrap 3.x into an advanced widget with file preview for images and text, multiple selection, videos and more.
The plugin enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input.
It also offers support for multiple file preview and previewing a wide variety of files (i.e. images, text, flash, and video file types).

With release v2.3.0, the plugin now supports preview of flash and video files. Flash preview will require Shockwave flash to be installed and supported by the client browser.
The flash preview however only works successfully with webkit browsers due to its unique local url creation support. Videos are however supported by all modern browsers that support the HTML5 video tag.
Note that browsers have limited number of video formats supported by the HTML5 video element (e.g. mp4, webm, ogg).
The size of video files are recommended to be small (controlled through maxFileSize property) for not affecting your browser preview performance.

1. Download Bootstrap FileInput and add the files to the XPages Application
You can download the Bootstrap FileInput file from GitHub : FileInput

Add the extracted files to the WebContent Folder (Package Explorer).



2 .Include fileinput.min.css and fileinput.min.js. on your XPage
The file / stylesheet  fileinput.min.css and  fileinput.min.js.  needs to be included on the XPage or Application (Theme).
In this example I added the files directly to the XPage.
Note: In this example I use the OpenNTF Bootstrap4XPages plugin so the bootstrap files do not need to be added to the XPages separately.

<script src="fileinput/js/fileinput.min.js"type="text/javascript"></script>
<link href="fileinput/css/fileinput.min.css" media="all"rel="stylesheet" type="text/css"/>

4. Using Bootstrap FileInput
First we have to initialize the plugin on the XPage.

<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
           $(document).ready(
               function() {
                   $('input[type=file]').fileinput();;
               }
           );
        ]]>
</xp:this.value>
</xp:scriptBlock>

The plugin will automatically convert fields of [input type="file"] to a file input control, if you attach a css class file to the input.

- Create a new XPage
- On the XPage add a File Upload Control



<xp:fileUpload id="fileUpload1"
value="#{document1.fileAttachment}">
</xp:fileUpload>

The result is a  good looking Bootstrap style file upload control.


5. Customization
It is possible to customize the FileInput with a lot of properties / attributes.
For example, show only image for selection & preview and control button labels, styles and icons for the browse, upload, and remove buttons.

<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>

Note: In this example you have to add the attribute 'accept' to the File Upload Control to show only images for selection and preview.

<xp:this.attrs>
<xp:attr name="accept" value="image/*" />
</xp:this.attrs>





It is also possible to upload (save) the uploaded file directly, in edit mode,  without having to save the document first.




















Sample Code XPage FileInput

<?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>

<script src="fileinput/js/fileinput.min.js"
type="text/javascript">
</script>
<link href="fileinput/css/fileinput.min.css" media="all"
rel="stylesheet" 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-upload"></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">
<div class="page-header">
<h1>
FileInput
<xp:span style="color:rgb(255,255,255)">
</xp:span>
<small>Bootstrap plugin</small>
</h1>
</div>
<xp:inputText id="inputText1"
value="#{document1.Company}">
</xp:inputText>
<xp:br></xp:br>
<xp:fileUpload id="fileUpload1"
value="#{document1.fileAttachment}">
<xp:this.attrs>
<xp:attr name="multiple" value="true" />
</xp:this.attrs>
<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:br></xp:br>
<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="/FileInput.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For more information about all properties / attributes : Bootstrap File Input

In one of the next blog post I will discuss other possibilities for uploading files with Bootstrap.

Thursday, 18 September 2014

Using Select2 in XPages (Part II)

In a previous blog post I described how Select2 can be used in an XPages application with Bootstrap included.
In that situation, it was assumed that the OpenNTF Bootstrap4XPages plugin was not installed.
In this blog post I will show you how you can use Select2 with the OpenNTF Bootstrap4XPages plugin.

1. OpenNTF Bootstrap4XPages plugin
The Bootstrap4XPages plugin provides the Twitter Bootstrap rendering technology to XPages.
The goal of this plugin is to enable this new rendering through a dedicated theme, without having to change the application pages. All you have to do is to set the application theme, for example, to 'bootstrapv3.2.0', in Domino Designer.
The theme covers all the regular XPages controls, as well as the ones delivered as part of the extension library and generally rendered using OneUI (application layout, data view...).

Download the OpenNTF Bootstrap4XPages Project from the
OpenNTF website : OpenNTF Bootstrap4XPages

2. Installation Bootstrap4Xpages plugin
The Bootstrap4XPages plugin must be installed on the Domino Server and Domino Designer.

A. Server
The preferred method to install the plugin on the Domino Server is through an Update Site database.










In case the Update Site path is not yet added to the notes.ini file add the following line:
OSGI_HTTP_DYNAMIC_BUNDLES=updatesite.nsf

B. Domino Designer
To install the plugin in the Domino Designer select File - Application - Install and import the updatesite.


























3. Enable Bootstrap4XPages in the XPages Application
To use the Bootstrap4XPages plugin in an XPages Application enable the plugin / library in the XPages Properties.








Set the Application Theme to bootstrapv3.2.0.













Now the Bootstrap4XPages plugin is enabled in the XPages Application.

- Create a new Application Layout
- Select Bootstrap Application Configuration as Configuration in the layout.































- Some properties can now be set in the Bootstrap Layout (see example below)






















4. Select2
In the Bootstrap4XPages plugin Select2 is upgraded to 3.4.6.
Select2 converts a regular (XPage) combobox control into a Select2 Bootstrap one.
There is no need to add the Select2 files to the Web-Content Folder in this situation.
They are already build-in!

Create a new XPage
  • Add the Application (Bootstrap) Layout to the XPage.
  • Add a Combo Box and a List Box to the XPage in a Panel Control.
  • Now add the Select2 Picker for Combo / List Box (form the Bootstrap4XPages plugin / library) to the Combo Box and List Box in the Panel Control.



















The XPages should look similar to the example below.





























Sample Code for the Combo Box and List Box

<xp:comboBox id="comboBox1value="#{document1.Categories}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:@DbLookup("", "byKeyWord", "Category", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
<bx:select2PickerCombo
id="select2PickerCombo2"
allowClearing="true" for="comboBox1"
placeHolder="Select a category">
</bx:select2PickerCombo>

<xp:listBox id="listBox1"value="#{document1.Categories}" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
<bx:select2PickerCombo
id="select2PickerCombo1"
allowClearing="true" for="listBox1"
placeHolder="Select a software category">
</bx:select2PickerCombo>


The final result



















Sample code XPage

<?xml version="1.0" encoding="UTF-8"?>
xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:bx="http://www.openntf.org/xsp/bootstrap" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:panel>
<div class="page-header">
<h1>
Select2
<xp:span style="color:rgb(255,255,255)">.</xp:span>
<small>Combo Box / List Box</small>
</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1"
value="#{document1.Categories}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:@DbLookup("", "byKeyWord", "Category", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
<bx:select2PickerCombo id="select2PickerCombo2"
allowClearing="true" for="comboBox1"
placeHolder="Select a category">
</bx:select2PickerCombo>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<xp:listBox id="listBox1"
value="#{document1.Categories}" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
<bx:select2PickerCombo id="select2PickerCombo1"
allowClearing="true" for="listBox1"
placeHolder="Select a software category">
</bx:select2PickerCombo>
</div>
<div class="panel-footer">List Box - Multiple Values</div>
</div>
</xp:panel>
</xp:view>


For more information see the Bootstrap4XPages website by Mark Leussink:  Website Bootstrap4XPages and the Webinar Bootstrap4XPages.

Wednesday, 17 September 2014

Nominate an IBM Champion

Today is the final day to nominate an IBM Champion.
If you know a person or persons who (has) helped the community through videos, blogposts, moderating forums or communities, presenting at conferences or answering questions on forums, please submit today a nomination as an IBM Champion for this person(s). It will be highly appreciated.

Submit a nomination

This is how IBM explains what a Champion is:
A IBM Champion is someone who makes exceptional contributions to the technical community. Contributions can come in a variety of forms, and popular contributions include blogging, speaking at conferences or events, moderating forums, leading user groups, and authoring books or magazines.

Tuesday, 16 September 2014

Using Select2 in XPages (Part I)

Using Select2 in XPages including Bootstrap
Select2 converts a regular (XPage) combobox control into a Select2 (Bootstrap) one by adding a few lines of JavaScript.

In this blogpost it is assumed that the Bootstrap4Xpages plugin from OpenNTF is not being used.
In a next post I will describe how this can also be done with the Bootstrap4XPages plugin from OpenNTF.

1. Download Select2 and add the files to the XPages Application
You can download Select2 from this site : http://ivaynberg.github.io/select2/







The files must be added in the WebContent Folder (Package Explorer).












2. Include select2.min.js and select2.css on your XPage.
The file / stylesheet select2.css and the file select2.min.js needs to be included on the XPage or, for example, in an Application Theme.










3.  Javascript Library
Last step is adding a few lines of Javascript Library to convert the combo box.
In this example I used Mark Roden's excellent x$() snippet and put it in a Script Library.
I included the Script Library on the XPage.







4. Using the Select2
On the XPage create a Combo Box.













Add this scripblock to the XPage.











Result:




CKEditor in Notes 9.0.1 FP2

After the installation of Domino 9.0.1. FP2 on our server I performed some test regarding the Rich Text Fields.
The tests have been performed in Internet Explorer and Firefox.
The main changes are the update of the CKEditor to 4.3.2 and de update of Dojo to version 1.9.2.

A. Test Rich Text Field in new created application
1. Create XPage with Rich Text Field
In a new XPages Application  a simple form has been created with a Rich Text Field.

The CKEditor is displayed correctly. All functionalities are working correct.

2. Test new functionality spellchecker















3. Test add image functionality















The uploaded image does not need to be sent to the server by the user anymore. This is now done automatically in the new CKEditor.

Result





















It is also possible to adjust the properties of the uploaded image within the CKEditor.





















4. Test add URL-Link functionality
















5. Test add Table functionality















The test was successful, no problems where detected.


B. Test Rich Text Field with Dojo Attributes
One of the problems after installing FP2 is the update of Dojo to version 1.9.2.
If in existing XPages applications Dojo attributes are used this can cause a problem because some attribute names are changed in Dojo 1.9.2.
For example the attribute name for toolbarType has been changed to toolbar.
This problem can be solved with a managed bean that checks the Dojo version (and select the correct Attribute Name).
This solution is provided by Oliver Busse ( http://openntf.org/XSnippets.nsf/snippet.xsp?id=solving-problems-with-ckeditor-in-9.0.1fp1-andor-fp2

‘The bean stores some values in a config map. The map value of "toolbartype" stores whether to use "toolbarType" or "toolbar" as attribute name for the control. So in this case it computes the attribute name and not it's value (in this case I use the "Full" toolbar with all options).’










































The same tests performed. The test was successful, no problems were detected.


C. Test CKEditor with Bootstrap / Skin
Test performed with XPages Application including Bootstrap, Font Awesome and a Skin for the CKEditor. Based on the BS3 Template by Oliver Busse ( https://github.com/zeromancer1972/Bootstrap-3-Template ).
In the WebContent Folder of the NSF added the Bootstrap 3.2.0 files, the Bootstrap Skin for CKEditor 4 (bootstapck) files ( http://ckeditor.com/addons/skins/all ), the Font Awesome 4.2.0 files and jQuery 1.11.0.

































Also added the provided solution for the CKEditor by Oliver Busse.

Rich Text Field (CKEditor)
<xp:inputRichText id="inputRichText1" value="#{document1.Body}">
 <xp:this.dojoAttributes>
 <xp:dojoAttribute value="Full">
 <xp:this.name><![CDATA[#{javascript:dojo.config.get("toolbartype")}]]></xp:this.name>
 </xp:dojoAttribute>
 <xp:dojoAttribute name="extraPlugins" value="autogrow">
 </xp:dojoAttribute>
 <xp:dojoAttribute name="skin">
 <xp:this.value><![CDATA[#{javascript:return @ClientType().equals("Web") ? "bootstrapck,/"+database.getFilePath ()+"/bootstrapck/" : ""}]]></xp:this.value>
 </xp:dojoAttribute>
 <xp:dojoAttribute name="width" value="100%">
 </xp:dojoAttribute>
 </xp:this.dojoAttributes>
 <xp:this.dojoType><![CDATA[#{javascript:return @ClientType().equals("Web") ? "org.wavin.joldenburger.CKEDITOR" :  ""}]]></xp:this.dojoType>
</xp:inputRichText>















The same tests performed. The test was successful, no problems were detected.

Conclusion.
The CKEditor is working after the update to Notes Domino 9.0.1 FP2. Special thanks to Oliver Busse for troubleshooting the FP2 issues and providing a solution. See also his video on YouTube http://youtu.be/3qZJqYHGPzo.

New Blogsite

Today I am starting with a new blogsite about Notes Domino and XPages and more.
I hope I can contribute something through this blogsite to the Notes Domino and XPages Community.