Most of us are used to creating web forms based on a hard-coded database schema and a hand-crafted HTML form that maps directly to this schema.  This works, but the form will always look the same and do the same forever.

But what if we need to create a form that changes dynamically?  Maybe we need to submit different data depending on the time of the year.  Maybe we don’t need to fill some fields if it’s after 3:00 pm. We definitely don’t need to ask a “male” how many time he’s been pregnant.  In these cases, we should dynamically remove the unnecessary fields to improve usability.

In simpler cases, this could be done easily with some minors adjustments to the backend.  For more complex, real-world situations, this could get really crazy, quickly!

This is where DUDE comes into play.

A Zoo Example

Maybe you work at a Zoo and you need a system for capturing data about the animals in captivity.  For example,

• Height
• Weight
• Color
• Age
• Gender
• Scientific Name
• Picture

These, of course, are common properties for every animal on the planet.  However, for certain types of animals we may also want to record more specific properties, like these,

• Horn Length
• Tail Length
• Wing Span
• Shell Type
• Main Fin Size
• Antenna Size
• Pincer Strength
• Number of Fingers

You could create a really big form called UniversalAnimalInputForm which contains every possible property we could imagine for every animal in the whole wide world.  We would probably need thousands of different fields for capturing every one of these properties.

Let’s take one of my favorite animals, a monkey!

We can fill in its weight and color; we can save a picture, and also record its age, tail length, number of fingers, etc.  In this case, we can just leave unfilled the fields for horn length, wing span, shell type, main fin size, antenna size, and pincer strength.

This will actually “work.”  But let’s face it, it sucks being in a GIANT FORM having to figure out which fields to fill in and which to skip.

We know it’s a monkey! We know that monkeys do not have wings. Why are we displaying wing span field in our form then?  Shouldn’t we only display monkey-specific fields?

It would be much easier and less error prone for people to use a simple form that shows only the fields they need to fill.

A Sucky Fix: One Form per Animal

We could fix this by creating a table in our database called MONKEYS that includes just monkey properties and then create the form directly from this table.  But that would require a table for every single animal in the zoo.  A monkey table, a horse table, a shark table, a shrimp table, a wolf table, a clown fish table, a tiger table, a duck table, a pig table, a dog table… You get the idea.

This is not even a way to really fix the problem, either.  If we did this, we would just be moving the problem from one part of the code to another.

We faced the same problem at Nearsoft, although not with animals.  In our case, we had to save Quality Test Results for Garage Door Openers, and believe me, there are a lot of different types of Garage Door Openers out there.

We needed a sustainable solution and we created DUDE, an engine built in Javascript that takes advantage of jQuery and its plug-ins.  It unites Ajax, JSON, JQuery-dom and JQuery-validation.

DUDE provides an elegant way to create web forms, validate them and save their input data.

How to Solve the Zoo Problem using DUDE?

ONE simple Javascript method called runDUDE(options) does the trick.  This method receives a JSON object as a parameter that tells DUDE what to draw on screen.

First, let’s look at how the monkey JSON object could look like:

var options = {
  data: {
    animal_type: “Monkey”,
    name: “Donkey Kong”,
    birthday: “08/20/1985”
  },
  fields: [
    {
      FieldId: 1,
      Name: “age”,
      Title: “Age”,
      Type: “Integer”
    },
    {
      FieldId: 2,
      Name: “weight”,
      Title: “Body Weight”,
      Type: “Integer”
    },
    {
      FieldId: 3,
      Name: “color”,
      Title: “Color”,
      Type: “String”
    },
    {
      FieldId: 4,
      Name: “sex”,
      Title: “Sex”,
      Type: “Select”,
      Options: [
        { FieldId: 0, Text: “—“, Value: “” },
        { FieldId: 1, Text: “Male”, Value: “M” },
        { FieldId: 2, Text: “Female”, Value: “F” }
      ]
    }
  ],
  rules: [
    age: { required: true, max: 120 },
    weight: { required: true },
    color: { required: true },
    sex: { required: true }
  ],
  messages: [
    age: {
      required: “Age is a required field”,
      max: “Age cannot be bigger than 120”
    },
    weight: “Body Weight is a required field”,
    color: “Color is a required field”,
    sex: “Select animal sex”
  ]
};
runDUDE(options);

A JSON object is easy to read and understand.  The whole layout of the desired FORM can be encapsulated in a simple schema using JSON Objects that DUDE then uses to create the final form.  Think of this as a blueprint.

There is a general object called data.  This is where the form header goes (e.g., animal type, name and birthday in this case).

Then we see,

• Fields.  This is where every field in the form is specified.  Some type fields need an extra “Options” object.

• Rules.  This is where we are going to set the rules for every field validation using jquery-validator.js rules.

• Messages.  This is where the validation error messages are defined.  When a field has two or more rules, each error message rule must be defined separately.

A JSON object like this can be created very easily and very quickly using the JSON.NET library.

We create a database of fields and then, in the code, we decide which fields we are going to use and which do not apply to the selected animal.  We then select the validation rules and the error messages needed.  All of this can then be packaged together into a single JSON object like the one above using the JSON.NET library and LINQ.

[WebMethod]
public  GetAnimalForm(Animals requested_animal) {
  JObject formfields = JObject.fromObject(
    new {
      query = from fields in FieldsDataContext
      where animal == requested_animal
      select fields
    }
  );
  return formfields.ToString();
}

Adding Ajax/jQuery and Web Methods technology to the equation, we can make any request to the server at any time we need.

$.ajax({
  type: "POST",
  url: "AnimalInfo.aspx/GetAnimalFORM",
  contentType: "application/json; charset=utf-8",
  data: { requested_animal: “Monkey” }
  dataType: "json",
  success: function(results) {
    var options = JSON.parse(results);
    runDUDE(options);
  },
  error: function() { alert("Error retrieving info from DataBase"); }
});

This request by itself can be executed by pressing a button, or at document.ready() event to take care of the whole thing.

• Executes Web Method GetAnimalForm(Animals requested_animal) located in AnimaalInfo.cs
• GetAnimalForm() returns a string representing a JSON Object.
• If successful, JSON.parse() takes the returned string and converts it to an actual JSON Object
• The JSON object is finally sent to DUDE via runDUDE().
• runDUDE() displays the desired FORM onscreen.

This way we can create extensive dynamic forms in an elegant and easy way.  DUDE generates the HTML output to which we can add CSS later to create an easy to use form.

Saving the data submitted by that form is really fun too, and uses the same philosophy and structure that DUDE uses to draw on screen.

Resources:

• jQuery
• jQuery Validator
• jQuery DOM
• JSON.NET
• JSON