Thursday, 15 December 2016

Replay XPages Webinar - Marty, You're Just Not Thinking Fourth Dimensionally

On December 13th a very interesting webinar was organized by T.L.C.C and Team Studio, Marty, You're Just Not Thinking Fourth Dimensionally by IBM Champion Paul Withers. For those who missed this webinar below the content, slides and video.

Content Webinar
When XPages code doesn't work as expected it is often because the expectation was wrong. With the various phases of the XPages lifecycle, validation, the various event handler settings, embedding Server-Side JavaScript within Client-Side JavaScript or scoped variables, understanding what's really there when your code wants it is key troubleshooting XPages. In this webinar Paul Withers will help you think fourth dimensionally to better pre-empt the outcomes and troubleshoot when things don't work out like you expect. You'll realise whether or not the bridge over Clayton...Shonash Ravine will be there to ensure your XPages make it Back to the Future.



Second Time IBM Champion for Collaboration Solutions (ICS)!

Yesterday IBM announced the IBM 2017 Champions for Collaboration Solutions (ICS). For a complete overview of all IBM Champions see the IBM Announcement, Introducing the 2017 IBM Champions for ICS!
My sincere congratulations to all IBM Champions ICS 2017! I would also like to thank everyone who nominated me for IBM Champion 2017. Thank you very much!
This year I was selected for the second time as IBM Champion for Collaboration Solutions. Thank you IBM! I am humbled and grateful to be belong to this special group of IBM Champions for Collaboration Solutions.



Monday, 12 December 2016

XPages Webinar: Marty, You're Just Not Thinking Fourth Dimensionally

Tomorrow a very interesting webinar will be organized by T.L.C.C and Team Studio, Marty, You're Just Not Thinking Fourth Dimensionally by IBM Champion Paul Withers. The registration for this webinar is available on the T.L.C.C website.


Content Webinar
When XPages code doesn't work as expected it is often because the expectation was wrong. With the various phases of the XPages lifecycle, validation, the various event handler settings, embedding Server-Side JavaScript within Client-Side JavaScript or scoped variables, understanding what's really there when your code wants it is key troubleshooting XPages.
In this webinar Paul Withers will help you think fourth dimensionally to better pre-empt the outcomes and troubleshoot when things don't work out like you expect. You'll realise whether or not the bridge over Clayton...Shonash Ravine will be there to ensure your XPages make it Back to the Future.

For more information: XPages Webinar Series with TLCC and Teamstudio.

Missed a Webinar? Look here for the recorded webinars.
Below a recording of the webinar from November 3rd, The Future of Notes and Domino from IBM and the Webinar XPages and jQuery DataTables: Simplifying View Creation while Maximizing Functionality.



Friday, 9 December 2016

Quick XPages Tip: Responsive Videos using the YouTube IFrame Player API and CSS in XPages


This past week I was asked to embed a video on a XPages in which the sound had to be muted when the XPages was opened and the video played automatically. Given the default option 'volume = 0' no longer works in case an iframe is used (see example below), I decided to use the YouTube IFrame Player API including a CSS file in this specific case. Below an example of the use of the YouTube IFrame Player API in a XPage.

<div class="video-container">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/PYpD7H3lNGA?autoplay=1;controls=0;loop=1;showinfo=0;volume=0;playlist=PYpD7H3lNGA"
frameborder="0" allowfullscreen="">
</iframe>
</div>

Basic setup YouTube IFrame Player API with some additional options
<script src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('video1', {
videoId: 'PYpD7H3lNGA', // YouTube Video ID
playerVars: {
autoplay: 1,  // Auto-play the video on load
controls: 0,  // Show pause/play buttons in player
showinfo: 0,  // Hide the video title
modestbranding: 0,  // Hide the Youtube Logo
loop: 1,   // Run the video in a loop
fs: 0,  // Hide the full screen button
cc_load_policy: 0,  // Hide closed captions
iv_load_policy: 3,  // Hide the Video Annotations
autohide: 0,   // Hide video controls when playing
playlist: 'PYpD7H3lNGA'
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
</script>

Example YouTube IFrame Player API in an XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:styleSheet href="/print.css" media="print"></xp:styleSheet>
<xp:styleSheet href="/video.css"></xp:styleSheet>
</xp:this.resources>
<xc:ccLayout><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div id="video-container">
<div id="video1"></div>
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('video1', {
videoId: 'PYpD7H3lNGA', // YouTube Video ID
playerVars: {
autoplay: 1,
controls: 0,
showinfo: 0,
modestbranding: 0,
loop: 1,
fs: 0,
cc_load_policy: 0,
iv_load_policy: 3,
autohide: 0,
playlist: 'PYpD7H3lNGA'
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
</script>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

Corresponding CSS file for responsiveness
.video-container {
 position:relative;
 padding-bottom:56.25%; /* 16:9 */
 padding-top:30px;
 height:0;
 overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
 position:absolute;
 top:0;
 left:0;
 width:100% !important;
 height:100% !important;
}

Final result is a responsive video using the YouTube IFrame API Player.
More information YouTube IFrame API Player.

Wednesday, 30 November 2016

IBM Notes FP7 IF1 now Available for Download on IBM Fix Central - Solved Problem Duplicate Attachment Icons


IBM released a new Interim Fix Pack for Notes FP7 on IBM Fix Central. The main problem that is resolved in this interim fix concerns the duplicate Attachment Icons When Using Ls Embedobject To Attach Files To A NotesRichTextItem (RGAUADUM59). This was a mojor problem for a lot of IBM Notes Users.
For more information about this problem see my previous blog post IBM Notes 9 FP7 - Issue Attachments Send from Windows Explorer and Hidden Attachments Fields.

Download links: IBM Notes FP7 IF1


Tuesday, 22 November 2016

Using Bootstrap Toggle a Highly Flexible Bootstrap Plugin that Converts Checkboxes into Toggles in XPages

One of the requirements for a new XPages Project constisted of a toggle functionality for checkboxes. In my search I came across the Bootstrap Toggle Plugin, a highly flexible Bootstrap plugin that converts checkboxes into toggles. Options can be passed via data attributes or JavaScript. For data attributes, it is only necessary to append the option name to data-, as in data-on="Enabled". It is also possible to use Methods to control toggles directly. Below is an example of how the Bootstrap Toggle Plugin can be used in an XPages application.
In order to use the Bootstrap Toggle 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 Toggle.

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

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

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.

The script itself can be made up as follows. In this example I use a few Options including Font Awesome.


<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:checkBox1}" ).bootstrapToggle({
on: "<i class='fa fa-play'></i> Play",
off: "<i class='fa fa-pause'></i> Pause",
onstyle:'info',
offstyle:'danger',
size:'small'
});
})
]]></xp:this.value>
</xp:scriptBlock>

