Forms

OK, now it's all working, I think.  Somehow the previous property got deleted, and we're starting again.  I'm not sure why, and I'm none too happy about that fact.

This shows the use of three templates:

1. TEST_Showform(), an enhanced version of SteveB's Showform() template.  This allows all sorts of different form elements to be presented.
2. UpdateStore().  This subscribes to the "publish" button on the form, and appends it to the page property "formdata".  The property is an array.
3. TsTable(), which is handed the data from the page property and displays it in a sortable table.

At present, UpdateStore() fires an alert() after updating the property; this could obviously be improved, but for now it's just proof-of-concept (and not my template, so I'm not interested in messing with it).

 Update 15-June-2010 : You can now optionally set the default selection for each field by providing a default element in the field map.  For text fields, default should be a string.  For a checkbox, set it to true to pre-check the box.  For radio and select inputs, set it to the index (0-based) of the item you want selected.  For all field types, if you don't specify default then the field will be blank/everything unselected.  Look at the code below for some examples.

Here's the source code for this page:

TEST_ShowForm{
    fields: [
    // pre-load the text field with the current user name
        { label: 'Name: ', field: 'name', default: user.name },
    // preselect item 2 ("bottle washer") 
        { type:"select", label: 'Occupation', field: 'occupation', value: [ "unemployed","engineer","bottle washer" ], default:2 },
    // no pre-selection here
        { type: "radio", label: 'Sex', field: 'sex', value: [ "Male", "Female" ] },
    // pre-select to "checked"
        { type: "checkbox", field:"cool", label: "this is cool", value:"cool", default:true },
    // no pre-selection for the rest of these
        { type: "radio", oneperline:true, field:"Radio2", label: "Another radio style", value: [ "one", "per", "line" ] },
        { type: 'text', label: 'Location: ', field: 'location' },
        { type:'hello', label: 'THIS BREAKS', field: 'lskdjslkdjf' },
        { field: 'time', hidden: true, value: date.now }
    ],
    button: 'Publish'
};

UpdateStore { id: 'formdata' };

var data = json.parse(page.properties['formdata'].text ?? 'null');
if(data is not list) {
    "Store is either empty or has the wrong type (type is " .. typeof(data) .. ")";
} else if(#data > 0) {
    tstable{
        options: { zebra:true },
        columns: map.keys( { (key):true foreach var row in data, var key in map.keys(row) } ),
        data:    list.apply(data, "$ .. { time:date.format($.time, 'MMM d, yyyy hh:mm tt') }")
    };
} else
    "Store contains no data.";