Quick responsive type-ahead function

For an XPages form I needed a workaround for a combobox with a large data-set. At first I tried the select2 jQuery plugin so I could also have a filter option as some form of type-ahead. However it turned out that my select2 list became quiet unresponsive when an entry far in the list was selected (generating the list and filtering was fine).

So my next option was to go for a type-ahead approach. First hit on Google was a NotesIn9 vid about a fancy type based upon the original post of Tim Tripcony (hello 2009).

Due to the large data-set instead of the getAllEntriesByKey method I decided to go for a getEntryByKey method and from the found view entry continue with createViewNavFrom. This turned out to be extremely responsive!

Further I noticed in the original code a hash object is used so that does not guaranteed me a correct order of my result list so I added an additional array, just for a returning a list with correct sort order.

I like especially in this approach the option to control the returned markup so think here about Bootstrap Media object lists. And of course the ease to set the value that you want to have returned in the edit box.

This is not my first blog-post on delivering search function to your application so now you have just another solution available for your toolbox.

The script is available as a gist.

Happy development =)

 

Adding @mention autocomplete like Facebook, Twitter & Google+ to your XPages app

Introduction

For an application I was asked to add a feature to add commenting on main topics. In order to stimulate discussions it should be easy to include people in the stream, similar as in Twitter. So writing an @sign should invoke a type-ahead or auto-complete to a user-list and provide suggested users to address.

In XPages you have type-ahead option, but that is only for inputText controls, not for inputTextArea controls. So how to solve this?

A search after “lightweight wrappers for adding @user mention functionality to Twitter Bootstraps Typeahead plugin” brought me to this library. The provided examples looked promising and were just what I needed, even the option to include a profile icon, similar to IBM Connections Smartcloud.

mention_sample2

Basic setup

I will guide you setting up a basic structure to add “@Mention” to your XPages app and use a REST service to provide a list of users from your directory.

Step 1 – get the resources in

Not that difficult. Just drop the files somewhere (ordered) in your WebContent folder e.g:

mention_impl1

Step 2 – Reference your resources

Next we are going to make these resources available via a Theme design element:mention_impl2

Step 3 – Add an inputTextArea control and bind it to the library

We want to have the @Mention function available to an inputTextArea control so we must not forget to add that to the XPage:

mention_impl3

When the document is ready we want to bind the @Mention library to our inputTexArea. I use the infamous XSnippet “x$ jQuery selector for XPages”. Since we will be using the Bootstrap theme in the Extension Library we have jQuery available:

mention_impl4

Step 4 – Add REST service

Wait, did we just add $.getJSON(‘REST.xsp/users’, function(result)? What does that provide us?

REST.xsp is an XPage that contains a REST service control from the Extension Library. It calls a serviceBean org.quintessens.comments.rest.Users:

mention_impl5

The serviceBean is a simple service that will go to a database and collect column values from a view. In this case I am using the also infamous fakenames NSF but that could be your ordinary Domino Directory (names.nsf)

mention_impl6

If you open your developer tools in your browser you see the service provides as data:

mention_impl7

We have to strip that down with line x$(“#{id:comment}”).mention({users:result.data}).

Since we are also using the bootstrap theme for @Mention the result looks like:

mention_impl8

Splendid! So how is your social application modernization doing?

Add 20 years of experience to your workforce

You can 20 years of experience within IBM Notes and Web development to your workforce by hiring me.

Interested? Read my curriculum vitae on LinkedIn: http://www.linkedin.com/in/patrickkwinten and get in contact.

I am happy to work WITH you !