Single HTML file form designer and reader

Meetings Form in design mode ( took me 35 seconds from an empty page)

I haven't blogged much lately as I have been spending alot of my spare time working on a my latest idea. It is evolving slowly. Basically what I am attempting to create is a single html file that contains all of the code required to build and publish html forms via an easier to use UI , but without the need for a server. The idea is this.

You want some one to fill in a form, and you want to know that the form is going to be filled in properly. But you don't want to have to build a whole web site to do it or have people connect to some external site to fill in the form or pay some external site to host it. Usually you would put the form in Ms_Word or something like that but this doesn't easily allow for validating data and allows users to fiddle with the form design.

With the solution I am designing you open up a html file in your browser. You then select elements from a toolbar and place them on the form and can drag them around the form to place them where you want them. You then set the properties of them and one you are satisfied with the form you publish it. This creates a second copy of your form that you can send to others. ( When I say second copy I mean another file on your hard-disk not a post to a server ) . The second copy will be set to "run-time" mode, so when someone opens this file you will see a webform that validates according to the rules set at design time, and of course when the user saves it , it saves to their hard disk not to a web server. So they can then attach it to a mail message and send it back to you (as they would a word document).

I don't think I have explained this very well. But maybe some pictures will help. I currently almost finished the "design-time" components and I am at a stage where I can add form elements from the toolbox, set their properties, and have all the elements serialise and deserialise themselves ( this basically means that when I press "save" the file saves, and when I re-open the file all the elements properties are re-loaded correctly).

I have now have to work on what the user will see after the form has been published, but that is relatively easy, so I should have something ready for use within a week or 2. So watch http://yourformbuilder.com/ for some action.

Click on a element to set the properties (The select one is a time range form element)

The toolbox menu expanded.

Timesheet Single Page application

(For reference a “single page application” or SPA is a fully functioning web application contained in a single html file )

In a previous post I talked about creating a SPA timesheet(this is an based on one of the commercial timesheeting applications I have written). I have now completed a test version of this and it is available here. It will work in both firefox and Internet Explorer.

You need to right click on the link and select “save target as” , or “save as..” and then save the file to a local drive ( Make sure you don't use Save from the file menu as it will mangle the file). Once it is saved you can then open it with a browser window.

Basically this is a full functioning timesheet that can self-replicate and support some nice business logic. It also supports many preferences so it can be programmed for flexible business rules.

The next stage of this will be to create a site where users can login set their prefences and then download a customised version of this file with all there preferences set.



This preference data will then persist across all create timesheets and controls the logic of how the timesheet looks and performs for the user. These preferences are things like:

1 ) Name, employee number, text info about where they work etc
2 ) Whether they have Flexible/Bank hours, Toil and/or Overtime
3 ) There hours required for each day for a 4 week work cycle.
4 ) The date they want to start
5 ) The types of leave they are allowed to take.
6 ) The date format they want to use DDMMYYYY or MMDDYYYY.

With these preferences the web site will generate a html file that the user can download (just like the file above ). The user can then use this file to create new timesheets ( every week ) without the need to return to the website unless they need to change any of their preferences.

The great part about this system is that it is simple to deliver applications this way and you can write some pretty nice application where the users only require a browser and as all of the data and logic is self-contained you don’t even need to be on-line to use it. It also can be multi-OS if written correctly.

Extending these application to allow them to interact outside the container of the web page is possible by using AJAX.

Now I just need to think of another idea of how this can be used for another type of application.

SPA Timesheet idea.

Update: This is no longer an idea, please see www.yourtimesheets.com to see this in action.


One of the products I have commercialised is a timesheeting and task dissection application, it has two production versions, Lotus Notes/Domino and a MS Asp/SQL version. I am not going to talk about it here as many of my customers are very security conscious and have non-disclosure clauses in their contracts. But lately I have been thinking about creating a very cut-down SPA ( Single Page Application) using much of the client side code from the MS Asp/SQL Version. To make it simple at first I will only implement some of the business rules from the commercial version and not worry about the task dissections.


I have two approaches I am currently looking into.

1 ) Implement on top of the tiddly wiki engine.
2 ) Go my own way and write the plumbing myself.

I am going to do some research over the coming weeks as to which approach I will take. But the basic idea of the overall thing will be.

1 ) Visit my new "SPATimesheet" website and create an account
2 ) Enter your preferences into the website, such as your working hours, whether you get overtime etc etc
3 ) The system then generates a single html page for you that you can save to pc. This page contains all of the code and data for you to run the web-based timesheet in a single page even off-line in a browser.

This is the same concept used by my friend where he created http://www.tiddlyspot.com except that site is for wikis not timesheets.

I will post any updates about this idea in future postings.