Thursday, 7 March 2013

A very handsontable(.js)

At $work, everyone loves spreadsheets (well, almost everyone) and they like to use them at any and all opportunities they can.

This has meant the ability to upload and download data from the LIMs as xls(x), including downloadable template files.

However, people don't seem to like data entry (well, ok, who does - my first non-supermarket job I spent most of my first afternoon, past shift end, data entering), no matter how you construct the web form to do it.

User: Can I enter my data directly into LIMs, modifying many rows of data at a time, in a style like Excel, because I know Excel?

Developer(AKA me): Yes, you can download the data as xls, change it and batch upload the changed sheet. Expected time delay of less than 5 minutes, (generally less than 30s).

User: But I don't like the idea of a time lag between my upload and seeing the data.

Developer: So what would you like?

User: Excel table entry, but within the web application.

Developer: (silent _scream - AAAHHHHH!) I'll see what I can do, but it will take a bit of time.

User: It is quite urgent that the interface is changed.

Developer: (thinks - funny that, user needs something doing urgently) I can give you a ball park estimate of a possibility it can be done in 2 weeks, with a rough usable prototype system in a further 2 weeks. (Starts searching Google)

User: Thankyou (I do on the whole have nice users)

So, I need a Tabular style of entry, for rows of data editing, that can save, and do much as Excel does.

Well, I could do an html table (yes, this thought did originally cross my mind, I'm not proud), with each box being a field in a form. However, it is ugly and you can't do cut and paste, value dragging...

So, I looked around for alternatives using JavaScript libraries (preferably jQuery) as I really didn't want to roll my own.

Luckily, after a quick search, I found it handsontable.js which is jQuery based, and the examples on the website did very much like I wanted it to.

So, after pointing User to the website, I got a good thumbs up, and started to put together a prototype app with some real data to test it out.

The great thing about handsontable.js is that the API is very compact. You only have to provide a set of data, and a few other params (helpfully named) to get a working table up, and it provides the functions to dumpout the data to be directly sent via AJAX.

So, I was able to get the working prototype out within those first 2 weeks easily. Once I had had theat tested by User, it was quite simple to import it into the LIMs, so within the allotted time I had the feature working.

I had some interesting Bugs to then deal with. Perhaps Bugs is too strong a word. The first was that a button to remove table entry (hide) and then bring it back didn't revert unsaved changes. Luckily, handsontables loadData function saw to helping me there. Really simple. Then column sizes and scrollability/change col width. Both again very simple to implement (although there does seem to be a finite size to a column, which I unfortunately hit)

The website has all the features you need, including the css files, and has some of the best online tutorial/examples I've seen in a very long time.

So, big up thanks to Marcin Warpechowski for providing a brilliant solution. I can thoroughly recommend this as a solution for table style entry in a web interface.


smartsuite said...

Thanks for such social platform which give us variety of idea to explore ourself technically .This exposure give benefits to everyone to fit or to survive in global market which is very essential in the global era.
Time Attendance Software In Pune

Avantika Singh said...

Software Development Outsourcing OTS Solutions : ISO 9001 & Microsoft Certified Software Outsourcing & Development service provider company offering software Application development , IT outsourcing services to its clients across the globe.

Tom Desousa said...

Dear Webmaster,
I am requesting you to please delete my link which has submitted in your website. My website has got penalized by Google spam team. Because of that i am clearing my back links. I kindly request you please delete my all links. I will be very thankfully for your kindness.

1) I have submitted my Link in your website page URL:
Delete Anchor URL:

Thanks & Regards
OTS Solutions