Gadgets and Dashboards 2.0 : Field Definitions
This page last changed on Oct 13, 2009 by tmoore.
This page gives more detail about the field types that were introduced in Creating a Gadget JavaScript Object. On this page: Hidden FieldsSometimes you want to pass values back to the server from a form submission, but you do not want the user to be able to change those values. You can use hidden fields to achieve this. The following code defines a hidden field: fields: [ { userpref: "isConfigured", type: "hidden", value: "true" /* This example is hard coded but it could be dynamically generated or retrieved from the gadget prefs.*/ }, ... /* Other fields */ ] Where:
Text InputThis field type will be displayed as a simple text field. If the the type attribute is not defined, the field will be of this type by default. fields: [ { id: "numToDisplay", userpref: "numToDisplay", class: "numField" label: gadget.getMsg("gadget.common.num.label"), description: gadget.getMsg("gadget.common.num.description"), type: "text", value: gadget.getPref("numToDisplay") }, ... /* Other fields */ ] Where:
Text AreaThis field type creates a text input area in the form, used for large text inputs. fields: [ { id: "textToDisplay", userpref: "textToDisplay", class: "textBox" label: gadget.getMsg("gadget.common.display.text.label"), description: gadget.getMsg("gadget.common.display.text.description"), type: "textarea", value: gadget.getPref("textToDisplay") }, ... /* Other fields */ ] Where:
SelectThis field type is a simple selection list. As the AJAX options have been retrieved and are available during the creation of the field decscriptor, it is trivial to use them as options for the selection list. The results can be used raw or transformed. fields: [ { id: "cumulative-field", class: "cumulative-select-list", userpref: "isCumlative", label: gadget.getMsg("gadget.common.cumulative.label"), description:gadget.getMsg("gadget.common.cumulative.description"), type: "select", selected: gadget.getPref("isCumlative"), options:[ { /* These options are hard-coded but could easily be the results of an AJAX call (E.g. args.projects) or be calculated at run time (E.g. the next three days) */ label:gadget.getMsg("gadget.common.yes"), value:"true" }, { label:gadget.getMsg("gadget.common.no"), value:"false" } ] }, ... /* Other fields */ ] Where:
An option is defined as: { id : "option-id", label: "A human readable label", value: "option-value", selected: true } Where:
Option groups are used in the following example: fields: [ { userpref: "groupedOptions", label: gadget.getMsg("gadget.common.grouped.label"), type: "select", selected: gadget.getPref("groupedOptions"), options:[ { group: { label: "First Option Group", options: [ { label: "First Group -> First Option", value: "group-1_opt-1", }, { label: "First Group -> Second Option", value: "group-1_opt-2", } ] } }, { /* You can mix groups and non-group options */ label:"No Group Options", value:"group-N/A_opt-1" }, { group: { label: "Second Option Group", options: [ { label: "Second Group -> First Option", value: "group-2_opt-1", } ] } } ] }, ... /* Other fields */ ] Where:
Multi SelectThis field type produces a multi-select input value. fields: [ { id: "version-field", class: "multiVersionField", userpref: "selectedVersions", label: gadget.getMsg("gadget.common.versions.label"), description:gadget.getMsg("gadget.common.versions.description"), type: "multiselect", selected: gadget.getPref("selectedVersions"), /* Only use this if you only want value selected. Otherwise specify selection state on the option itself */ options:[ /* See Select Field for valid options */] }, ... /* Other fields */ ] Where:
Radio Button GroupThis field type produces a group of radio buttons for selecting a unique value from a list of choices. fields: [ { id: "security-level", class: "security-radio", userpref: "securityLevel", label: gadget.getMsg("gadget.common.security.label"), description:gadget.getMsg("gadget.common.security.description"), type: "radio", selected: gadget.getPref("securityLevel"), options:[ { /* See Select Field for valid options */ label: "Publicly Available", value:"public" }, { label:"Private", value:"private" } ] }, ... /* Other fields */ ] Where:
Checkbox GroupThis field type produces a group of checkboxes for selecting multiple values. fields: [ { id: "group-select", class: "group-selector-checkboxes", userpref: "selectedGroups", label: gadget.getMsg("gadget.common.groups.label"), description:gadget.getMsg("gadget.common.groups.description"), type: "checkbox", options:[ { /* See Select Field for valid options */ id: "group-users", label: "Users", value: "users" }, { id: "group-devs", label: "Developers", value: "developers", selected : true }, { id: "group-admins", label: "Administrators", value: "admins", selected : true } ] }, ... /* Other fields */ ] Where:
Custom FieldThis field type simply injects the string into the form as HTML. fields: [ { label: gadget.getMsg("gadget.common.groups.label"), description:gadget.getMsg("gadget.common.groups.description"), type: "custom", template: function(){ /* Returned string is injected into form */ return "<div>An example of a custom field</div>"; } }, ... /* Other fields */ ] Where:
Callback BuilderThis is the most powerful and flexible type of field for configuration. The callback enables you to construct any HTML and attach event listeners to it. fields: [ { id: "my-callback-field", label: gadget.getMsg("gadget.common.builder.label"), description:gadget.getMsg("gadget.common.builder.description"), type: "callbackBuilder", callback: function(parentDiv){ parentDiv.append( AJS.$("<input/>").attr({ id: "call-back-hidden-field", type: "hidden", name: userpref }).val(gadget.getPref("myCallback)) ); } }, ... /* Other fields */ ] Where:
RELATED TOPICSUsing the Atlassian Gadgets JavaScript Framework |
![]() |
Document generated by Confluence on Nov 22, 2009 17:46 |