Tuesday, 9 December 2014

Looking for a new job

I am currently looking for a new job, preferably in the Notes Domino XPages environment as a Developer / Notes Domino Consultant.


Extensive experience as:
- Notes Domino / XPages Developer
- Administrator Archie XRM (SQL) - CRM

Latest Courses:
- D8L55 - Introduction to IBM Lotus Domino 8.5 XPages
- N7D540 - Using Lotusscript in IBM Lotus Domino Applications
- D8520 - Building Web Applications Designer 8
- XP852 - Lotus Domino Designer 8.5.2 Basic XPage Application
- XPages and the JSF Lifecycle Courselet
- XPages How to programmatically manage the titleBarTabs Object

Specialization
Lotus Domino, LotusScript, Lotus Notes, Web Development, XPages, AJAX, HTML, XSP, JavaScript, Software Development

Currently I am moderator of the Google+ XPages Community and Curator of Collaboration Today.

For more information:
LinkedIn
Twitter

Tuesday, 2 December 2014

Select2 Auto Tokenization

In this blog post I describe the basic use of the Tokenization function which can easily be added to a Select2 field.
Select2 supports the ability to add choices automatically as the user is typing into a (search) field. This is particularly useful when the user should be able to quickly enter a number of tags by separating them with a comma or a space.
The tokenizer function can process the input typed into a (search) field after every keystroke and extract and select choices.
Tokenizer only applies to multi-selects.
The separators are defined in the tokenSeparators option, an array of strings that define token separators for the default tokenizer function. By default, this option is set to an empty array which means tokenization using the default tokenizer is disabled. It is recommended to set this option to a value similar to [',', ' '].
In the example below the built in tokenizer function is used in combination with a Multiline Edit Box (inputTextarea).

The function has to be added as an Select2 option.

<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:inputTextarea1}" ).select2({
      tags:["red", "green", "blue"],
      tokenSeparators: [",", " "]        
      });
               }
           );
  ]]></xp:this.value>
</xp:scriptBlock>

Result

Predefined Tags


Own input from the user in conjunction with entering a comma or space (tokenSeparators) to exit the input and add the tag(s) into the field.



Sample Code Custom Control

<?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"
xmlns:bx="http://www.openntf.org/xsp/bootstrap">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script
src="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.min.js"
clientSide="true">
</xp:script>
<xp:styleSheet
href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.css">
</xp:styleSheet>
<xp:styleSheet
href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2-bootstrap.css">
</xp:styleSheet>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:comboBox1}" ).select2({
      placeholder: "Select a category",
      allowClear: true,
      minimumInputLength : 2
      });
               }
           );
  ]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:listBox1}" ).select2({
      placeholder: "Select a software category",
      minimumInputLength : 2,
      maximumSelectionSize : 3      
      });
               }
           );
  ]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:inputTextarea1}" ).select2({
      tags:["red", "green", "blue"],
      tokenSeparators: [",", " "]        
      });
               }
           );
  ]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div class="page-header">
<h1>
Select2
<xp:span style="color:rgb(255,255,255)">.</xp:span>
<small>Combo Box / List Box</small>
</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1"
value="#{document1.Categories}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");    
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list; }]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<xp:listBox id="listBox1"
value="#{document1.Categories}" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:@Text("");
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - Tags Field
<xp:inputTextarea id="inputTextarea1"
value="#{document1.Tags}">
</xp:inputTextarea>
</div>
</div>
</xp:panel>
</xp:view>

IBM Verse


IBM Verse integrates email, meetings, calendars, file sharing, instant messaging and social updates through a single environment. IBM Verse improves your productivity with an experience that personalizes and unites inbox, calendar, to-do's, social networks, chats, meetings and documents.
IBM Verse delivers a cloud-based approach to managing your workday.
Designed for web and mobile, with its simple, see-only-what-you-need interface, IBM Verse helps you focus on the things that matter most. Lightening-fast search and an array of intelligent, security-rich and engaging social apps help you prioritize and open up new ways to work.


Meet IBM Verse
Meet IBM Verse, a revolutionary product that will change the way you reimagine work.


A Day With IBM Verse
What does a day in the life of IBM Verse look like? Check out this three minute video on how IBM Verse can help you reimagine work


More info : IBM Verse