XNAT Documentation
XNAT Documentation
Breadcrumbs

panel.form

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

Name

Value

Description

kind

panel.form

Spawner 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.

method

GET, POST, PUT

Data submission method - defaults to POST.

contentType

json, form

How is data sent?

  • json - submit stringified object map of form elements and their values

  • form - submit form data

url

URL string

Load 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…

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

…the values will be set on matching elements…

XML
<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.

refresh

URL

URL from which data is (re)loaded after form is submitted or reset. Values are inserted the same way as the load method.

contents

Spawner object(s)

One or more Spawner element config objects that will be inside this parent element.