Introduction

gform is for generating a form according to a schema. Gform schema serves two purposes. Firstly it describes a data model. Secondly it describes how the form to edit the data should look like.

Attributes

A gform schema is made up of an array of attributes. An attribute describes a property of the javascript objects to be edited in the form. An attribute must have a code, which is the property's name. It must also have a type. The predefined types are "string", "boolean", "number", "data" and "time". So a simple gform schema looks like this:

{
 attributes: [
  {code: "name", type: "string"},
  {code: "birthday", type: "date"}
 ]
}

The form generated by gform will contain two textfields with labels. The first textfield is the widget dijit/form/ValidationTextbox. The second is the widget dijit/form/DateTextbox.

Decorator

The label can be customized by adding label and description to the attributes:

{
 attributes: [
  {code: "name", type: "string", label: "Name", description: "Please enter your full name"},
  {code: "birthday", type: "date", label: "Birthday", description: "Please enter your birthdate"}
 ]
}

The label is part of the Decorator. The description is displayed next to the label in a tooltip attached to a question mark. The Decorator also displays the state of the attribute. The state is either incomplete, invalid, changed or unchanged but valid. Incomplete means the value is required but empty. This value is invalid but since the user has not touched the attribute yet it is not marked invalid. An invalid value will be indicated by a red exclamation mark. The tooltip of the exclamation mark displays the error message. A changed and valid value will be marked as changed by a green C. The tooltip displays the old value.

Groups

If the schema has lots of attributes these should be grouped. Available groups are tabs and titlepanes. The group is specified by the property groupType. The tabgroup contains tabs which themselves contain arrays of attributes. Each tab can have a groupType describing how its attributes are displayed. I the example below it is set to listpane because that handles the sizing inside a layout container correctly. Listpanes also have a description property. The description is displayed on top of the contained attributes.

{
 editor: "tab",
 tabs: [{
  editor: "listpane",
  label: "tab1",
  description: "This tab has some interesting information."
  attributes: [
   {code: "name", type: "string", label: "Name", description: "Please enter your full name"},
   {code: "birthday", type: "date", label: "Birthday", description: "Please enter your birthdate"}
  ]},{
  label: "tab2",
  attributes: [
   {code: "bestfriend", type: "string"}
  ]}
}

Further reading

Consult the tutorial and the complete schema documentation next.