Friday, 27 October 2017

Create Responsive Dual Listboxes in XPages Using the Bootstrap Dual Listbox Plugin


Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices. The dual listbox is created from a multiple select by calling .bootstrapDualListbox(settings); on a selector. The selector can be any element, not just selects. When the method is called on a selector other than a select, then all select childrens are converted into dual list boxes.

Options
When calling $("#element").bootstrapDualListbox() you can pass parameter objects with zero or more of the following options.
bootstrap2Compatible (false: set this to true if you want graphic compatibility with Bootstrap 2)
filterTextClear ('show all': the text for the "Show All" button)
filterPlaceHolder ('Filter': the placeholder for the input element for filtering elements)
moveSelectedLabel ('Move selected': the label for the "Move Selected" button)
moveAllLabel ('Move all': the label for the "Move All" button)
removeSelectedLabel ('Remove selected': the label for the "Remove Selected" button)
removeAllLabel ('Remove all': the label for the "Remove All" button)
moveOnSelect (true: determines whether to move options upon selection)
preserveSelectionOnMove (false: can be 'all' for selecting both moved elements and the already selected ones in the target list or 'moved' for selecting moved elements only)
selectedListLabel (false: can be a string specifying the name of the selected list)
nonSelectedListLabel (false: can be a string specifying the name of the non selected list)
helperSelectNamePostfix ('_helper': The added selects will have the same name as the original one, concatenated with this string and 1 for the non selected list, e.g. element_helper1 or 2 for the selected list, e.g. element_helper2).
selectorMinimalHeight (100: represents the minimal height of the generated dual listbox)
showFilterInputs (true: whether to show filter inputs)
nonSelectedFilter ('': initializes the dual listbox with a filter for the non selected elements. This is applied only if showFilterInputs is set to true)
selectedFilter ('': initializes the dual listbox with a filter for the selected elements. This is applied only if showFilterInputs is set to true)
infoText ('Showing all {0}': determines which string format to use when all options are visible. Set this to false to hide this information. Remember to insert the {0} placeholder)
infoTextFiltered ('<span class="label label-warning">Filtered</span> {0} from {1}': determines which element format to use when some element is filtered. Remember to insert the {0} and {1} placeholders)
infoTextEmpty ('Empty list': determines the string to use when there are no options in the list)
filterOnValues (false: set this to true to filter the options according to their values and not their HTML contents)

In order to use Bootstrap Dual Listbox 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 Dual Listbox.
Below a basic examples using Bootstrap Dual Listbox in an XPages application.

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


