help me design a web-based checklist tool - form editor?

Question

I want a jQuery driven editor that can create the form HTML on the fly, and then generically save it all into a database field. I can handle all the jQuery, but I'm just looking for a structural DB design on how to make a quick, simple, generic form editor. Is saving all the HTML of the form a good idea?

Background information:

We need a checklist tool and I am building a simple elegant one for our office. The idea is I want a quick tool for us to keep track of our work and follow a process, but not a bloated TPS report type system

Here's the requirement: an editor that lets you create a new checklist. A checklist is just a collection of divs "entries" with a single checkbox, and a bit of text to ask if you've completed this item. The editor will allow you to create a new entry and modify the space at the bottom to add additional fields, for now I am thinking a textarea. The tool will save your checklist template then you can go fill out completed lists.

So for example, i create a "go-live" checklist and then when I make a site live, fill out an instance of my "go-live" check-list for reference later. There will be 2 kinds of these instantiated lists, "open" and "closed"

A tricky part is now I want to go back and modify my go-live list without breaking my ability to view old closed ones. So I am thinking that if the list has changed, I version my go-live templates to keep track of it. Also the editor will allow you to re-order checkbox items, I'm liking the idea of auto-numbering them.

This background is all unnecessary as here is how I want it to work. I want a jQuery driven editor that can create the form HTML on the fly, and then generically save it all into a database field. I want to avoid hard-coding. So when I fill out a list, I grab the HTML from the DB for that list and bam! have the shell of it, and then I need to save the completed list with filled inputs. I want this process as generic as possible so I can extent the editor to allow more than text areas for each item, maybe add radio buttons, or dropdowns. I was also toying with the idea of allowing lists to have sub-lists (indented under one entry) with a recursive design.

Answer 1

Maybe save the data in a simple XML format? Save the XML into a text field in the database. You can add new XML tags as you add fields.

You could have unique entries for every version, or just keep pre-pending the XML files to the field. for the current status, just display the first XML doc in the field. If you want to review the history, you just step through the XML files. You could possibly even display all the first XML doc, and display the meta-info on the remaining ones - date, who, etc. in a list so you can see a summary at a glance.

Not horribly efficient, but are you planning on having thousands of these records?

Answer 2

I save all forms fields and information and XML as creuzerm said...

<?xml version="1.0" ?>
<Form version="1.0">
    <config name="KUF78ROY">
     <db>PARCELS</db>
     <update>UPDATE FORMS SET NOMBRE=@NOMBRE WHERE OBJECTID = @id</update>
     <select>SELECT OBJECTID, NOMBRE FROM FORMS WHERE OBJECTID = @id</select>
     <insert>INSERT INTO FORMS (NOMBRE) VALUES (@NOMBRE)</insert>
     <id>OBJECTID</id>
    </config>
    <item name="NOMBRE">
     <type>TEXT</type>
     <memo></memo>
     <length>4</length>
     <min></min>
     <values></values>
     <default></default>
     <write>1</write>
     <visible>1</visible>
     <caption>CONSECUTIVO</caption>
     <error></error>
    </item>
</Form>

Answer 3

I'm not entirely clear on what you need, but this may help:

http://github.com/botskonet/jquery.formbuilder/tree/master

I developed this originally for a cms - the form, once built, is saved to a database and then is read and an actual form is generated by php. I can provide some sample php code for saving/reading that data.

Answer 4

I'd just store the HTML in the database in a large string field - hopefully your client side code will generate XHTML so if you want to do anything with it before you send it to the browser you can manipulate it like XML otherwise it's all ready to be added to your output.

as an added bonus if your using c# then fizzler lets you use css selectors to manipulate your html.

Explaination of fizzler