203 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Replay Webinar IBM JUMP Session: IBM Cloud Email Statistics
Fri, Nov 17th 2017 111
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 42
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 32
Update Readers and Authors Fields Using LotusScript - Adding New Values
Tue, Nov 14th 2017 19
A Brief Reprieve - IBM Champion Nomination Period Extended
Mon, Nov 13th 2017 22
Replay Webinar IBM JUMP Session: IBM Domino Applications on Cloud
Sun, Nov 12th 2017 18
My IBM Champion Nominations for IBM Collaboration Solutions - Only a Few Days Left!
Thu, Nov 9th 2017 5
Top 10
Replay Webinar IBM JUMP Session: IBM Cloud Email Statistics
Fri, Nov 17th 2017 111
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 42
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 32
IBM Domino and IBM Notes 9.0.1 FP7 available for download on IBM Fix Central
Tue, Sep 13th 2016 24
A Brief Reprieve - IBM Champion Nomination Period Extended
Mon, Nov 13th 2017 22
Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Wed, Jun 3rd 2015 20
Using Bootstrap Dual Listbox a Responsive Dual Listbox Widget in XPages
Wed, Oct 12th 2016 20
Update Readers and Authors Fields Using LotusScript - Adding New Values
Tue, Nov 14th 2017 19
Replay Webinar IBM JUMP Session: IBM Domino Applications on Cloud
Sun, Nov 12th 2017 18
Select2 maximumSelectionSize
Tue, Nov 25th 2014 15


Tokenize Combo Boxes and List Boxes in XPages Applications
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
   


Tokenize2 is a plugin which allows your users to select multiple items from a predefined list or ajax using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on Facebook or Tags on Tumblr. Tokenize2 has a lot of amazing options and events. Tokenize2 (currently v1.0) has a few easy ways to quickly get started, each one appealing to a different skill level and use case.
In order to use Tokenize2, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Tokenize2.
Below a basic example how Tokenize2 can be used in an XPages application.

Adding the JS and CSS files
The JavaScript and CSS files must be added to a WebContent Folder in the Package Explorer.
In this example the Folder tokenize2 has been added to the WebContent Folder.
Next the JavaScript and CSS files, tokenize2.min.js and tokenize2.min.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="tokenize2/tokenize2.min.js"></script>
<link rel="stylesheet" href="tokenize2/tokenize2.min.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. 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:listBox1}" ).tokenize2({
placeholder: "Select a value",
tokensMaxItems: 2,
searchMinLength: 1    
});    
})
]]></xp:this.value>
</xp:scriptBlock>

AMD Loader Fix
Finally, the JavaScript file tokenize2.min.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 specific JavaScript file
2. Select Open With - Client/Server JS Editor


3. Find and Remove define.amd and replace it with false
4. Save the JavaScript file tokenize2.min.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).

Final Result
The final result is a responsive Combo- or List Box with selected items displayed as tokens/tags including 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="tokenize2/tokenize2.min.js"></script>
<link rel="stylesheet" href="tokenize2/tokenize2.min.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).tokenize2({
placeholder: "Select a value",
tokensMaxItems: 2,
searchMinLength: 1    
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).tokenize2();    
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:listBox id="listBox1" multiple="true">
<xp:this.attrs>
<xp:attr name="multiple" value=""></xp:attr>
</xp:this.attrs>
<xp:selectItem itemLabel="Africa" itemValue="Africa"></xp:selectItem>
<xp:selectItem itemLabel="America" itemValue="Ameria"></xp:selectItem>
<xp:selectItem itemLabel="Asia" itemValue="Asia"></xp:selectItem>
<xp:selectItem itemLabel="Europe" itemValue="Europe"></xp:selectItem>
</xp:listBox>
<xp:br></xp:br>
<xp:comboBox id="comboBox1">
<xp:this.attrs>
<xp:attr name="multiple" value=""></xp:attr>
</xp:this.attrs>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");  
var res = @DbColumn("C0007C43:002CD36F", "($Names)", 0) 
var list = arr.concat(res);
return list;
}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>



---------------------
http://xpagesandmore.blogspot.com/2017/09/tokenize-combo-boxes-and-list-boxes-in.html
Sep 06, 2017
5 hits