Next the JavaScript and CSS files, jquery.bootstrap-duallistbox.js and bootstrap-duallistbox.css must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script src="duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="duallistbox/bootstrap-duallistbox.css" />

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the XPage. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).bootstrapDualListbox({
nonSelectedListLabel: 'Non-selected',
selectedListLabel: 'Selected',
preserveSelectionOnMove: 'moved',
moveOnSelect: false
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive Bootstrap Dual List Box in XPages including some additional options in the initial setup.


Sample 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 src="duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="duallistbox/bootstrap-duallistbox.css" />
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).bootstrapDualListbox({
nonSelectedListLabel: 'Non-selected',
selectedListLabel: 'Selected',
preserveSelectionOnMove: 'moved',
moveOnSelect: false
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h3>Bootstrap Dual Listbox</h3>
<h4>Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.</h4>
<xp:listBox id="listBox1" multiple="true">
<xp:selectItem itemLabel="Blue" itemValue="Blue"></xp:selectItem>
<xp:selectItem itemLabel="Green" itemValue="Green"></xp:selectItem>
<xp:selectItem itemLabel="Red" itemValue="Red"></xp:selectItem>
<xp:selectItem itemLabel="Orange" itemValue="Organe"></xp:selectItem>
<xp:selectItem itemLabel="Yellow" itemValue="Yellow"></xp:selectItem>
</xp:listBox>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bootstrap Dual List Box

Create Responsive and Highly Customizable Notifications in XPages Using the jQuery Lobibox Plugin


Earlier this week I blogged about the jQuery LobiPanel Plugin, Extended Bootstrap Panels in XPages Using the jQuery LobiPanel Plugin. Another great jQuery plugin in this series is Lobibox. Lobibox is a responsive jQuery Notification plugin written from scratch. Lobibox is devided into two parts, Messageboxes and Notifications. In this blog post I will describe the Notifications part. LobiPanel has some similarities with the iziToast jQuery plugin. For more information about iziToast see my previous blog post Using iziToast an Elegant, Responsive, Flexible and Lightweight Notification Plugin in XPages. Lobibox is very easy to implement in any XPages application.

Features
- Different color support
- Possibility to show in any position of screen
- Delay
- Show delay indicator
- Show with image
- Sound support
- Size support. You can show notifications of different size

Default options for lobibox notifications
title: true, (Title of notification. Set this false to disable title)
size: 'normal', (normal, mini, large)
soundPath: 'src/sounds/', (The folder path where sounds are located)
soundExt: '.ogg', (Default extension for all sounds)
showClass: 'zoomIn', (Show animation class)
hideClass: 'zoomOut', (Hide animation class)
icon: true, (Icon of notification. Leave as is for default icon or set custom string)
msg: '', (Message of notification)
img: null, (Image source string)
closable: true, (Make notifications closable)
delay: 5000, (Hide notification after this time)
delayIndicator: true, (Show timer indicator)
closeOnClick: true, (Close notifications by clicking on them)
width: 400, (Width of notification box)
sound: true, (Sound of notification. Set this false to disable sound)
position: "bottom right", (Place to show notification)
iconSource: "bootstrap", ("bootstrap" or "fontAwesome")
rounded: false, (Whether to make notification corners rounded)
messageHeight: 60, (Notification message maximum height)
pauseDelayOnHover: true, (When you mouse over on notification, delay will be paused)
onClickUrl: null, (The url which will be opened when notification is clicked)
showAfterPrevious: false, (Set this to true if you want notification not to be shown until previous notification is closed. This is useful for notification queues)

In order to use Lobibox, the JavaScript en CSS files need to be included on the XPage / Custom Control. The latest version can be downloaded from from Github: Lobibox
Below a some examples using Lobibox in an XPages application.

Adding the JS file
The JavaScript file must be added to the WebContent Folder in the Package Explorer.
In this example a Folder lobibox has been added in the WebContent Folder.
Next the JavaScript and CSS files lobibox.js and lobibox.css must be included on the XPage or Custom Control. In this example I added the file to an XPage.
Remark: if only the Notification part is used in an XPages application the lobibox.js file can be replaced by the notifictions.js file.

<link rel="stylesheet" href="lobibox/css/lobibox.css" />
<script type="text/javascript" src="lobibox/js/lobibox.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. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button5}" ).bind("click",function(){Lobibox.notify('warning', {
size: 'mini',
rounded: false,
delay: 30000,
sound: true,
delayIndicator: true,
icon: true,
position: 'bottom left',
soundPath: 'lobibox/sounds/',
soundExt: '.ogg',       
msg: 'Notification Type Warning.'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive and highly customizable Notification including some additional options in the initial setup.


Sample Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="lobibox/css/lobibox.css" />
<script type="text/javascript" src="lobibox/js/lobibox.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){Lobibox.notify('default', {
pauseDelayOnHover: true,
continueDelayOnInactiveTab: false,
delay: 30000,
position: 'bottom left',
msg: 'LobiBox - A Responsive jQuery notification plugin .'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){Lobibox.notify('info', {
size: 'mini',
rounded: true,
sound: false,
delay: 30000,
position: 'bottom left',
delayIndicator: false,
msg: 'Notification Type Info.'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button3}" ).bind("click",function(){Lobibox.notify('success', {
size: 'mini',
rounded: false,
delay: 30000,
sound: false,
delayIndicator: true,
position: 'bottom left',
icon: true,
msg: 'Notification Type Success.'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock4">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button4}" ).bind("click",function(){Lobibox.notify('error', {
size: 'normal',
rounded: false,
delay: 30000,
sound: false,
delayIndicator: true,
icon: true,
position: 'bottom left',
img: 'images/wat9.png',
msg: 'Notification Type Error.'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock5">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button5}" ).bind("click",function(){Lobibox.notify('warning', {
size: 'mini',
rounded: false,
delay: 30000,
sound: true,
delayIndicator: true,
icon: true,
position: 'bottom left',
soundPath: 'lobibox/sounds/',
soundExt: '.ogg',       
msg: 'Notification Type Warning.'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button id="button1" value="DEFAULT" styleClass="btn-default"></xp:button>
<xp:button id="button2" value="INFO" styleClass="btn-info"></xp:button>
<xp:button id="button3" value="SUCCESS" styleClass="btn-success"></xp:button>
<xp:button id="button4" value="ERROR" styleClass="btn-danger"></xp:button>
<xp:button id="button5" value="WARNING" styleClass="btn-warning"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Documentation and examples Lobibox Notifications

Thursday, 26 October 2017

IBM JUMP Session - The Connections Catalog: Integrating 3rd Party Apps For More Business Value


There will be an interesting IBM Jump Session on 2 November, The Connections Catalog: Integrating 3rd Party Apps For More Business Value. JUMP stands for Join, Understand, Master and Participate.

Content
Topic: The Connections Catalog: Integrating 3rd Party Apps For More Business Value
Date: Thursday, November 2, 2017
Time: 11:00 AM EDT (15:00 UTC/GMT, UTC-4 hours) for 60 minutes

The new and improved Connections Cloud Catalog is the first step toward building an “app store” in the Pink world of Connections. This new Catalog, accessible from within Connections, helps customers find out about and easily integrate 3rd party apps into Connections Cloud and in the future, the private cloud. During this session, we will show you how it works, how to submit your own Apps, and how the Catalog relates to Connections extensions, including the Connections Customizer.

IBM Enterprise Social Solutions Support wants to help you take full advantage of your products. Join us for our Open Mic Webcast series as technical experts share their knowledge and answer your questions. These webcasts are designed to address specific topics and provide an in-depth and focused technical exchange in a convenient online webcast format. For more information about our Open Mic webcasts, visit the IBM Collaboration Solutions Support Open Mics page.

More information: IBM JUMP Session - The Connections Catalog: Integrating 3rd Party Apps For More Business Value.

Stay tuned for an upcoming JUMP Session regarding IBM Domino Applications on Cloud (DAC). See also my previous blog post about IBM Domino Applications on Cloud (DAC).


More information: IBM Domino Applications on Cloud

IBM Announces Investment in Notes Domino Version 10 and Beyond - Domino 2025 Announced


Yesterday IBM presented some great news about the future of IBM Notes, IBM Domino, IBM Verse and IBM Sametime. IBM signs strategic partnership with HCL Technologies to increase commitment and deliver major release in 2018. IBM is investing in its long-term roadmap of the Domino product family - Domino, Notes, Sametime and Verse - in 2018 and beyond. You can join the Domino 2025 Jam to give feedback and suggestions that will shape the future of the Domino portfolio.
So once again there is a great future for IBM Notes Domino!

From the announcement:
To continue innovation in the collaboration space, IBM is investing in its long-term roadmap of the Domino product family – Domino, Notes, Sametime and Verse – in 2018 and beyond. To show IBM’s level of commitment to stakeholders, the company is entering into a strategic partnership with HCL Technologies to begin delivering on the roadmap with the intent to release version 10 of the Domino portfolio next year. The goal of the partnership is to drive future development of the Domino product family, energize the offering, and protect clients’ investments.

As a component of the partnership, IBM and HCL are unveiling the Domino 2025 Jam to gather feedback and suggestions that will shape the future of this portfolio. Activities such as interactive face-to-face workshops in select cities worldwide, virtual events that drive broad participation, and user group events and “pop-up” meetings on-demand will be part of the Domino 2025 program. These community engagements are intended to help increase client and lab advocacy and serve as a way for groups to provide feedback on feature updates and the future direction of the Domino product family.

More information: IBM Announces Investment in Notes Domino Version 10 and Beyond and Domino 2025 Announced

Wednesday, 25 October 2017

Extended Bootstrap Panels in XPages Using the jQuery LobiPanel Plugin

In my continuous search for modern plugins for my XPages applications I came across LobiPanel. LobiPanel is a jQuery plugin for Bootstrap panels. The plugin extends Bootstrap panels with several common and useful functions. LobiPanel depends on jQuery, jQuery ui and Bootstrap. LobiPanel initialization is simple, just create correct markup of a Bootstrap panel and call the plugin.

Features:
- Sort, drag, expand, resize, minimize bootstrap panels
- Specify url and load content in panel from this url
- Change the name of the panel
- Customize action icons and action tooltips
- Works for nested panels
- HTML5 localStorage support:
- Save panel state: (pinned, unpinned, collapsed, fullscreen, minimized) and apply it on page load
- Save panel position among siblings and apply on next time

The plugin creates some additional buttons on the right side of the Bootstrap panel heading which can perform several actions.

Below a short explanation of these extra buttons form right to left.
The first button removes the panel from document. This operation can not be undone!
The second button expands the panel on full screen.
The third button loads content in .panel-body from specified URL.
The fourth button takes out the panel from its position in DOM hierarchy and makes it floating. Anytime with the same button you can put the panel in its position.
The fifth button  has two functions. It collapses and expands the panel. It  also minimizes the panel at the bottom of the page when panel is taken out from DOM hierarchy.
On small screen panel controls are hidden and dropdown toggle  button is shown.


In order to use LobiPanel, the JavaScript en CSS files need to be included on the XPage / Custom Control. The latest version can be downloaded from from Github: LobiPanel
Below a basic example using LobiPanel in an XPages application.

Adding the JS file
The JavaScript file must be added to the WebContent Folder in the Package Explorer.
In this example a Folder lobipanel has been added in the WebContent Folder.
Next the JavaScript and CSS files lobipanel.js and lobipanel.css must be included on the XPage or Custom Control. In this example I added the file to an XPage. Also I included the jQueru-UI files because these are required for using the LobiPanel plugin.

<link rel="stylesheet" href="lobipanel/css/lobipanel.css" />
<link rel="stylesheet" href="jquery-ui/jquery-ui.css" />
<script type="text/javascript" src="lobipanel/js/lobipanel.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.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. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows when not using data attributes. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:panel2}" ).lobiPanel({        
reload: false,
close: false,
editTitle: false
}); 
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is an extended responsive Bootstrap Panel with several common and useful functions including some additional options in the initial setup.


Sample Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="lobipanel/css/lobipanel.css" />
<link rel="stylesheet" href="jquery-ui/jquery-ui.css" />
<script type="text/javascript" src="lobipanel/js/lobipanel.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:panel}" ).lobiPanel();
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:panel2}" ).lobiPanel({     
reload: false,
close: false,
editTitle: false
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="panel panel-default" id="panel">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title</h4>
</div>
</div>
<div class="panel-body">
jQuery Plugin LobiPanel. It extends panels with several common and useful functions.
</div>
</div>
<xp:br></xp:br>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title</h4>
</div>
</div>
<div class="panel-body">
jQuery Plugin LobiPanel. LobiPanel depends on jQuery, jQuery ui and Bootstrap.
</div>
</div>
<xp:br></xp:br>
<div class="panel panel-info lobipanel">
<div class="panel-heading">
<div class="panel-title">
<h4>LobiPanel title</h4>
</div>
</div>
<div class="panel-body">
<div class="panel panel-warning lobipanel">
<div class="panel-heading">
<div class="panel-title">
<h4>Nested LobiPanel Title</h4>
</div>
</div>
<div class="panel-body">
Panel 1
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default lobipanel" data-sortable="true">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel Title</h4>
</div>
</div>
<div class="panel-body">
Panel 2
</div>
</div>
<div class="panel panel-default lobipanel" data-sortable="true">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel Title</h4>
</div>
</div>
<div class="panel-body">
Panel 3
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default lobipanel" data-sortable="true">
<div class="panel-heading">
<div class="panel-title"
<h4>Panel Title</h4>
</div>
</div>
<div class="panel-body">
Panel 4
</div>
</div>
<div class="panel panel-default lobipanel" data-sortable="true">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title</h4>
</div>
</div>
<div class="panel-body">
Panel 5
</div>
</div>
</div>
</div>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: LobiPanel documentation

Thursday, 19 October 2017

Create a Responsive Bootstrap Carousel Touch Slider with Text Animation in XPages


In my continuous search for modern plugins for my XPages applications I came across the Bootstrap Carousel Touch Slider with Text Animation plugin. The plugin is adding touch behavior to Bootstrap's Carousel and adds beautiful animations in text slides. It is possible to use all text animations from animate.css. The only thing needed is to include the library on an XPages or Custom Control and create the carousel components as described in the official Bootstrap documentation. The JavaScript and CSS file can be downloaded from Bootstrap Themes website.
Below an example how the Bootstrap Carousel Touch Slider with Text Animation plugin can be used in an XPages application.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder bootstrapcarouseltouchslider has been added in the WebContent Folder.
Next the JavaScript and CSS files, bootstrap-touch-slider.js and bootstrap-touch-slider.css must be included on the XPage or Custom Control. In this example I add the files to an XPage. I also added a link to the animate.css file and the touchSwipe library.

<link rel="stylesheet" href="bootstrapcarouseltouchslider/bootstrap-touch-slider.css" />
<script type="text/javascript" src="bootstrapcarouseltouchslider/bootstrap-touch-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.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. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows.

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

Animations
For each item I added a slide text layer with the text and button animations in the Bootstrap Carousel. See for more information under Code XPage in this blog post.

<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>

Final result
The final result is a responsive Bootstrap Carousel Slider including touch enabled dragging slides with beautiful text animations.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="bootstrapcarouseltouchslider/bootstrap-touch-slider.css" />
<script type="text/javascript" src="bootstrapcarouseltouchslider/bootstrap-touch-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js">
</script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:carousel}" ).bsTouchSlider();
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div id="carousel" class="carousel bs-slider fade slide_style_left control-round indicators-line" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="bootstrapcarouseltouchslider/images/birds1.jpg" alt="image1"></img>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="bootstrapcarouseltouchslider/images/birds2.jpg" alt="image2"></img>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_right">
<h1 data-animation="animated zoomInLeft">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="bootstrapcarouseltouchslider/images/birds3.jpg" alt="image3"></img>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_center">
<h1 data-animation="animated zoomInLeft">Bootstrap Carousel</h1>
<p data-animation="animated fadeInCenter">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bootstrap Carousel Touch Slider with Text Animation

Wednesday, 18 October 2017

Using infoBox a Tooltip Style jQuery Plugin in XPages


In my continuous search for modern plugins for my XPages applications I came across infoBox. infoBox is a tooltip style jQuery plugin to create information signs/icons on your XPage which will show information boxes on mouseover. The created information boxes will resemble the conversation/message boxes. These boxes will be aligned perfectly without moving out of the page unless a larger width for the box is specified.

Options
width: specify a width for the information Box. The default width will be 200, but the width will be adjusted for 1 or 2 word content
position: specify whether you want to see the information box over the information sign or below. The default position will be below.
bg_color: specify a background color for the information box.
text_color: specify the text color for the text in the information box.

In order to use infoBox, the JavaScript file needs to be included on the XPage / Custom Control. The latest version can be downloaded from from the website AJARUNTHOMAS.COM
Below a basic example using infoBox in an XPages application.

Adding the JS file
The JavaScript file must be added to the WebContent Folder in the Package Explorer.
In this example a Folder infobox has been added in the WebContent Folder.
Next the JavaScript infobox.js must be included on the XPage or Custom Control. In this example I added the file to an XPage.

<script type="text/javascript" src="infobox/infobox.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. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows when not using data attributes. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:helptext}" ).infoBox({
"width":300,    //width of information box pop-up
"position":"above", //position whether above or below the information sign
"text_color":"white",   //color of the text
"bg_color":"grey"   //background color
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is perfectly aligned and customizable info box on mouseover a with some additional options in the initial setup.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="infobox/infobox.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:information}" ).infoBox();
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:helptext}" ).infoBox({
"width":300,    //width of information box pop-up
"position":"above", //position whether above or below the information sign
"text_color":"white",   //color of the text
"bg_color":"grey"   //background color
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<p>
For more information check the infobox icon.
<a id="information">
The information displayed when checking the info icon.
</a>
</p>
<xp:br></xp:br>
<p>
More information: check the infobox icon.
<a id="helptext">
Useful information for the user(s) with some additional options.
</a>
</p>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: infoBox

Using Bringins in XPages for Animated Info Pages


In my continuous search for modern plugins for my XPages applications I came across Bringins. Bringins is a jQuery plugin to show contents on a webpage as an animated page. These page will be positioned 'fixed' with scrollable data. You can have your custom CSS content to appear in the bringins pages. This plugin allows you to choose from three intoduction animations for the page whether to animate the page on the left, right or center of the webpage. The plugin also provides options to specify the color of the page, width, z-index, margin and color of the close button for the page.

Features
Specify an intoduction animation for the bringins pages
Specify the width of the bringins page
Choose background color for the bringins page
Define margin for the content in the page
Choose a color for the close button of the page
Choose the z-index for the page, so that you can define whether a particular bringins page should always appear above an other bringins page or other elements on that webpage
Define your custom style for the contents which will be included in the plugin element

In order to use Bringins, the JavaScript file needs to be included on the XPage / Custom Control. The latest version can be downloaded from from the website AJARUNTHOMAS.COM
Below a basic example using Bringins in an XPages application.

Adding the JS file
The JavaScript file must be added to the WebContent Folder in the Package Explorer.
In this example a Folder bringins has been added in the WebContent Folder.
Next the JavaScript bringins.js must be included on the XPage or Custom Control. In this example I added the file to an XPage.

<script type="text/javascript" src="bringins/bringins.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. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows when not using data attributes. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){
$('#page1').bringins({
"position":"right",    //animation of the bringins page
"color":"#F05F40",    //background color of the page
"closeButton":"black",  //color of the close button
"width":"50%", //width of the bringins page
"margin":100,   //margin of the content inside the page
"zIndex":999    //z-index of the page
});
});   
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive and customizable webpage as an animated (info)page with some additional options in the initial setup.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bringins/bringins.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){
$('#page1').bringins({
"position":"right",    //animation of the bringins page
"color":"#F05F40",    //background color of the page
"closeButton":"black",  //color of the close button
"width":"50%", //width of the bringins page
"margin":100,   //margin of the content inside the page
"zIndex":999    //z-index of the page
});
});   
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button value="More information" id="button1"></xp:button>
<div id="page1" class="bringins-content">
<h2>jQuery</h2>
<h4>jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.
<br></br><br></br>
jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.</h4>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bringins 

Saturday, 14 October 2017

IBM Notes 9.0.1 Feature Pack 9 Interim Fix 1 Available for download on IBM Fix Central


On October 10th IBM released IBM Notes Feature Pack 9 Interim Fix 1 on IBM Fix Central. Below an overview of the Fixes in this release.


Download link: IBM Notes Client 9.0.1 FP9 Interim Fix 1


More information: IBM Fix Central
See also my blog post IBM Domino 9.0.1 Feature Pack 9 Interim Fix 2 Available on IBM Fix Central.

Friday, 13 October 2017

Create Animated Progress Circles in XPage using Circliful


For a new XPages application one of the requirements was to present some specific project data in progress circles. In my search I came across Circliful. Circliful is a very easy to use jquery plugin for creating beautiful, responsive and highly customizable animated progress circles. Circliful show data as circle statistics, no images used and is based on SVG and jquery including many options which can be set. For the most simple use you only have to add an element on your XPage with a unique id and an container around it that controls the size of thr circle statistic. It is possibel to set all options as data attributes.
In order to use Circliful, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Circliful.
Below some basic examples using Circliful in an XPages application.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder circliful has been added in the WebContent Folder.
Next the JavaScript and CSS files, circliful2.js and circlifull.css must be included on the XPage or Custom Control. In this example I added the files to an XPage.

<script type="text/javascript" src="circliful/js/jquery.circliful.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows when not using data attributes. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:circle1}" ).circliful({
animationStep: 5,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
percent: 75,
halfCircle: 1,
decimals : 0,
foregroundColor : '#30B455'
});
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a beautiful, responsive and highly customizable animated progress circles with some additional options in the initial setup.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="circliful/css/jquery.circliful.css" />
<script type="text/javascript" src="circliful/js/jquery.circliful.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:circle1}" ).circliful({
animationStep: 5,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
percent: 75,
halfCircle: 1,
decimals : 0,
foregroundColor : '#30B455'
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:circle2}" ).circliful({
animationStep: 2,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
percent: 75,
decimals: 0,
fillColor: '#cce6ff'
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:progress}" ).circliful();
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock4">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:progress2}" ).circliful();
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="row">
<div class="col-lg-2">
<div id="circle2"></div>
</div>
<div class="col-lg-2">
<div id="progress" data-dimension="200" data-fontsize="36" data-percent="65" data-foregroundcolor="#30B455" data-bgcolor="#eee" data-width="15" data-bordersize="15" data-animationstep="2"></div>
</div>   
</div>
<br></br>
<div class="row">
<div class="col-lg-2">
<div id="circle1"></div>
</div>   
<div class="col-lg-2">
<div id="progress2" data-dimension="200" data-fontsize="36" data-halfcircle="1" data-percent="35" data-fillcolor="#cce6ff" data-bgcolor="#eee" data-width="15" data-bordersize="15" data-animationstep="2"></div>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information and examples: Circliful

IBM Domino 9.0.1 Feature Pack 9 Interim Fix 2 Available on IBM Fix Central


Yesterday IBM released IBM Domino Feature Pack 9 Interim Fix 2 on IBM Fix Central. Below an overview of the Fixes in this release.


Download link: IBM Domino 9.0.1 FP9 Interim Fix 2

For more information: IBM Fix Central

IBM JUMP Session - The Connections Catalog: Integrating 3rd Party Apps For More Business Value


There will be an interesting IBM Jump Session on 2 November, The Connections Catalog: Integrating 3rd Party Apps For More Business Value. JUMP stands for Join, Understand, Master and Participate.

Content
Topic: The Connections Catalog: Integrating 3rd Party Apps For More Business Value
Date: Thursday, November 2, 2017
Time: 11:00 AM EDT (15:00 UTC/GMT, UTC-4 hours) for 60 minutes

The new and improved Connections Cloud Catalog is the first step toward building an “app store” in the Pink world of Connections. This new Catalog, accessible from within Connections, helps customers find out about and easily integrate 3rd party apps into Connections Cloud and in the future, the private cloud. During this session, we will show you how it works, how to submit your own Apps, and how the Catalog relates to Connections extensions, including the Connections Customizer.

IBM Enterprise Social Solutions Support wants to help you take full advantage of your products. Join us for our Open Mic Webcast series as technical experts share their knowledge and answer your questions. These webcasts are designed to address specific topics and provide an in-depth and focused technical exchange in a convenient online webcast format. For more information about our Open Mic webcasts, visit the IBM Collaboration Solutions Support Open Mics page.

More information: IBM JUMP Session - The Connections Catalog: Integrating 3rd Party Apps For More Business Value.

Thursday, 12 October 2017

Using Smoke Form Validation And Components for Bootstrap in XPages Part 3 - Easy, Simple and Safer Form Validation


In my prevoius blog posts about Smoke, Using Smoke Form Validation And Components for Bootstrap in XPages Part 1 - Alerts and Using Smoke Form Validation And Components for Bootstrap in XPages Part 2 - Confirmation, I described how you can use the Smoke Components Alert and Conformation in an XPages application. In this blog post the first part of how you can use the Smoke Form Validation in an XPages application.

In this blog post the validation of Empty-, Alphanumeric- and Number Fields are described. To validate a form the function smkValidate() is used. The field types supported so far are text, textarea, email, password, select, radio, checkbox, number, color, date, datetime, time, month, week, tel, url, search and range. It is necessary that the input (field) to validate has the form-control class and it is inside a div with the form-group class. If the input has a disabled attribute, it will be not validated. To validate a field that is mandatory, you only have to add the required attribute. To validate a field that accepts only numbers and letters, the field must be of type text, add the data-smk-type attribute and within this the alphanumeric property. To validate that a field only accepts numbers, the field must be of type text or type number, if it is of type text add the data-smk-type attribute and within this, the number attribute.
For more information about adding the JS and CSS files and adding the x$ jQuery selector for XPages see my prevoius blog posts about the Smoke plugin in XPages.

For using Smoke Validation the x$ jQuery selector for XPages script can be made up as follows. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){if ($('#smokevalidation').smkValidate()) {
// Code here
$.smkAlert({
text: 'Validate!',
type: 'success'
});
}
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is an easy, simple, and customizable form validation in combination with the Smoke Alert Component.


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="Smoke"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="smoke/js/smoke.js"></script>
<link rel="stylesheet" href="smoke/css/smoke.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){if ($('#smokevalidation').smkValidate()) {
// Code here
$.smkAlert({
text: 'Validate!',
type: 'success'
});
}
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="form-horizontal" id="smokevalidation" data-smk-icon="glyphicon-remove-sign">
<legend>Smoke Form Validation</legend>
<div class="form-group">
<xp:label value="Text area" id="label2" for="inputTextarea1" styleClass="control-label col-sm-2">
</xp:label>
<div class="col-sm-10">
<xp:inputTextarea id="inputTextarea1">
<xp:this.attrs>
<xp:attr name="required" value="required"></xp:attr>
<xp:attr name="class" value="form-control"></xp:attr>
</xp:this.attrs>
</xp:inputTextarea>
</div>
</div>
<div class="form-group">
<xp:label value="Alphanumeric" id="label1" for="inputText1" styleClass="control-label col-sm-2">
</xp:label>
<div class="col-sm-10">
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="required" value="required"></xp:attr>
<xp:attr name="class" value="form-control"></xp:attr>
<xp:attr name="data-smk-type" value="alphanumeric"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
</div>
<div class="form-group">
<xp:label value="Number" id="label3" for="inputText2" styleClass="control-label col-sm-2">
</xp:label>
<div class="col-sm-10">
<xp:inputText id="inputText2">
<xp:this.attrs>
<xp:attr name="required"value="required"></xp: attr>
<xp:attr name="class" value="form-control"></xp:attr>
<xp:attr name="data-smk-type" value="number"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
</div>
</div>
<xp:button id="button1" value="Validate"></xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Smoke Form Validation