Basic Setup Checkbox
In the example below I use some data-attributes which can not be included as shorthand property in the x$ jQuery selector for XPages.

<xp:checkBox text="" id="checkBox1"
value="#{document1.FIELDNAME}" checkedValue="Yes"
uncheckedValue="No">
<xp:this.attrs>
<xp:attr name="checked" value="checked"></xp:attr>
<xp:attr name="data-onstyle" value="info"></xp:attr>
</xp:this.attrs>
</xp:checkBox>

Final Result
The final result is a responsive Bootstrap Toggle functionality 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">
<style>
.slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; }
.fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; }
.quick .toggle-group { transition: none; -webkit-transition: none; }
</style>
<xp:this.data>
<xp:dominoDocument var="document1" formName="Visitors"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="bootstraptoggle/css/bootstrap-toggle.css" />
<script type="text/javascript" src="bootstraptoggle/js/bootstrap-toggle.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:checkBox1}" ).bootstrapToggle({
on: "<i class='fa fa-play'></i> Play",
off: "<i class='fa fa-pause'></i> Pause",
onstyle:'info',
offstyle:'danger',
size:'small'
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:checkBox2}" ).bootstrapToggle({
on: 'Yes',
off: 'No',
onstyle:'primary',
offstyle:'danger',
size:'small'
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h4>Bootstrap Toggle</h4>
<h5>
Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.
</h5>
<br />
<div class="row">
<div class="col-sm-2">
<xp:checkBox text="" id="checkBox1"
value="#{document1.Video}" checkedValue="Play" uncheckedValue="Pause">
<xp:this.attrs>
<xp:attr name="data-style" value="slow"></xp:attr>
<xp:attr name="checked" value="checked"></xp:attr>
</xp:this.attrs>
</xp:checkBox>
</div>
<div class="col-sm-2">
<xp:checkBox text="" id="checkBox2"
value="#{document1.Question}" checkedValue="Yes" uncheckedValue="No" defaultChecked="true">
</xp:checkBox>
</div>
</div>
<br />
<xp:button value="Save Toggle Values" id="button1" styleClass="btn btn-primary"><xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument var="document1"></xp:saveDocument>
<xp:openPage name="/bootstraptoggle.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action></xp:eventHandler></xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information: Bootstrap Toggle Plugin

Wednesday, 16 November 2016

Tower for Windows - Version Control with Git Made Easy in a Beautiful, Efficient and Powerful App


Currently I am using SourceTree for my XPages Projects. Today I read about Tower which has finally arrived on Windows. I'm still a Windows user and not a Mac user so Tower for me was not yet available. Reading the website it seems that over 80,000 customers in companies like Google, IBM and Salesforce already have chosen Tower on the Mac. And now it is finally available on Windows. I am very curious about Tower so during the next few weeks I am going to take a look at Tower by downloading the 30 day free trail full version. Nice.


For more information about Tower for Windows, the 24-part video course, the 150-page online book, an in-depth help area and a free 30 days trail visit the Tower for Windows website.

Tuesday, 15 November 2016

Using WebUI Popover in XPages - A lightWeight jQuery Popover Plugin with some Awesome New Features

For a project I was looking for a lightweight Popover plugin with some additional options as backdrop and iframe support. In my search I came across the WebUI Popover Plugin, a lightWeight Popover Plugin using jQuery that enchances the Popover plugin of bootstrap with some awesome new features. It works well with bootstrap, but bootstrap is not necessary! In this blog post I will show how this plugin can be used in an XPages application.
In order to use the WebUI Popover Plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: WebUI Popover.

Features
- Fast,lightweight
- Support more placements
- Auto caculate placement
- Close button in popover
- Multipule popovers in same page
- Different styles
- Support url and iframe
- Support async mode
- Different animations
- Support backdrop

Default options
placement:'auto' (values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left,horizontal,vertical)
container: document.body (The container in which the popover will be added i.e. The parent scrolling area. May be a jquery object, a selector string or a HTML element.)
width:'auto' (can be set with  number)
height:'auto (can be set with  number)
trigger:'click' (values:  click,hover,manual,sticky(always show after popover is created)
selector:false (jQuery selector, if a selector is provided, popover objects will be delegated to the specified.)
style:'' (Not to be confused with inline `style=""`, adds a classname to the container for styling, prefixed by `webui-popover-`. Default '' (light theme), 'inverse' for dark theme)
animation:null (pop with animation,values: pop,fade; only take effect in the browser which support css3 transition)
delay: {show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
show: null,
hide: 300
},
async: {
type:'GET' (ajax request method type, default is GET)
before: function(that, xhr) {} (executed before ajax request)
success: function(that, data) {} (executed after successful ajax request)
error: function(that, xhr, data) {} (executed after error ajax request)
},
cache:true (if cache is set to false,popover will destroy and recreate)
multi:false (allow other popovers in page at same time)
arrow:true (show arrow or not)
title:'' (the popover title, if title is set to empty string,title bar will auto hide)
content:'' (content of the popover,content can be function)
closeable:false (display close button or not)
direction:'' (direction of the popover content default is ltr ,values:'rtl';)
padding:true (content padding)
type:'html' (content type, values:'html','iframe','async')
url:'' (if type equals 'html', value should be jQuery selecor.  if type equels 'async' the plugin will load content by url.)
backdrop:false (if backdrop is set to true, popover will use backdrop on open)
dismissible:true (if popover can be dismissed by  outside click or escape key)
autoHide:false (automatic hide the popover by a specified timeout, the value must be false,or a number(1000 = 1s)
offsetTop:0 (offset the top of the popover)
offsetLeft:0 (offset the left of the popover)
onShow: function($element) {} (callback after show)
onHide: function($element) {} (callback after hide)

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 webuipopover has been added in the WebContent Folder.
Next the JavaScript and CSS files, jqueru.webui-popover.js and jquery.webui-popover.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<link rel="stylesheet" href="webuipopover/jquery.webui-popover.css" />
<script type="text/javascript" src="webuipopover/jquery.webui-popover.js"></script>

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.

The script itself can be made up as follows. In this example I use a few Options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).webuiPopover({
title:'WebUI Popover',
content:'Popover trigged by mouse hover, placement right.',
trigger:'hover',
placement:'right',
closeable:true,
backdrop:false,
multi:true,
delay: {
show: 0,
hide: 9000
}
});
}
);

