Double input type

Contents

A simple input type for storing decimal numbers.

Usage

<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

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.

Number input showing a large number
<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.

two button where one of them is selected
<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.
Text Line with various settings

Spell checking

XP 7.8.0

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)

Spell checking in TextLine
Spell checking in TextLine
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)
Text Area with various settings
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 1. 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>

Contents

Contents