Tuesday, 10 October 2017

It's IBM Champion Season! Nominations are open!

The IBM Champion program recognizes innovative thought leaders in the technical community and rewards these contributors by amplifying their voice and increasing their sphere of influence. An IBM Champion is an IT professional, business leader, developer, or educator who influences and mentors others to help them make best use of IBM software, solutions and services.


The IBM Champion program recognizes innovative thought leaders in the technical community. An IBM Champion is an IT professional, business leader, or educator who influences and mentors others to help them make the best use of IBM software, solutions, and services, shares knowledge and expertise, and helps nurture and grow the community. The program recognizes participants' contributions over the past year in a variety of ways, including conference discounts, VIP access, and logo merchandise, exclusive communities and feedback opportunities, and recognition and promotion via IBM's social channels.
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. Educators can also become IBM Champions; for example, academic faculty may become IBM Champions by including IBM products and technologies in course curricula and encouraging students to build skills and expertise in these areas.
Take the opportunity to nominate an influencer of IBM Social Business now.

The nomination period for IBM Champions will run from 9 October to 13 November this year.
Now that nominations are open, it's time to gather your information so you can (re-)nominate yourself or nominate a community member you think should join the Champion ranks.

IBM Champion Selection Criteria
So how are you going to pick who to nominate? The selection criteria haven't changed. We still want IBM Champions who:
Demonstrate both expertise in and extraordinary support and advocacy for IBM technology, communities, and solutions.
Share advocacy and influence both within and outside their organizations or customer engagements.
Influence and mentor to help others make the most of investments in IBM software, solutions and services.
You want to nominate (or renominate) those who have offered significant contributions over the past 12 months. Consider what you (or they) have done that is regular, significant, impactful. Contributions should be above and beyond a nominee's job duties, but may be internal or external. The list below is just a few examples.
  • Regularly blogging or creating other technical content
  • 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 Committee member (involves the planning and execution of one or more conferences, events, or meetups)
  • President, Leader, or Board member of a worldwide or local user group
  • Providing regular customer reference engagements
  • Regularly being an advocate for IBM products inside your organization, making connections, and educating users
Nominate an IBM Champion : IBM Champion Program

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