Implementing TagDragon in a Domino Application

logo

TagDragon is Ferdy Christant’s excellent JQuery plugin to provide type ahead functionality.  The plugin is not free but requires a small donation but is worth it for a stable robust plugin.

My requirements were to autocomplete on the entries in a view column for performance reasons.

  • The bits you need are:
  • Plugin from Ferdy
  • JQuery Library
  • A Holding form in Notes – not used for anything but redirecting
  • A $$ViewTemplate for ‘holding’ the JSON formatted view.
  • A JSON formatted view.

The main thing I had to do to get the plugin to work with Domino is deal with the HTTP Post requirement.  Ferdy’s plugin expects to perform a HTTP Post when a letter has been entered so you can’t just call a Domino view URL directly, you could call an agent and deal with the response there but for performance reasons you might want to get the JSON formatted data back from a view.

Redirection form

The redirection form has a tag and max field on it – these fields are passed via the HTTP Post from the plugin and a SaveOptions = "0" to prevent the document actually being saved.

In addition I used a $$Return field to compute a URL to open a view which has been formatted with JSON formatted data e.g.

"[/"+@WebDbName+"/(JSONData)?openview&StartKey="+tag+"&count="+max+"]"

Depending on your requirements you could add a $PublicAccess field and enable the write public access form property if you wanted this functionality for Anonymous users.

View Template

formprop The $$ViewTemplate needs to be form with a content type of application/json.

The actual contents of the form looks like the following:
viewbody

We need the additional JSON on the end of the view because we will be appending a comma to the end of each document in the view and if you leave a comma at the end of JSON data it will throw an error.  Don’t worry about the additional item as the view count is already defined by the component and then passed through via the $$Return to the openview URL command and therefore the additional element will be ignored.

The JSON formatted view is simply a 2 column view – the first column is sorted by what ever your main field is and is marked as hidden, this just keeps the view sorted correctly.  The second column contains your JSON Data and looks like this:

"{\"tag\":\""+@URLEncode("Domino";FieldToSearchOn)+"\",\"id\":\""+@Tex(@DocumentUniqueID)+"\"}"+","

Notice we add an id which is the UNID as well as append a comma.  I decided to URLEncode the field as well which can bloat the data a bit but is probably the safest option if your not sure what data the field is going to contain.

Thats it for the Notes side.

To implement the web side I used the folowing HTML (the same as Ferdy’s demo code):

<div id="tagbox" class="tagbox"> <br></br><input type="text" value="" id="tags" /> <br></br></div>

This was the JavaScript I used in conjunction with the plugin;

$(document).ready(function() { <br></br>    $('#tagbox').tagdragon({'field':'tags','url':'typeahead?createdocument', <br></br>    'onSelectedItem':function(val){openDocument(val)}, <br></br>    'onRenderItem': function(val,index,total,filter) { return unescape(val.tag)} <br></br>    }); <br></br>}); <br></br>function openDocument(val){ <br></br>window.location = '/webwork/tourtariff.nsf/0/'+val.id; <br></br>}

The URL posts to my redirection form by using the ?CreateDocument Domino URL – NB I was hosting this control within a domino form within the same database so you might need to tweak the URL.

  • In addition I use 2 of Ferdys callbacks:
    onSelectedItem = calls my openDocument function which is passed the currently selected item and as we added an id which holds the UNID in the JSON data it makes it easy to get a handle on the underlying document.
  • onRenderItem = I use this callback to unescape the tag which was URL encoded in the view.