Custom Form Fields

Introduction

A Custom Form Field file is an xml file that resides in the /templates directory for a Spring site. The custom form field file allows you to create or alter the form used when editing a page using Spring Page Editor.

The default custom form when creating pages is custom.pages.xml - if you create a file with that name in the local /templates directory it will override Springs default version.

View the default custom.pages.xml

If can create as many custom form field files as required, and they can be chosen when editing by toggling the 'Custom Forms' link and choosing a new form.

Creating Custom Form Field files

Naming

Custom form field files have a specific naming requirement

custom.[text].xml

eg.

custom.pages.xml

custom.product.form.xml

custom.events.xml

Format of the Custom Form Field File

The custom form field file must be valid xml, start with the <?xml> tag and contain a root element of <customfields>. Within the <customfields> element, can be one or more <tab> elements which contain <fieldset> or <field> elements.

<?xml version="1.0"?>
<customfields>
<tab name="[text]" label="[text]">
...
</tab>
</customfields>

Tabs

You can create multiple tabs by adding multiple <tab> elements. Each tab must have a unique 'name' attribute. Within a <tab> you can directly add <field> or <fieldset> elements.

<tab name="layout" label="Layout">
...
</tab>
<tab name="info" label="Info">
...
</tab>

Fieldsets

Fieldsets wrap a group of fields in a border with a heading, with a 'Show/Hide' toggle next to the heading. This allows a user to reveal or hide the fields within a fieldset as required. The default is for the contents of the fieldset to be shown, you can make the default hidden by adding the class="hidden" attribute.

Required:

@label="[text]"
@name="[unique name, a-zA-Z0-9]"

Options:

@class="repeat | hidden"

<fieldset label="Metadata" name="metadata">
[fields]
</fieldset>

Fields

WYSIWYG editor

Required:

@fieldtype="wysiwyg"
@name="html | html1 | html2 | html3 | html5 | html6 | html7 | html8 | html9"

<field name="html" fieldtype="wysiwyg">
<!-- wysiwyg editor -->
</field>

Text

Required:

@fieldtype="text"
@name="[unique name, a-zA-Z0-9]"
<label>[text]</label>

Options:

@view="text"

<field name="title" fieldtype="text" view="text">
<label>Title</label>
</field>

Textarea

Required:

@fieldtype="textarea"
@name="[unique name, a-zA-Z0-9]"
<label>[text]</label>

<field name="description" fieldtype="textarea" view="list">
<label>Description</label>
</field>

Calendar

Required:

@fieldtype="calendar"
@name="[unique name, a-zA-Z0-9]"
<label>[text]</label>

<field name="publishdate" fieldtype="calendar">
<label>Publish Date</label>
</field>

Select

Required:

@fieldtype="select"
@name="[unique name, a-zA-Z0-9]"
<label>[text]</label>

<field name="status" fieldtype="select">
<label>Status</label>
<option value="0">Offline</option>
<option value="1">Online</option>
<option value="2">Hidden</option>
<option value="3">Invisible</option>
</field>

URL Select

Required:

@fieldtype="urlselect"
@name="[unique name, a-zA-Z0-9]"
<label>[text]</label>
<url>[url]</url>

<field fieldtype="urlselect" name="staff">
  <label>Staff:</label>
  <url>/feed/table/pages/category/staff/format/staff.select.xslt/limit/30</url>
</field>

The data returned from the <url> must be a xhtml compliant <select> element:

<selectname="staff">
  <optionvalue="accounts">Accounts</option>
  <optionvalue="support">Support</option>
  <optionvalue="after-hours">After Hours</option>
</select>

URL Checkbox List

 <field fieldtype="urlcheckboxlist" name="embed">
   <label>Panels:</label>
   <url>/feed/format/system.checkboxlist/limit/50/name/embed/query/parentid:links</url>
 </field>