Building Dynamic Tables on the Web that are sortable, resizeable and editable to backend data using Domino and Tablekit

I have to give it to the folks at MillStream, who have developed TableKit. TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax. In less than an hour you can easily implement a table based on data in a Lotus Notes/Domino database. TableKit has a small footprint and gives the user freedom to easily update and sort data. Here are the steps to implement a TableKit for your Domino Database:

• Step 1 - Downloading the Kit & Loading Files into your Domino Database - After downloading the kit you need to attach the files in the CSS and Javascript (JS) directory to your Domino database. There are a number of ways you can store these files in the database, I chose to store them as file resources and preserve the directory structure as shown below.
  



• Step 2 - Create Your Form Containing Necessary Elements -You can see the layout of this basic form below. Note that I store "xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" in the $$HTMLTagAttributes field and I store the DocType settings in the $$HTMLFrontMatter field, using the same doctype obtained from the TableKit demo. I have a very simple table where I specify the classes/functionality that I want included in the table (sortable, resizable and editable) and the column headings that correspond to the data I will be presenting to the user. Note that your table head/th ID should be the EXACT NAME OF THE FIELD you plan on updating if you want to make the column editable.
  
  
  The next screen cap shows the bottom of the form where we reference the JS files (computed text is to @webdbname) and the URL that should be called since we want this view to be editable. In this case we have it call an agent, which I will explain later. At this point we have everything on the form that we need except the table data.
  
  



• Step 3 - Adding the Table Data - Now we need to add the table data from the Domino Database. In this example, I chose to use a view although there are a number of ways this can be accomplished (e.g. QueryOpen agent). The view is set to be treated as pure HTML and the table is incredibly simple. You can set a class of "noedit" if you do not want a specific column to be updated by the user. If you want the table to be updated, you must assign a unique ID to the table row. Here is what I used for the first column of the view I embedded into the form:
  
  



• Step 4 - Create a LotusScript Agent to Receive the Post, Parse it and Update the Document - In step 2, we added a line specifying the agent to call when a user edits a cell. The user double clicks to edit a cell, makes the change, then clicks OK as shown below.
  
  
  Upon clicking OK, a Post Request is made to the URL/agent that we specified. The code for the agent is below. When a post (vs. a get) is made to the agent, it creates a temporary document stored in memory that you can access via session.currentdocument. The document will automatically contain a field called Request_Content which contains, in valued pairs, the content posted. For example in the scenario in the above screen cap, if the user clicks OK the following is found in the session.documentcontext Request_Content field:
  
  &row=3&cell=2&id=D17E1E80E02D9C4585257504006385D9&field=Subject&value=Platt%20Street%20Bridge%20
  
  The agent below gets a handle on the document and Request_Content field and parses it to give us the document's unique ID (IDstring) to be updated, the field that needs updating (fieldstring), and the value to place in that field (valstring). It also parses and replaces characters to handle spaces, forward slashes, and quotes. Then the agent gets a handle on the document to be updated, makes the change, and then prints the value back to the browser so the user is presented with the new value entered.
  
  

And there you have it, a quick and easy way to implement sorting and inline editing for your web based Domino applications! Many thanks to MillStream for putting together such a robust, but easy to use, solution.