Skip to end of metadata
Go to start of metadata

Description

Creates a <form> element styled as a panel with "Submit" and "Reset" buttons. This element is a container that other Spawner elements are spawned into.

Spawner Widget Name

kind: panel.form

JavaScript Method

XNAT.ui.panel.form()

Configuration Options

adminInfo:
    kind: panel.form
    id: admin-info
    name: adminInfo
    label: Admin Information
    method: POST
    [contentType]: json
    [url]: /xapi/siteConfig
    [action]: /xapi/siteConfig/batch
    [load]: XNAT.data.siteConfig
    [refresh]: /xapi/siteConfig
    contents:
        ${adminEmail}

Properties

NameValueDescription
kindpanel.formSpawner widget type - creates a <form> element styled as a panel with "Save" and "Discard Changes" buttons in the footer.
name(string)Arbitrary, but meaningful, name for this form panel.
label(string)Form header text.
id(string)Value for spawned element's id attribute.
methodGET, POST, PUTData submission method - defaults to POST.
contentTypejson, form

How is data sent?

  • json - submit stringified object map of form elements and their values
  • form - submit form data
urlURL stringLoad and submit data using a single url. If the same url can be used to populate values into the form fields, you can use a single property with the URL used for that.
action(REST URL)URL for data submission. URLs starting with a slash will be resolved to the site root, adding server context if necessary.
load

(object, url, js)

 

Where are values pulled from when the form loads?

  • Object - namespaced global JavaScript object that contains properties with names that match form element names
  • URL - REST URL that returns an object with property names matching form element names
  • JS - JavaScript code to eval() to retrieve data object

There's a 'special' syntax that can be used to specify what kind of value is used for the 'load' property (object, url, or js).

  • load: ?? XNAT.data.object - ?? prefix will parse the object path and retrieve the data, if it exists
  • load: !? XNAT.data['object.with.periods.in.its.name'] - !? prefix will do an evil JS eval
  • load: $? /path/to/get/data - $? prefix will do a REST call to retrieve form values

Returned data values will be inserted into form elements with name attribute values that match the property names.

For example, if this object is returned…

{
	"adminEmail": "you@yoursite.org",
	"emailAllowNonuserSubscribers": true,
	"emailPrefix": "XNAT",
	"host": "localhost"
}

…the values will be set on matching elements…

<input type="text" name="adminEmail" value="you@yoursite.org">
<input type="checkbox" name="emailAllowNonuserSubscribers" value="true" checked="checked">
<input type="text" name="emailPrefix" value="XNAT">
<input type="text" name="host" value="localhost">

…that's the simplified version anyway.

refreshURLURL from which data is (re)loaded after form is submitted or reset. Values are inserted the same way as the load method.
contentsSpawner object(s)One or more Spawner element config objects that will be inside this parent element.
  • No labels