Recent Blog Posts
111
Replay Webinar IBM JUMP Session: IBM Cloud Email Statistics
Fri, Nov 17th 2017 7:23a   Johnny Oldenburger
On November 15 there was a very interesting IBM Jump Session, IBM Cloud Email Statistics. JUMP stands for Join, Understand, Master and Participate. The presentation, audio and video are now available on the IBM Support website. Content IBM Cloud Email Statistics is a SaaS offering, providing customers with a variety of data insights on the long term use of their IBM Cloud eMail services (IBM Verse, SCN) through an intuitive graphical dashboard. In this session you will be introduced to the offe
42
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 6:05p   Johnny Oldenburger
Today IBM released IBM Traveler 9.0.1.20. IBM Traveler 9.0.1.20 is a maintenance release that provides new features and APAR fixes for the IBM Traveler server. The information below outlines the changes included. IBM Traveler 9.0.1.20 does not include a database schema update. However, if upgrading from a version prior to 9.0.1.15 and running MS SQL Server, or if upgrading from a version prior to 9.0.1.16 and running DB2 Server, action may be required if you manually manage your database schema
32
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 4:19p   Johnny Oldenburger
Today I was asked if it was possible using LotusScript to read a Text File, which was stored in a specific Folder on the system, subsequently perform a check, based on the Values in the Text File, or a Value in the Text File is present in a specific View in the NSF and finally place the found Values in a Folder in the NSF and send an email with the found Values in the Folder to a specific email address. The above can be solved easily by using LotusScript. Agent Read Text File To solve the above
19
Update Readers and Authors Fields Using LotusScript - Adding New Values
Tue, Nov 14th 2017 6:31a   Johnny Oldenburger
During the past months I have worked a lot with LotusScript. One of the questions I came accross was how to add a value to a Readers or Authors field in the UI document using LotusScript. First a little background information. In daily practice, I make extensive use of Userroles in the Access Control List which are assigned to specific User Groups in the Access Control List. Based on these Userroles document access is granted based on these Userroles in the Authors and Readers Fields in the spec
22
A Brief Reprieve - IBM Champion Nomination Period Extended
Mon, Nov 13th 2017 12:49p   Johnny Oldenburger
The period for the nominations for IBM Champion has been extended until 30 November! This is great news. The extension offers everyone the opportunity to submit their nominations for which the original deadline was too short. For me, this means that I can submit two more nominations for which I had no time left. Just great! Thanks for this opportunity. Read the blog post by Libby Ingrassia for more information. See also my previous blog post, Become an IBM Champion - My Thoughts And Consideratio
18
Replay Webinar IBM JUMP Session: IBM Domino Applications on Cloud
Sun, Nov 12th 2017 12:37p   Johnny Oldenburger
On November 8 there was a very interesting IBM Jump Session, IBM Domino Applications on Cloud. JUMP stands for Join, Understand, Master and Participate. The presentation, audio and video are now available on the IBM Support website. Content IBM Domino Applications on Cloud is a subscription service that offers IBM hosted solution for Domino Apps over IBM Bluemix Cloud. The service offers a structured and planned migration process, avoiding business disruptions. In this session you will be intro
5
My IBM Champion Nominations for IBM Collaboration Solutions - Only a Few Days Left!
Thu, Nov 9th 2017 2:57p   Johnny Oldenburger
This week is the final week to nominate, among others, an IBM Champion for IBM Collaboration Solutions (ICS). In this blog post I will not give a complete summary of my IBM Champion nominations but only of those who have made, in my opinion, a 'significant contribution' to the community during the past year. As I mentioned in my previous blog post, Become an IBM Champion - My Thoughts And Considerations, it was not as easy as the last few years. This year I looked and interpreted the terms to
8
Comparing, Replacing and Restoring Design Elements with Local History using the Text Compare Editor in Domino Designer
Thu, Nov 9th 2017 10:37a   Johnny Oldenburger
Last week something went completely wrong with some resources (design elements) in a modified design of an XPages application. Luckily Domino Designer has a very powerful feature, Local History. A standard Eclipse functionality of extremely great value. By using the Compare, Replace and Restore Resources functions with Local History using the Text Compare Editor the problems were quickly resolved. Below is a brief description of this very powerful feature in the Domino Designer. A local edit hi
7
Webinar - IBM JUMP Session: IBM Domino Applications on Cloud
Tue, Nov 7th 2017 12:57p   Johnny Oldenburger
There will be a very interesting IBM Jump Session on 8 November, IBM Domino Applications on Cloud. JUMP stands for Join, Understand, Master and Participate. Content Topic: IBM Domino Applications on Cloud Date: Wednesday, November 8, 2017 Time: 10:00 AM EST (15:00 UTC/GMT, UTC-5 hours) for 60 minutes IBM Domino Applications on Cloud is a subscription service that offers IBM hosted solution for Domino Apps over IBM Bluemix Cloud. The service offers a structured and planned migration process, av
11
Responsive and Highly Customizable Messageboxes in XPages Using the jQuery Lobibox Plugin
Tue, Nov 7th 2017 12:56p   Johnny Oldenburger
Last week I blogged about the jQuery LobiPanel Plugin, Extended Bootstrap Panels in XPages Using the jQuery LobiPanel Plugin and the jQuery Lobibox Plugin, Create Responsive and Highly Customizable Notifications in XPages Using the jQuery Lobibox Plugin. As I mentioned in these blog posts, Lobibox is devided into two parts, Messageboxes and Notifications. In this blog post I will describe the Messageboxes part. Lobibox is very easy to implement in any XPages application. Features Messageboxes L




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition