All Input types

AttachmentUploader

This field enables uploading of one or more files that will be stored as attachments to the current node/content. This is different from media content where each media is a separate node that can be linked to.

<input name="myattachment" type="AttachmentUploader">
  <label>My AttachmentUploader</label>
</input>

CheckBox

A checkbox field has a value if it is checked, or no value if it is not checked. Therefore, the only values for occurrences that makes sense is a minimum of zero and a maximum of one, which is default and may be skipped.

<input  name="mycheckbox" type="CheckBox">
  <label>My Checkbox</label>
  <default>checked</default> (1)
  <config>
    <alignment>right</alignment> (2)
  </config>
</input>

1	default - Use `checked` to check it, default is unchecked.
2	alignment defines placement of checkbox relative to label text. Supported values are: "left", "right", "top", "bottom", default is "left".

ComboBox

Combobox allows you to select one or more options from a statically defined list

<input name="mycombobox" type="ComboBox">
  <label>My Combobox</label>
  <occurrences minimum="1" maximum="2"/>
  <config>
    <option value="one">Option One</option> (1)
    <option value="two">Option Two</option>
  </config>
  <default>one</default> (2)
</input>

1	option elements and the `@value` attribute defines the actual value to store when the option is selected. Multiple `option` elements are allowed and ordered.
2	default is optional, and may be equal to one of the option values.

ContentSelector

References to other content are specified by this input type. Use the toggle icon to switch between the list mode (default) and the tree mode.

Content Selector:

An input box with a dropdown options below it

<input name="mycontentselector" type="ContentSelector">
  <label>My ContentSelector</label>
  <occurrences minimum="0" maximum="0"/>
  <config>
    <allowContentType>citation</allowContentType> (1)
    <allowContentType>my.other.app:quote</allowContentType>
    <allowPath>${site}/people/</allowPath> (2)
    <allowPath>./*</allowPath>
    <allowPath>/quotes*</allowPath>
    <treeMode>true</treeMode>  (3)
    <hideToggleIcon>true</hideToggleIcon> (4)
  </config>
</input>

1	allowContentType is used to limit the content types that may be selected using the Allow content type pattern
2	allowPath is used to limit the path of the content that may be selected using the allowPath Samples. By default, Content Selector only displays content from the same site.
3	treeMode toggles between tree and flat modes. Default value is `false` (flat mode).
4	hideToggleIcon hides the toggle icon when set to `false`.

Allow content type pattern

XP uses one of two modes when matching content type patterns:

LEGACY: this mode simulates the pattern matching functionality that was the default before XP 7.7.0.
MATCH: this mode is the current default mode and has a few notable changes from LEGACY mode.

The modes are explained in further detail below. You can configure which mode to use in the admin config.

Legacy

If the pattern value can be found in any part of the content type name, then it is considered a match. The pattern will be prefixed by the current application name unless:

the pattern uses the <application-name:content-name> format
the pattern includes one of : or *
the pattern starts with ${app}.

Match

The pattern will be treated as a Java Regular Expression (with a few notable exceptions) and the whole content type name must match it to be accepted. The pattern will be prefixed by the current application name if it does not contain any of the following characters: \^$.|?*+()[{:.

XP patterns: special cases

XP’s patterns have a few cases where they differ from normal Java Regular Expression syntax:

${app} template expression

Most content type names start with the name of the application where they are stored. It may be quite messy and hard to maintain the whole application name in every pattern, so the ${app} template expression can be used to replace it.

The '*' character

In most regex engines, the * character means "0 or more of the preceding token". However, XP treats it differently and interprets it as "0 or more of any character(s) except for line breaks". In that way, it’s similar to glob patterns.

To further clarify, in XP:

*day would match "monday", "day", and "mayday". This pattern would be invalid in most regex engines.
p*age would match "page" and "package", but not "age".
monk* would match "monkey" and "monk", but not "mon".

Example 1. Samples

Content type "citation" within your current application

<allowContentType>citation</allowContentType>

Content type "quote" from the application "my.other.app"

<allowContentType>my.other.app:quote</allowContentType>

Content types "quote" from any application

<allowContentType>*:quote</allowContentType>

Any content types from current application

<allowContentType>${app}:*</allowContentType>

All content types starting with banana (using regular expressions)

<allowContentType>*:banana*</allowContentType>

All content types except 'base:folder'

<allowContentType>^(?!base:folder$)*</allowContentType>

allowPath Samples

Allow all content starting from the root

<allowPath>*</allowPath>

Only content from the current site (but from any location), e.g
* /mySite/fish.jpg
* /mySite/articles/new-blog-post
* /mySite/someFolder/anotherFolder/rubarb/lettuce

<allowPath>${site}/*</allowPath>

All children of <site>/people, e.g
* /mySite/people/myContent
* /mySite/people/myGroup/anotherContent

<allowPath>${site}/people/*</allowPath>

All content in mySite starting with people, including children, e.g
* /mySite/peoples
* /mySite/people/myContent
* /mySite/peoples/myContent
* /mySite/people/myGroup/anotherContent

<allowPath>/mySite/people*</allowPath>

All children of the current content

<allowPath>./*</allowPath>

All children of the current content’s parent

<allowPath>../*</allowPath>

ContentTypeFilter

A field for selecting a content type.

input field with a dropdown of all content

<input name="myctyfilter" type="ContentTypeFilter">
  <label>My CTYFilter</label>
  <occurrences minimum="0" maximum="0"/>
  <config>
    <context>true</context> (1)
  </config>
</input>

1	context `true` limits the list of content types to the applications configured for the current site. Default is `false`.

CustomSelector

Selector input type with a customizable data source. Application developers must create a service that returns results according to the required JSON format, and then specify the service name in the input config. For information on creating a service see the :ref:`services` section.

Below are two sample usages of CustomSelector:

<!-- Basic Sample -->
<input name="mycustomselector" type="CustomSelector">
  <label>My Custom Selector</label>
  <occurrences minimum="0" maximum="0"/>
  <config>
    <service>my-custom-selector</service> (1)
  </config>
</input>

<!-- Sample with parameters -->
<input name="musicTrack" type="CustomSelector">
  <label>Intro song</label>
  <config>
    <service>spotify-music-selector</service>
    <param value="genre">classic</param>  (2)
    <param value="sortBy">length</param>
  </config>
</input>

1	service holds the name of a JavaScript service file, located under `/resources/services/[my-custom-selector]/[my-custom-selector].js`. You can also refer to a service file in another application, for example com.myapplication.app:myservice.
2	param lets you pass parameters to the service. This allows for the service to be used in different contexts. There can be multiple parameters or none. The parameters will be included in the HTTP request to the service as name-value query parameters.

Service Request

In addition to the param values, the service will receive the following query parameters in the HTTP request:

ids
Array of item ids already selected in the CustomSelector. The service is expected to return the items with the specified ids.

start
Index of the first item expected. Used for pagination of the results.

count
Maximum number of items expected. Used for pagination of the results.

query
String with the search text typed by the user in the CustomSelector input field.

Service Response

The service controller must have a GET handler that returns results in JSON format. The JSON object returned must include total and count properties as numbers, and hits containing an array of items. Each item in the hits property must have the following fields:

id
Unique Id of the option

displayName
Option title

description (optional)
Detailed description

iconUrl (optional)
Path to the thumbnail image file

icon (optional)
Inline image content (for example, SVG)

Sample JSON response from a CustomSelector service:

{
  "total": 10,
  "count": 2,
  "hits": [
    {
      "id": "1",
      "displayName": "Option number 1",
      "description": "External SVG file is used as icon",
      "iconUrl": "/some/path/images/number_1.svg"
    },
    {
      "id": "2",
      "displayName": "Option number 2",
      "description": "Inline SVG markup is used as icon",
      "icon": {
        "data": "<svg xmlns=\"http://www.w3.org/2000/svg\"/>",
        "type": "image/svg+xml"
      }
    }
  ]
}

Date

A simple field for dates with a calendar pop-up box in the admin console. The default format is yyyy-MM-dd.

Input field with a calander above it and a blue ok button

<input name="mydate" type="Date">
  <label>My Date</label>
  <default>2011-09-12</default> (1)
</input>

1	default date value to be used. The format for the default date value can be:

Date in ISO 8601 format: yyyy-MM-dd (e.g. "2016-12-31")
Relative date expression (e.g. "+1year -12days")

A relative date expression is a sequence of one or more date offsets.
An offset consists of: a plus or minus sign, followed by an integer, followed by a date unit string (e.g. "+3 days")

Table 1. Unit strings
Singular	Plural	initial letter
"year"	"years"	"y"
"month"	"months"	"M"
"week"	"weeks"	"w"
"day"	"days"	"d"

An offset can also be the string now, which means current date.

If <default> value is set for an input, the Date picker will display "Set default" button for setting the default value with one click.

DateTime

A simple field for dates with time. A pop-up box with a calendar and time selector allows easy editing. The format is yyyy-MM-dd hh:mm for example, 2015-02-09T09:00. The date-time could be of type local (no timezone) or with a timezone. This is done using configuration:

Input field with both a calander and time selection above

<input name="mydatetime" type="DateTime">
  <label>My DateTime</label>
  <config>
    <timezone>true</timezone> (1)
  </config>
  <default>2011-09-12</default> (2)
</input>

1	timezone set to `true` if timezone information should be used. Default is `false`.
2	default date value to be used. The format for the default date value can be:

Combined date and time in ISO 8601 format, with timezone: yyyy-MM-ddThh:mm±hh:mm (e.g. "2016-12-31T23:59+01:00")
Combined date and time in ISO 8601 format, without timezone: yyyy-MM-ddThh:mm (e.g. "2016-12-31T23:59")
Relative datetime expression (e.g. "+1year -12hours")

Note that the ISO8601 format consists of concatenating a complete date expression, the letter T as a delimiter, and a valid time expression.

The timezone offset is a plus or minus sign, followed by an hour offset, followed by a colon, followed by a minute offset. A timezone offset of zero can also be represented as 'Z', meaning UTC or Zulu time. It is equivalent to offset +00:00.

A relative date expression is a sequence of one or more datetime offsets. An offset consists of: a plus or minus sign, followed by an integer, followed by a date/time unit string (e.g. "+3 days")

Table 2. Unit strings
Singular	Plural	initial letter
"year"	"years"	"y"
"month"	"months"	"M"
"week"	"weeks"	"w"
"day"	"days"	"d"
"hour"	"hours"	"h"
"minute"	"minutes"	"m"

An offset can also be the string now, which means current date and time.

If <default> value is set for an input, the Date/Time picker will display "Set default" button for setting the default value with one click.

Examples:

<input name="dateTimeDefaultTz" type="DateTime">
  <label>DateTime (with tz and default value)</label>
  <config>
    <timezone>true</timezone>
  </config>
  <default>2000-01-01T12:30+01:00</default>
</input>

<input name="dateTimeDefaultNoTz" type="DateTime">
  <label>DateTime (without tz and default value)</label>
  <default>2000-01-01T12:30</default>
</input>

<input name="dateTimeRelative" type="DateTime">
  <label>DateTime (relative default value)</label>
  <default>+1year -12hours</default>
</input>

<input name="dateTimeNow" type="DateTime">
  <label>DateTime (current time as default value)</label>
  <default>now</default>
</input>

Double

A simple input type for storing decimal numbers.

An inpt field with a lot of decimal numbers

<input name="mydouble" type="Double">
  <label>My Double</label>
  <default>3.89</default> (1)
</input>

<input name="angle" type="Double">
  <label>Angle (rad)</label>
  <config>
    <min>0</min> (2)
    <max>3.14159</max> (3)
  </config>
</input>

1	default can be any double-precision floating-point number, with the dot character as decimal separator
2	config/min optionally specifies the minimum allowed value
3	config/max optionally specifies the maximum allowed value

GeoPoint

Stores a GPS coordinate as two comma-separated decimal numbers.

text input with a longitude and latitude numbers

The first number must be between -90 and 90, where a negative number indicates a location south of equator and a positive is north of the equator.
The second number must be between -180 and 180, where a negative number indicates a location in the western hemisphere and a positive number is a location in the eastern hemisphere.

<input name="mygeopoint" type="GeoPoint">
  <label>My GeoPoint</label>
  <occurrences minimum="0" maximum="1"/>
  <default>51.5,-0.1</default>(1)
</input>

1	default specifies a default string value for the GeoPoint, for example `51.5,-0.1`.

HtmlArea

A field for entering multi-line text with rich-formatting options.

<input name="myhtmlarea" type="HtmlArea">
  <label>My HtmlArea</label>
  <default><h3>Enter description here</h3></default>(1)
  <config>
    <exclude>*</exclude> (2)
    <include>JustifyLeft JustifyRight | Bold Italic</include> (3)
    <allowHeadings>h2 h4 h6</allowHeadings> (4)
  </config>
</input>

1	default can contain any valid HTML elements, but tags must be correctly closed since the input type is defined inside an XML.
2	exclude optionally removes the standard tools from the editor toolbar
3	include optionally adds more tools to the editor toolbar.
4	allowHeadings space-separated list of allowed heading tags (from `<h1>` to `<h6>`); by default all are allowed

If you are manually outputting contents of an HtmlArea input in your template, you might have to use processHtml() function which will process macros and generate correct links inside the HTML content.

HTML Area is configured with default set of tools but the toolbar can be customized. Using the config setting you can exclude specific tools from being shown (use "*" to exclude all tools at once) and/or include those that you want to have in the toolbar. Separate tools with a space and use "|" character to group tool buttons together. Complete list of supported tools can be found below.

Input field with a toolbar at the top. Source and fullscreen buttons on the bottom left

Below is the default editor tools configuration:

Format | JustifyBlock JustifyLeft JustifyCenter JustifyRight | BulletedList NumberedList Outdent Indent | SpecialChar Anchor Image Macro Link Unlink | Table | PasteModeSwitcher

Below is the complete list of available editor tools:

Name	Description
Format	Text format menu
Bold	Bold text
Italic	Italic text
Underline	Underline text
JustifyBlock	Justify content
JustifyLeft	Left align content
JustifyCenter	Center content
JustifyRight	Right align content
BulletedList	Insert a bullet list
NumberedList	Insert a numbered list
Outdent	Decrease indent
Indent	Increase indent
SpecialChar	Insert a special character
Anchor	Insert an anchor
Image	Insert/Edit an image
Macro	Insert a macro
Link	Insert/Edit a link
Unlink	Remove link
Table	Table format menu
PasteModeSwitcher	Paste mode (formatted/plain text)
BGColor	Background color
Blockquote	Quotation
Copy	Copy selected text into buffer
CopyFormatting	Copy formatting
CreateDiv	Wrap with div
Cut	Cut selected text into buffer
Font	Font menu
FontSize	Font size menu
HorizontalRule	Insert a horizontal line
ListStyle	Change style of BulletedList
NewPage	Clean editor’s content
Preview	Preview HTML Area contents
Redo	Repeat last action
RemoveFormat	Remove formatting
SelectAll	Select editor’s content
Strike	Strikethrough over text
Styles	Text styles menu
Subscript	Subscript text
Superscript	Superscript text
TextColor	Text color
Undo	Undo last action

Name

Description

Format

Text format menu

Bold

Bold text

Italic

Italic text

Underline

Underline text

JustifyBlock

Justify content

JustifyLeft

Left align content

JustifyCenter

Center content

JustifyRight

Right align content

BulletedList

Insert a bullet list

NumberedList

Insert a numbered list

Outdent

Decrease indent

Indent

Increase indent

SpecialChar

Insert a special character

Anchor

Insert an anchor

Image

Insert/Edit an image

Macro

Insert a macro

Link

Insert/Edit a link

Unlink

Remove link

Table

Table format menu

PasteModeSwitcher

Paste mode (formatted/plain text)

BGColor

Background color

Blockquote

Quotation

Copy

Copy selected text into buffer

CopyFormatting

Copy formatting

CreateDiv

Wrap with div

Cut

Cut selected text into buffer

Font

Font menu

FontSize

Font size menu

HorizontalRule

Insert a horizontal line

ListStyle

Change style of BulletedList

NewPage

Clean editor’s content

Preview

Preview HTML Area contents

Redo

Repeat last action

RemoveFormat

Remove formatting

SelectAll

Select editor’s content

Strike

Strikethrough over text

Styles

Text styles menu

Subscript

Subscript text

Superscript

Superscript text

TextColor

Text color

Undo

Undo last action

ImageSelector

The ImageSelector is a specialized version of the ContentSelector that is limited to selecting images (content of type "media:image"), but also upload new images.

Input box with a grid of images to select below it

<input name="myimage" type="ImageSelector">
  <label>My Image</label>
  <occurrences minimum="0" maximum="1"/>
  <config> (1)
    <allowPath>${site}/*</allowPath> (2)
    <treeMode>true</treeMode>
    <hideToggleIcon>true</hideToggleIcon>
  </config>
</input>

1	With the exception of `<allowContentType>` (which is not supported here) and `<allowPath>`, ImageSelector supports the same configuration options as ContentSelector.
2	By default, Image Selector displays all images from the root. If you want to limit images to the same site, use `<allowPath>${site}/*</allowPath>`

Long

A simple input for storing integer numbers.

<input name="mylong" type="Long">
  <label>My Long</label>
  <default>42</default> (1)
</input>

<input name="degrees" type="Long">
  <label>Degrees</label>
  <config>
    <min>0</min> (2)
    <max>360</max> (3)
  </config>
</input>

1	default can be any Integer number
2	config/min optionally specifies the minimum allowed value
3	config/max optionally specifies the maximum allowed value

MediaSelector

The MediaSelector is a specialized version of the ContentSelector that is limited to selecting media only (content of type "media:*"), including also uploading new media (any kind of files).

<input name="mymedia" type="MediaSelector">
  <label>My Media</label>
  <occurrences minimum="0" maximum="1"/>
  <config> (1)
    <allowContentType>media:archive</allowContentType>
    <allowPath>${site}/*</allowPath> (2)
    <treeMode>true</treeMode>
    <hideToggleIcon>true</hideToggleIcon>
  </config>
</input>

1	MediaSelector supports the same configuration options as ContentSelector, but is limited to using `media:*` content types in the `<allowContentType>` configuration.
2	Just like ImageSelector, MediaSelector by default displays all media items starting from the content root.

RadioButton

An input type for selecting one of the available options defined in the config element.

<input name="myradiobutton" type="RadioButton">
  <label>My RadioButton</label>
  <occurrences minimum="1" maximum="1"/> (1)
  <config>
    <option value="one" i18n="option_one.label">Option One</option> (2)
    <option value="two" i18n="option_two.label">Option Two</option>
  </config>
  <default>one</default> (3)
</input>

1	occurences only make supports minumum=1 or 0 - maximum will always be 1.
2	option elements and the `@value` attribute defines the actual value to store when the option is selected. Multiple `option` elements are allowed and ordered. Optional `i18n` attribute can be used to localise the option label.
3	default is optional, and may be equal to one of the option values.

Tag

A simple input for adding free-text tags. Tags will be autocompleted based on tags in other items with the same property name.

<input name="mytag" type="Tag">
  <label>My Tag</label>
  <occurrences minimum="0" maximum="0"/>
</input>

TextLine

A plain text, single line input with advanced validation options. Stored as string.

<!-- Basic sample -->
<input name="mytextline" type="TextLine">
  <label>My TextLine</label>
</input>

<!-- Using regex validation and a default value. -->
<input name="socialsecuritynumber" type="TextLine">
  <label>My SSN</label>
  <occurrences minimum="1" maximum="3"/>
  <default>000-00-0000</default> (1)
  <config>
    <max-length>11</max-length> (2)
    <show-counter>true</show-counter> (3)
    <regexp>\b\d{3}-\d{2}-\d{4}\b</regexp> (4)
  </config>
</input>

1

default specifies the default string for the TextArea

2

max-length specifies the maximum allowed number of characters (default: unlimited)

3

show-counter specifies whether text length counter should be shown (default: hidden)

4

regexp supports validation by defining regular expressions

Regex validation is performed by the browser’s regex testing function. Visit MDN’s documentation on regexes for more information on the supported expressions and character classes.

Spell checking

When displayed in the Content Studio, input value will be checked for spelling errors by built-in browser spell checker based on the language set for the content. If language for the content is not set, spell checker will use default language set in the browser.

In order for the spell checker to work, the following conditions should be met:

You should have spell checking enabled in your browser
Spell checking will be performed only in languages that are enabled in your browser (i.e. if you have set Norwegian language in the content but Norwegian language is not enabled in your browser, then spell checking will not work)

In the second screenshot above English text in the first input is grammatically correct, but language of the content is set to Norsk Bokmål, therefore English text is not recognised by the spell checker. Text in the second is in Norsk Bokmål and correctly checked for spelling errors.

TextArea

A plain text, multi-line input field.

<input name="mytextarea" type="TextArea">
  <label>My TextArea</label>
  <default>Default text goes here</default> (1)
  <config>
    <max-length>42</max-length> (2)
    <show-counter>true</show-counter> (3)
  </config>
</input>

1	default specifies the default string for the TextArea
2	max-length specifies the maximum allowed number of characters (default: unlimited)
3	show-counter specifies whether text length counter should be shown (default: hidden)

Contents of TextArea will be automatically checked for spelling errors as described above for TextLine.

Time

Specify time in the format hh:mm. A pop-up box with time selector allows easy editing. 09:00.

input field with a hour and minute selector above it

<input name="mytime" type="Time">
  <label>My Time</label>
  <default>13:22</default> (1)
</input>

1	default date value to be used. The format for the default date value can be:

Time in 24h format: `hh:mm (e.g. "23:59")
Relative time expression (e.g. "+1hour -12minutes")

A relative time expression is a sequence of one or more time offsets. An offset consists of: a plus or minus sign, followed by an integer, followed by a time unit string (e.g. "+3 minutes")

Table 3. Unit strings
Singular	Plural	initial letter
"hour"	"hours"	"h"
"minute"	"minutes"	"m"

An offset can also be the string now, which means current date and time.

If <default> value is set for an input, the Time picker will display "Set default" button for setting the default value with one click.

Examples:

<input name="dateTimeDefaultTz" type="DateTime">
  <label>DateTime (with tz and default value)</label>
  <config>
    <timezone>true</timezone>
  </config>
  <default>2000-01-01T12:30+01:00</default>
</input>

<input name="dateTimeDefaultNoTz" type="DateTime">
  <label>DateTime (without tz and default value)</label>
  <default>2000-01-01T12:30</default>
</input>

<input name="dateTimeRelative" type="DateTime">
  <label>DateTime (relative default value)</label>
  <default>+1year -12hours</default>
</input>

<input name="dateTimeNow" type="DateTime">
  <label>DateTime (current time as default value)</label>
  <default>now</default>
</input>