Here at the Port, we recently
needed to allow different people in the company to quickly publish
forms to our public web site. When I was tasked with making this
happen, my first thought was to create a simple web-based tool for form
creation. Now, I've done this before, and creating a web-based
form designer is no easy task, so I started thinking of other
options. I could let them use FrontPage to create the forms, and
then I could integrate the form into our site. Honestly,
this seemed like it would be more trouble than it would be worth.
Using FrontPage isn't a skill that most power users have.
On top of it, FrontPage doesn't create XHTML, and I wanted to end up
with a document that I could parse if I needed to. On top of all
that, I remembered that I really dislike FrontPage...
Then I remembered that everyone here has Microsoft InfoPath
installed. I figure it's only a matter of time before people
learn to use it, and in my opinion, it's easier to design a form in
InfoPath than FrontPage. The problem is that putting InfoPath
forms on the web isn't so simple. The end user has to have
InfoPath installed in order to fill out an InfoPath form. Since
we wanted to publish the forms to our public site, this
wasn't going to be an option.
So, I came up with a quick solution that solved my problem. I
created a simple InfoPath web viewer that renders the InfoPath form as
an HTML form, then takes the results from that form and creates a
DataSet. The resulting DataSet can then be bound to a
WebControl, stored in a database or as stored as XML.
The way this all works is simple. InfoPath has an option to
“Extract Form Files.” This creates, among other things, an XML
and XSLT file that can be used to generate the UI of the form. I
created a control that transforms this into XHTML, and then does some
massaging using a NodeReader and some Regex to create HTML form input
elements.
So, here's what an example form looks like in InfoPath:
...and here it is displayed by my InfoPath web viewer control:
You can download the ASP.NET C# project here.
Now there are a couple of big caveats to this control:
- It doesn't integrate the results back into infopath format.
I'd rather have a DataSet, so that's where the results end up.
- I only coded Text Areas, Text Boxes, Radio Buttons, and Drop
Down Lists. Infopath has a number of other controls, that you can drop
on the form. I didn't need them immediately, so I didn't code
support for them.
- I didn't implement any form validation..
Now, if you peek at the code, you'll see that I used a combination
of a NodeReader and REGEX to make this work. A better solution
may be to create a single XSLT file that does this work, but I'm not
that good with XSLT syntax, so I didn't go down this route.
Anyhow, try it out!
-Brendan