AMD Loader Fix
Finally, the JavaScript files jquery.webui-popover.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 JavaScript file jquery.webui-popover.js
2. Select Open With - Client/Server JS Editor
3. Removed define.amd and replace it with false
4. Save the JavaScript file jquery.webui-popover.js

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

The final result is a responsive WebUI Popover with some additional functionality 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>
<link rel="stylesheet" href="webuipopover/jquery.webui-popover.css" />
<script type="text/javascript" src="webuipopover/jquery.webui-popover.js">
</script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).webuiPopover({
title:'WebUI Popover',
content:'Popover trigged by mouse hover, placement right.',
trigger:'hover',
placement:'right',
closeable:true,
backdrop:false,
multi:true,
delay: {
show: 0,
hide: 9000
}
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).webuiPopover({
type:'iframe',
url: "http://sandywalker.github.io/webui-popover/demo/",
title:'WebUI Popover IFrame',
placement:'bottom-right',
multi:true,
closeable:true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h5>WebUI Popover</h5>
<h5>A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary!</h5>
<br />
<div class="row">
<div class="col-sm-5">
<xp:inputText id="inputText1"></xp:inputText></div>
<div class="col-sm-2">
<xp:button value="Info" id="button1" styleClass="btn btn-info"></xp:button>
</div>
</div>
<br/>
<div class="row">
<div class="col-sm-5">
<xp:inputText id="inputText2"></xp:inputText></div>
<div class="col-sm-2">
<xp:button value="Info" id="button2" styleClass="btn btn-info"></xp:button></div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More info and examples: WebUI Popover Dev

Monday, 14 November 2016

How To Delete Documents in a View using a LotusScript Agent


This blog post I write as a reminder to myself following a number of problems I've encountered when deleting documents in a view in which I use a LotusScript Agent. In LotusScript there are different ways to delete documents in a View using a LotusScript Agent. Below two examples to delete documents in a View using LotusScript. Both scripts work but the first method has a greater risk of errors causing the Agent to fail as I experienced myself last week.

In case the script below is used the first document  in the View is removed and in the next step the handle is refreshed by getting the first document in the view again.
This script may cause problems because the view index needs to be kept up to date while processing the script. In case the index is not kept up to date by Domino the next statement will get the same document that was just removed causing the Agent to fail as I have experienced myself this week. There is also a possibility (large amount of documents) for a view index corruption causing an infinite loop because the document can not be deleted (doc).

Set view = db.GetView("VIEWNAME")
Set doc = view.GetFirstDocument
While Not doc Is Nothing
   Call doc.Remove(True)
   Set doc = view.GetFirstDocument
Wend

The current manner I use is to get a handle to the next document in the View before the first document in the View is deleted. The View index never needs to be updated in the case because the script isn't forcing the index to be refreshed (the refresh will take place on its own schedule instead of on the script's schedule). Index corruption (large amout of documents) is also limited to a minimum.

Sub Initialize

' init
Dim s As New NotesSession
Dim db As NotesDatabase
Dim dc As NotesDocumentCollection
Dim doc As NotesDocument
Dim nextdoc As NotesDocument
Dim View As NotesView
Dim agentName As String

agentName = "Delete documents from ViewName"

' Start Agent
Print "Start '" + agentName + "' ..."

' Get Database
Set db = s.CurrentDatabase

' Get View
Set view = db.GetView("VIEWNAME")
Set doc = view.GetFirstDocument
While Not doc Is Nothing
Print "Document deleted: " + doc.FIELDNAME(0)
Set nextdoc = view.GetNextDocument(doc)
Call doc.Remove(True)
Set doc = nextDoc
Wend

' Agent End
Print "End '" + agentName + "' ..."

End Sub

Another possibility is to make use of the NotesDocumentCollection class which has a 'RemoveAll' method that deletes all the documents in the collection based on a Search Formula. In case Readers or Authors fields are used the script needs to be tested because the Agent will not work in all sutuaties as I noticed during testing.

Sub Initialize

' init
Dim s As New NotesSession
Dim db As NotesDatabase
Dim dc As NotesDocumentCollection
Dim doc As NotesDocument
Dim searchFormula As String
Dim agentName As String
Dim errorMsg As String

agentName = "Delete documents"

' Start Agent
Print "Start '" + agentName + "' ..."

' Get Database
Set db = s.CurrentDatabase

' Build Query
searchFormula = {(Form = "FORMNAME") &
        (FIELDNAME = "FIELDVALUE")}

' Execute Query / Get Document Collection
Set dc = db.Search(searchFormula, Nothing, 0)

' Check if documents has been found
If dc.Count > 0 Then

' Remove documents from the database
Call dc.Removeall(True)
End If

' Agent End
Print "End '" + agentName + "' ..."

End Sub

Monday, 7 November 2016

Upcoming XPages Webinar: Marty, You're Just Not Thinking Fourth Dimensionally

On December 13th a very interesting webinar will be organized by T.L.C.C and Team Studio, Marty, You're Just Not Thinking Fourth Dimensionally by IBM Champion Paul Withers. The registration for this webinar is now available on the T.L.C.C website.


Content Webinar
When XPages code doesn't work as expected it is often because the expectation was wrong. With the various phases of the XPages lifecycle, validation, the various event handler settings, embedding Server-Side JavaScript within Client-Side JavaScript or scoped variables, understanding what's really there when your code wants it is key troubleshooting XPages.
In this webinar Paul Withers will help you think fourth dimensionally to better pre-empt the outcomes and troubleshoot when things don't work out like you expect. You'll realise whether or not the bridge over Clayton...Shonash Ravine will be there to ensure your XPages make it Back to the Future.

For more information: XPages Webinar Series with TLCC and Teamstudio.

Missed a Webinar? Look here for the recorded webinars.
Below a recording of the webinar from November 3rd, The Future of Notes and Domino from IBM.



Friday, 4 November 2016

The Future of IBM Notes - IBM Domino and XPages Presented by IBM

Yesterday a very interesting webinar was organized by T.L.C.C and Team Studio, IBM Presents the IBM Notes and Domino Roadmap. For those who missed this webinar below the content, slides and video.

Content
Barry Rosen, IBM Offering Manager, and Uffe Sorensen, IBM Social Collaboration Director, reviewed the latest updates on IBM Notes and Domino as well as IBM Verse On-premises and related Cloud solutions. They discussed the future directions and support for IBM Notes and Domino and the deliverables over the next 12 to 18 months as IBM transitions to using Feature Packs for delivering future enhancements. Plus, Martin Donnelly discussed IBM's plans for XPages enhancements.



Wednesday, 2 November 2016

IBM Notes 9 FP7 - Issue Attachments Send from Windows Explorer and Hidden Attachments Fields

After installing the IBM Notes FP7 release today I stumbled upon two issues whereby I could use some help. The first issue concerns sending selected Attachments (files) from Windows Explorer. After the installation of the IBM Notes 9 FP7 release it occurs that the selected attachment(s) sent from the Windows Explorer (Menu - Send To - Mail recipient) are added both above the header as well as in the body of the email. This behavior did not occur in the previous IBM Notes release. Has anyone also noticed this issue after installing the IBM Notes FP7 release?

1. Select Attachment from Windows Explorer (Send to - Mail recipient)


2.  Email
Attachment(s) are added both above the header and in the body of the Email.


3.  Hidden Attachment Fields
The second issue I noticed is that since the installation of the Notes Domino FP7 release hidden attachments fields in documents are displayed at the bottom of these documents.


In  the database the Attachment field (Rich Text Field) is hidden on the Notes form. Yet the Attachement (hidden Field) is shown below on the form.

This is a major problem given all the databases have the same structure and design. This behavior did not occur in the previous IBM Notes releases (Fix Packs). Anyone have an idea how this can be resolved in the Notes Fix Pack 7 Release ? Am I doing something wrong or are these indeed issues in the Notes FP7 Release. 

Monday, 31 October 2016

The IBM Plan and Future of IBM XPages Revealed

On November 3rd a very interesting webinar will be organized by T.L.C.C and Team Studio, IBM Presents the IBM Notes & Domino Roadmap, by Barry Rosen (IBM Offering Manager) and Uffe Sorensen (IBM Social Collaboration Director, EMEA) and, newly added, the IBM Plan for XPages (Martin Donnelly). The registration for this webinar is available on the T.L.C.C website.


Content
Barry and Uffe will review the latest updates on IBM Notes and Domino as well as IBM Verse On-premises and related Cloud solutions. They will discuss the future directions and support for IBM Notes and Domino and the deliverables over the next 12 to 18 months as IBM transitions to using Feature Packs for delivering future enhancements.
Martin Donnelly will discuss IBM's plans for XPages enhancements.
There will be time for questions and answers at the end of their presentation.

So one of my questions will be answered in this webinar, what will be the future of XPages! Also see my previous blog post, The Future of IBM Notes Domino and XPages Revealed ? with more information about the IBM Notes and IBM Domino Roadmap.

Read here the first blog post in response to the webinar, Modern Domino Alive and Healthy by Slobodan Lohja.
See also the Webinar Replay and Slides on my blog post The Future of IBM Notes - IBM Domino and XPages Presented by IBM.

Saturday, 29 October 2016

Available for Download: New pubnames.ntf for Domino 9.0.1 (Extends Holiday Documents and Adds Policy Updates for IMSMO and Traveler)


A new Domino Directory template (pubnames.ntf) for Domino 9.0.1 is now available. This new template extends Holiday documents through years 2026 or 2027 and adds policy updates for Traveler and IBM mail support for Microsoft Outlook (IMSMO).

The new pubnames.ntf for Domino 9.0.1 includes the following updates:
  • Holiday documents that have been extended another 10 years through 2026 or 2027 depending on the holiday.
  • Policy update for cloud Traveler servers that allows admins to remove the device password requirement for Traveler devices. Hybrid customers will be able to override the default that says you must have a device password.
  • Policy update for IMSMO cloud and on-premises servers that allows more granular control of auto-processing notices. Now you can choose whether to skip processing of meeting notices that have pending reschedules. In the cloud, this new setting is enforced/enabled regardless of the policy setting selected on-premises. 

This new template is at this moment only available in English. Full localization is being worked for Domino 9.0.1 Feature Pack 8.
The Holiday documents in this pubnames.ntf will not be applicable to cloud Hybrid environments until IBM delivers an updated mail template that provides a new option to import Holidays from any server. That updated mail template is currently planned for Domino 9.0.1 Feature Pack 8.
The updated holidays include the original start dates but extend into either year 2026 or year 2027 depending on the holiday. The holidays will not be duplicated but instead extended; therefore, users will see the past and future holiday dates.

For more information: IBM New pubnames.ntf 

Thursday, 27 October 2016

Using the Updated Bootstrap Fileinput Plugin in XPages Part II - Styling the File Download Control

In my previous blog post, Using the Updated Bootstrap Fileinput Plugin in XPages Part I - Initial Setup of the Plugin in XPages, I described the initial setup of the Bootstrap FileInput Plugin. In response to some questions about the styling of the File Download Control (Bootstrap UI) in this blog post first some examples of how this can be easily resolved.
In this blog post I describe two examples, a File Download Control styled as a Striped Table with a Hover Effect and a File Download Control where the Delete Icon is customized with a button wherein use is made of a Font Awesome icon.

Striped Tabel Hover Effect
The File Download Control consists of a table. In Bootstrap we can style a table in a simple manner by making use of CSS as well as by adding an attribute to the File Download Control itself. In the example below the attribute styleClass has been added to the File Download Control.

<xp:fileUpload id="fileUpload1"
value="#{document1.Attachments}">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs></xp:fileUpload>
<br /><br />
<xp:fileDownload rows="30"
id="fileDownload1"
displayLastModified="false"
hideWhen="true"
allowDelete="true"
value="#{document1.Attachments}"
styleClass="table table-striped table-hover">
</xp:fileDownload>

Furthermore, the XPage uses a Stylesheet, custom.css, in which the following code is included.

.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
  background-color: #550055;
  color:#eeeeee;
}

The final result is a good looking Bootstrap Styled Responsive File Download Control.


Change Delete Icon
Some time age I came across a very nice blog post by Frank van der Linden, Give the XPages File download control a bootstrap UI. In this blog post Frank described how to change the Delete Icon in the File Download Control. For more detailed information please take a look at the above mentioned blog post by Frank van der Linden. A very nice customization of the standard Delete Icon in the File Download Control. The only thing required for changing the Delete Icon in the File Download Control is to add the following script on the XPage or Custom Control.

<script>
$(document).ready(function(){
$(".table a[role='button']").addClass("btn btn-danger btn-sm");
$(".table a[role='button']").html('<icon class='fa fa-recycle' title ="Delete File"></icon>');
})
</script>

The final result is a new Bootstrap File Delete Button including a Font Awesome Icon in the File Download Control.


In the next blog posts the the additional functionalities of the Bootstrap FileInput Plugin will be discussed in more detail.

Wednesday, 26 October 2016

IBM Introduces New Watson Solutions for Professions - IBM Watson Work

In yesterday's press release, IBM announced a new category called IBM Watson Work. There are two new offerings that will be available: IBM Watson Work Services and IBM Watson Workspace. IBM Watson Workspace is currently invite-only. This is what you may heard before as Project Toscana.
Businesses today need to apply cognitive-powered productivity applications and services to digital content, conversations, and workflows to empower their employees with the ability to find, connect and work with the right experts; speed access to relevant content and insights; and provide the time and space to work simply and together.

IBM Watson Workspace learns how an individual works and interacts, and consolidates multiple work conversations from various communications channels into a single space. Using Watson, the technology highlights the most urgent action items, points to the right content needed at the time, and automates everyday tasks so employees can focus on the most vital business tasks.
IBM Watson Work Services are a set of cognitive APIs –Action Identification, Moment Identification and Summarization –developers can access through the offering’s website so they can infuse cognitive capabilities into existing work products and applications such as IBM Watson Workspace, existing third party applications and when building new applications. The technology uses natural language classifiers so it can analyze and facilitate the necessary action. For example, if someone says: "Great point –let's schedule a meeting to discuss further," the system can identify 'schedule a meeting' as an action, and help find the best time to continue the conversation.

More information: IBM Announces a New Category: IBM Watson Work and Let's talk Integrations with IBM Watson Workspace (Luis Benitez)

IBM Watson Workspace is currently invite-only. 

Monday, 24 October 2016

IBM Notes Domino XPages Community - Extended with a Comprehensive Vision


As  you may know, I am Moderator of the Google+ XPages Community (and currently also Curator of Collaboration Today and Contributor Director OpenNTF). 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 technologies such as Angular, Node, Bootstrap, React and Java in addition to what we already do at present.

At this time, the community has 539 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, Angular 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 today The XPages Google+ Community can also be found on Twitter, @XPagesCommunity.


So  follow the Google+ XPages Community on Twitter now for the latest news on IBM XPages, IBM Notes Domino, IBM XPages for Bluemix, Bootstrap, jQuery, Angular, Node, IBM and more!

Thursday, 20 October 2016

Bootstrap 4 Alpha 5 Released


As  everyone knows, I am a huge fan of Bootstrap in XPages and I follow the latest developments regarding the Bootstrap 4 Alpha releases closely. Yesterday Bootstrap 4 Alpha 5 has been released just over a month after Alpha 4 with some major feature improvements and a boat load of bug fixes. Below some major improvements from the releases note.

New CSS bundles
We’ve updated our build process to include compiled versions of all our CSS bundles. In addition to the longstanding default compiled and minified bundles, we now include compiled CSS files for our flexbox mode, grid system only, and Reboot only bundles. Each bundle includes a compiled, minified, and Sass map, just like the default compiled CSS.

Grid updates
Our grid system has been updated and is more flexible than ever. New in Alpha 5 are breakpoint specific grid gutters. That’s right, now you can customize the width of your gutters across each and every grid tier by modifying the Sass map.
The .container behaviors have changed slightly in Alpha 5. We now set the width of each container alongside a max-width: 100%; to ensure proper rendering across browsers in both our default and flexbox modes. Similarly, we fixed a bug in our flexbox grid where columns didn’t properly collapse at lower breakpoints.
Lastly, we’ve changed a few breakpoint and container dimensions. The sm tier’s container is now smaller than it’s viewport dimensions and the lg tier has changed from 940px to 960px for grid columns that more cleanly by 12.

Navbar updates
We’ve put a ton of time into the navbar for Alpha 5, but honestly it’s still not done. Rather than hold back the progress we’ve made for it until Alpha 6, we’re including a somewhat half-baked iteration.

More information: Bootstrap Alpha 5 Ship List and the Alpha 5 Announcement.
Bootstrap 4 Alpha 5 can be downloaded on the V4 Alpha Bootstrap website.

Wednesday, 19 October 2016

Using the Updated Bootstrap Fileinput Plugin in XPages Part I - Initial Setup of the Plugin in XPages

In the next blog post I'm going to pay particular attention to the updated Bootstrap File Input Plugin. The plugin is well maintained and is continuously expanded with new functionalities. In this blog post I will describe the initial setup of the plugin in XPages.
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 bootstrapfileinput 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.
Note: The theme file themes/fa/theme.js can be optionally included for the font awesome icons styling. The locale file <lang>.js can be optionally included for translating for your language if needed. The canvas-to-blob.js file is the source for the JavaScript-Canvas-to-Blob plugin by blueimp. It is required to be loaded before fileinput.js for using the image resize feature of the bootstrap-fileinput plugin. The purify.js file is the source for the DomPurify plugin by cure53. It is required to be loaded before fileinput.js to purify the HTML for HTML content preview.

<link href="bootstrapfileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="bootstrapfileinput/js/plugins/canvas-to-blob.js" type="text/javascript"></script>
<script src="bootstrapfileinput/js/plugins/purify.js" type="text/javascript"></script>
<script src="bootstrapfileinput/js/fileinput.js"></script>
<script src="bootstrapfileinput/themes/fa/theme.js"></script>
<script src="bootstrapfileinput/js/locales/nl.js"></script>

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.

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

AMD Loader Fixes
Finally, the JavaScript files fileinput.js and purify.js need 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 JavaScript file bootstrap-dialog.js
2. Select Open With - Client/Server JS Editor
3. Removed define.amd and replace it with false
4. Save the JavaScript files fileinput.js and purify.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).

