dynamic web forms

Question

Hi,

I'm developing a web application that allows reports to be written and viewed online. These reports will have the structure of a typical school report or annual employee appraisal report. I would like the user to be able to customise the structure of their report. For example, one school might want a report in the format

Subject   Comment       Score
-----------------------------
English   He sucks      20% 
Maths     He rocks      88%
Science   About average 70%

whereas another might want

Subject   Grade
---------------
English     A
Maths       B
Science     C

What I'm looking for is a way for each school to specify the format of their reports - possibly some kind of JavaScript form-building library. Such a library could be used in a page that allows the uses to build a form which would be used as a template for their reports.

As I'll need to process each report submitted on the server-side, I'll need to capture some semantics about each field. For example, it would be great if the user could specify whether the answer to each question on the report should be plain text, a numerical score, a checkbox, radio buttons, etc

Any suggestions about useful technologies for handling such "dynamic" forms would be really appreciated. XForms looks like it might be relevant, but I haven't dug into it too deeply yet.

Cheers, Don

Answer 1

I'm in charge of XSLTForms, and it seems like a good candidate for what you want to do.

The possibilities for XSLTForms are superior to those of XForms 1.1 specification : XSLT at client-side, SVG, and others.

Dynamic forms can be developed with XForms and, in case it would not be enough for your application, XSLTForms could integrate necessary extensions.

Answer 2

Pragmatic approach would be using google spreadsheet's feature called forms, (paid) services from wufoo or JotForm.

Answer 3

I would suggest to use:

• a wiki engine or a plain-text to HTML converter such as Markdown to allow your users to customize the templates you provide
• an HTML templating library to insert the data using the defined template

For the HTML converter, you may use John Gruber's MarkDown (in perl) on the server-side, or a Javascript port by John Fraser, Showdown.

For the HTML templating, there are many Javascript libraries available, depending on your framework of choice:

• jTemplates, a plugin for jQuery
• the Template API in Prototype
• Wojo based on Dojo
• tmpl.js for MooTools
• I also designed one, bezen.template.js part of the bezen.org Javascript library

Answer 4

A very nice XForms based form builder, (LGPL) http://www.orbeon.com/

You can check out their form builder demo here: http://www.orbeon.com/ops/fr/orbeon/builder/summary/

Answer 5

Should be easy to build in Smalltalk with Seaside. You have a WATableReport with WATableColumns. Just build a simple editor where each school can define those columns. I'm not sure what javascript or XForms have to do with it. As far as I know XForms is currently dead unless you can prescribe the browser.

Answer 6

I agree with Jeff Beck's comments and also noticed the following.

You said your target audience is non-technical and all of the solutions above are going to involve learning HTML and a complex template language, possibly a non-starter for your audience.

The solutions above also seem to need more complexity than your problem requires. MooTools, Dojo, etc. seem like overkill. XForms and XSLT even more so. Yes they'll work and give you a lot of extra functionality, but do you need the level of complexity and the issues of debugging/maintainability/training that go with those extra features?

Your regular teacher or business user probably has a basic understanding of how to enter and save files in Excel. If you can teach them how to save in CSV format and upload the form, or even better yet install a macro that will save to CSV and post it to your web site, then that's likely the only training they'll need. To get the semantics you can add a bit more training and have the first row of the report be the column names and the 2nd row be the column type. It's not elegant, but it is easy for possibly tech-challenged users to adopt, as Jeff points out.

On the server side I'd recommend the following stack:

Web server => node.js (perhaps using Chain - github.com/hassox/chain)

Data store => Redis (and node-redis)

Templating => Haml-js (github.com/creationix/haml-js)

CSV parsing => See http://purbayubudi.wordpress.com/2008/11/09/csv-parser-using-javascript/ and make sure to use the fixed version that's in the comments (for quoted commas).

Your more tech savvy users can customize the HAML without you compromising security, and HAML is pretty straightforward with a little training: this HAML...

 %body
.profile
  .left.column
    #date= print_date()
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

produces...

<div class="profile">
  <div class="left column">
     <div id="date">Thursday, October 8, 2009</div>
     <div id="address">Richardson, TX</div>
  </div>
  <div class="right column">
     <div id="email">[email protected]</div>
     <div id="bio">Experienced software professional...</div>
  </div>
</div>

Answer 7

i think if the forms are not changing too frequently, you should not provide an system for the non-tech user to mess up with the reports

rather make ur system easy for YOU to add new reports, in this case, customer send you an pdf/excel showing the format they want, and you can quickly come up with a new report

that is was i did for our accounting system which being used for several clinics, we also charge a nominal fee for each report changing (to prevent user mindlessly changing the system)