The final result is a responsive Bootstrap FileUpload with additional functionality 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.data>
<xp:dominoDocument var="document1" formName="Visitors"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<link href="bootstrapfileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="bootstrapfileinput/js/plugins/canvas-to-blob.js" type="text/javascript"></script>
<script src="bootstrapfileinput/js/plugins/purify.js" type="text/javascript"></script>
<script src="bootstrapfileinput/js/fileinput.js"></script>
<script src="bootstrapfileinput/themes/gly/theme.js"></script>
<script src="bootstrapfileinput/js/locales/nl.js"></script>
<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
$(document).ready(
function() {
$('input[type=file]').fileinput({
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:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h4>Bootstrap FileInput 4</h4>
<h5>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.</h5>
<br />
<br />
<xp:fileUpload id="fileUpload1"
value="#{document1.Attachments}">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs></xp:fileUpload>
<br />
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

In the next blog posts the the additional functionalities of this plugin will be discussed in more detail.

Monday, 17 October 2016

Become an IBM Champion - My IBM Champion Nominations for IBM Social Business Part 2

As everybody knows it's IBM Champion season again. Throughout the last year I had the privilege to participate in the IBM Champions Program. For this I am very grateful. The IBM Champions Program is an amazing program!
During the past year I noticed a number of 'contributors' of which I think deserve a nomination as IBM Champion for IBM Social Business. My three nominees below have made, in my opinion, a considerable contribution to the community during the past year.
Two of these nominees are currently not IBM Champions for IBM Social Business but definitely deserve this.
For these nominations I looked objectively at the criteria of IBM 'Who should be nominated as an IBM Champion?'.


Who should be nominated as an IBM Champion?
Well, here are the detailed criteria (also described below), but maybe what would help are some examples of people who might be IBM Champions: The person in your company who knows everything there is to know about your IBM software or hardware and makes it all work together and is always the one answering everyone’s questions. The person writing articles or books about IBM technology. The person with a blog who investigates and covers IBM technology. The person who runs the local meetup or user group covering IBM technology. The person whose Twitter stream is always sharing what they’re building with IBM technology. The person making YouTube videos about developing with IBM technology. The person who has a couple of sessions every year at IBM and user group conferences and events… Those are all people who might be IBM Champions.
The IBM Champion program requires IBM advocacy and influence outside one's own organization or customer engagements.  We also seek individuals that have significant contributions in at least 2-3 areas as defined below (significant contributions = a contribution, executed multiple times or for an extended period of time).
This can be blogging regularly, tweeting regularly (on topics relevant to our industry, but not necessarily IBM-specific tweets), speaking at multiple events in a calendar year, User Group Conference Planning Committee member (involves the execution of a conference or a part of the conference over a period of several months) or be a President or Board member of a worldwide or local user group for a period of 1 year.

My second IBM Champion Nominations for IBM Social Business.


Matteo BisiCsaba KissPatrick Kwinten

With these nominations I want to thank these nominees for their significant contribution to the community during the past year.

Take also the opportunity to nominate an influencer of IBM Social Business now. Nominations for the 2017 IBM Champion program will be accepted through November 14.
Say thank you, like I did, and Nominate an IBM Champion!
And remember, you can always nominate yourself!
If you need information about someone you want to nominate then take a look at his or her LinkedIn profile. Concerning the nomination form, just fill in what you know and submit the form!
Hopefully this blog post gives some inspiration to submit a IBM Champion nomination if you have not already done so. Why, because they deserve it!
More information of becoming a IBM Champion and about the IBM Champion Program: Webcast & info session: Become an IBM Champion


Nominate an IBM Champion : IBM Champion Program

More information about the IBM Champion Program: IBM developerWorks - Champions

Friday, 14 October 2016

Using Bootstrap Dialog Plugin in XPages - Making Bootstrap Modals Easy and Draggable

Bootstrap Dialog is a jQuery plugin that simplifies the standard Bootstrap Modal. The plugin is very easy to implement in any XPages Applications. It works with CSJS and the x$ jQuery Selector for XPages Snippet. This plugin is all about making Bootstrap Modals Easy and Draggable. I use this plugin in a lot of applications instead of the standard Bootstrap Modal, Bootbox, PNotify or other Dialog plugins.
In order to use the Bootstrap Dialog plugin the JavaScript and CSS file(s) need to be included on the XPage or Custom Control. The latest version can be downloaded from GitHub: Bootstrap Dialog.

1. Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In the example below a Folder bootstrapdialog has been added in the WebContent Folder.


Next the JavaScript and CSS files, bootstrap-dialog.js and bootstrap-dialog.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="bootstrapdialog/js/bootstrap-dialog.js"></script>
<link rel="stylesheet" href="bootstrapdialog/css/bootstrap-dialog.css" />

2. 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. In this example the name of the Script Library is JQueryXSnippet.js.

<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 Button. In the example below I used some extra options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){BootstrapDialog.show({
draggable: true,
title: 'jQuery Selector for XPages',
message: 'Bootstrap Dialog!',
buttons: [{
label: 'Button 1'
}, {
label: 'Button 2',
cssClass: 'btn-primary',
action: function(){
alert('Bootstrap Dialog!');
}
}, {
icon: 'glyphicon glyphicon-ban-circle',
label: 'Button 3',
cssClass: 'btn-warning'
}, {
label: 'Close',
action: function(dialogItself){
dialogItself.close();
}
}]
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Note: For using CSJS see the example code below.

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

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


3. Removed define.amd and replace it with false


4. Save the JavaScript file bootstrap-dialog.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).

The final result is a responsive draggable Bootstrap Dialog in XPages.


4. 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="bootstrapdialog/js/bootstrap-dialog.js"></script>
<link rel="stylesheet" href="bootstrapdialog/css/bootstrap-dialog.css" />
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){BootstrapDialog.show({
draggable: true,
title: 'jQuery Selector for XPages',
message: 'Bootstrap Dialog!',
buttons: [{
label: 'Button 1'
}, {
label: 'Button 2',
cssClass: 'btn-primary',
action: function(){
alert('Bootstrap Dialog!');
}
}, {
icon: 'glyphicon glyphicon-ban-circle',
label: 'Button 3',
cssClass: 'btn-warning'
}, {
label: 'Close',
action: function(dialogItself){
dialogItself.close();
}
}]
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h3>Bootstrap Dialog</h3>
<h4>Boostrap Dialog in XPages - Making Bootstrap Modals Easy and Draggable</h4>
<br />
<xp:button styleClass="btn-primary" id="button1" value="jQuery For XPages"></xp:button>
<br /><br />
<xp:button value="Client Side JavaScript" id="button2" styleClass="btn-primary">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[BootstrapDialog.show({
 title: 'CSJS',
 message: 'Bootstrap Dialog!',
 buttons: [{
 label: 'Button 1'
 }, {
 label: 'Button 2',
 cssClass: 'btn-primary',
 action: function(){
 alert('Bootstrap Dialog!');
 }
 }, {
 icon: 'glyphicon glyphicon-ban-circle',
 label: 'Button 3',
 cssClass: 'btn-warning'
 }, {
 label: 'Close',
 action: function(dialogItself){
dialogItself.close();
}
}]
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information and documentation about all options: Bootstrap Dialog Examples

Webinar XPages and jQuery DataTables - Simplifying View Creation while Maximizing Functionality

On October 11th a very interesting webinar was organized by T.L.C.C and Team Studio, XPages and jQuery DataTables - Simplifying View creation while maximizing functionality by Michael Smith.
For those who missed this webinar below the content, slides and video.

Content Webinar
Do you find adding view data to XPages unnecessarily painful? This webinar will focus on unleashing the power of jQuery DataTables within your XPages and demonstrate how to create a scalable infrastructure that minimizes the need for additional views and design changes to XPage design elements by using REST services and a reusable custom control. We will also dig into the api of DataTables and show you how to take advantage of its rich feature set to enhance the UI of your Views and tables within your XPage applications. With XPages and DataTables, adding View data to your XPages can be simple, fast, powerful, and painless!
Click here for the live demo application.




Missed a Webinar? Look here for the recorded webinars.
Below a recording of the webinar from September 8th , Take a Trip Into the Forest - A Java Primer on Maps, Trees and Collections by IBM Champion Howard Greenberg.

Thursday, 13 October 2016

Building Highly Secure Cross Platform IBM Domino Mobile Apps (Part 1)

Yesterday I watched a very interesting Webinar, Building Highly Secure Cross Platform IBM Domino Mobile Apps (Part 1). The replay of the Webinar can be viewed on Youtube.
Many organizations today are trying to figure out the best way to address the requirements of their mobile users. Lotus Domino Applications are no exceptions, rather, pose a bigger challenge. Access to Domino intranet applications is often physically restricted. Whereas on the Internet, these restrictions do not apply and the data is at huge risk.

In this webinar titled "Building Highly Secure Cross-platform IBM Domino Mobile Apps", you will learn:
  • How to expose Notes data to your mobile users through device independent interfaces
  • How to manage and control the concerns over heavy usage
  • Common data security features and about the offline capabilities
This webinar is presented a by Linoy Kunnath George, Lead Architect & Project Manager from Maarga Systems, with over a decade of experience in Notes Domino application development.


Tuesday, 11 October 2016

Using Tokenfield for Bootstrap in XPages for Elegant Taggable Fields with Copy-Paste and Keyboard Support

Tokenfield is an advanced tagging / tokenizing plugin for jQuery and Twitter Bootstrap with a focus on keyboard and copy-paste support. Main features are copy and paste support, keyboard navigation, edit existing tokens, multiple lines of tokens and responsiveness. Tokenfield for Bootstrap is easy to implement within each XPages application.
In order to use Tokenfield for Bootstrap the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Tokenfield for Bootstrap.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In the example below a Folder bootstraptokenfield has been added in the WebContent Folder.


Next the JavaScript and CSS files, bootstrap-tokenfield.js, jquery-ui.js, bootstrap-tokenfield.css, tokenfield-typeahead.js and jquery-ui.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="bootstraptokenfield/bootstrap-tokenfield.js"></script>
<script type="text/javascript" src="bootstraptokenfield/jquery-ui.js"></script>
<link rel="stylesheet" href="bootstraptokenfield/css/bootstrap-tokenfield.css" />
<link rel="stylesheet" href="bootstraptokenfield/css/tokenfield-typeahead.css" />
<link rel="stylesheet" href="bootstraptokenfield/css/jquery-ui.css" />

Note: The jQuery-UI files are only required if jQuery-UI autocomplete is used. If JQuery-UI autocomplete is beging used there is also a need for bootstrap styling. Create a custom.css file with the following code and add the stylesheet to the XPage: CSS Github Gist. In the Code XPage is an extended example included for using autocomplete (inputText3 /scriptBlock3).

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. In this example the name of the Script Library is JQueryXSnippet.js.

<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 Edit Box. In the example below I used some extra options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).tokenfield({
tokens: ['red', 'blue', 'green']
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

The final result is a responsive Tokenfield for Bootstrap including jQuery-UI autocomplete and Bootstrap Styling.


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:styleSheet href="/custom.css"></xp:styleSheet>
</xp:this.resources>
<script type="text/javascript" src="bootstraptokenfield/bootstrap-tokenfield.js"></script>
<script type="text/javascript" src="bootstraptokenfield/jquery-ui.js"></script>
<link rel="stylesheet" href="bootstraptokenfield/css/bootstrap-tokenfield.css" />
<link rel="stylesheet" href="bootstraptokenfield/css/tokenfield-typeahead.css" />
<link rel="stylesheet" href="bootstraptokenfield/css/jquery-ui.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).tokenfield({
tokens: ['red', 'blue', 'green']
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText2}" ).tokenfield();
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText3}" ).tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
delay: 100  
},
showAutocompleteOnFocus: false
});
x$( "#{id:inputText3}").on('tokenfield:createtoken', function (event) {
var existingTokens = $(this).tokenfield('getTokens');
$.each(existingTokens, function(index, token) {
if (token.value === event.attrs.value)
event.preventDefault();
});
// Close autocomplete
x$("#{id:inputText3}").keypress(function(e){
if (!e) e = window.event;
if (e.keyCode == '13'){
x$("#{id:inputText3}").autocomplete('close');
return false;
}
});
// Prevent Duplicates
x$("#{id:inputText3}").on('tokenfield:createdtoken tokenfield:removedtoken', function (event) {
var field = $(this);
var currentTokens = field.tokenfield('getTokens');
var originalSource = field.data('bs.tokenfield').options.autocomplete.source;
var newSource = originalSource.slice(); //clone original autocomplete source
for (var i = newSource.length - 1; i >= 0; i--) {
for (var j = currentTokens.length - 1; j >= 0; j--) {
if (JSON.stringify(currentTokens[j].label) == JSON.stringify(newSource[i])
|| JSON.stringify(currentTokens[j]) == JSON.stringify(newSource[i]) ) {
//remove the token from the newSource
var index = newSource.indexOf(newSource[i]);
if (index > -1)
newSource.splice(index, 1);
};
};
};
//update source
field.data('bs.tokenfield').$input.autocomplete({source: newSource})
})
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h3>Tokenfield for Bootstrap</h3>
<h4>Advanced Tagging - Tokenizing Plugin for jQuery and Twitter Bootstrap with a focus on keyboard and copy-paste support.</h4>
<br />
<div class="col-md-7">
<xp:inputText id="inputText1">
</xp:inputText>
<br />
<xp:inputText id="inputText2">
</xp:inputText>
<br />
<xp:inputText id="inputText3">
</xp:inputText>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>