4.6. Specifying Content Type Elements

Content types are composed of elements, which are individual fields that you can define and configure in detail. For example, a press release can contain a title, date and body text. Each of these elements can be styled separately. These elements are specified in the Elements field on the Add Content Type screen.

To specify an element, use the following syntax: 

[element_name]
type                = "element-type"
options.label       = "screen-label"
options.description = "description"
option name         = "value"
...

The element_name, type and label are required.

Additional options enable you to specify attributes of the element such as whether it is required, how it is filtered, formatted, validated, and so on.

For example, the following code specifies the elements for a Press Release: 

[headline]
type                    = text
options.label           = Headline
options.required        = true
display.tagName         = h1
display.filters.0       = HtmlSpecialChars

[icon]
type                    = imageFile
options.label           = Icon
options.required        = true
search.index.disabled   = true

[date]
type                    = dateTextBox
options.label           = Release Date
display.filters.0       = HtmlSpecialChars

[description]
type                    = editor
options.label           = Description
display.filters.0       = DefaultStripTags
[Note] Zend Form Elements

Perforce Chronicle content type elements are based upon Zend Form Elements and Zend Dojo Form Elements.

4.6.1. Element Types

You can use the following element types to define content types:

Table 4.1. Element Types

Type Description, Example, Options
checkbox Displays a single check box. To display a label for the check box, set the options.label parameter. To specify the values returned when the user clicks Save, specify the options.checkedValue and options.uncheckedValue parameters. To configure the default state of the check box when first displayed, set options.checked to true (checked) or false (unchecked). 
[checkbox]
type = "checkbox"
options.label = "Hockey pool participation?"
options.checkedValue = "Yes"
options.uncheckedValue = "No"
options.checked = true
dateTextBox Displays a field in which users enter dates. Also displays a calendar date-picker. To configure the format in which dates must be entered, specify the datePattern parameter with a Unicode date format. To configure whether white space variation is tolerated, set the strict parameter to true or false. 
[DateTest]
type = "DateTextBox"
options.strict = true
options.datePattern = "dd/MM/yyyy"
editor Creates a WYSIWYG editor box. You can add plugins to the editor by specifying Dojo editor plugins for the desired options, as shown in the example code. You can also create custom editor plugins in Javascript and add them. It is important to specify the DefaultStripTags display filter as shown in example to remove any malicious HTML. 
[Recipe]
type = "editor"
options.label = "Enter your recipe"
options.extraPlugins[] = "fontName"
options.extraPlugins[] = "fontSize"
options.extraPlugins[] = "formatBlock"
options.extraPlugins[] = "toolbarlinebreak"
options.extraPlugins[] = "foreColor"
options.extraPlugins[] = "hiliteColor"
options.extraPlugins[] = "||"
options.extraPlugins[] = "insertImage"
options.extraPlugins[] = "createLink"
options.extraPlugins[] = "pagebreak"
options.extraPlugins[] = "viewsource"
display.filters.0 = "DefaultStripTags"
file Creates a form element that enables users to upload files. 
[File]
type = "file"
options.label = "Press Release"
options.description = "PDF format (30K - 1M)."
options.validators.mimeType.validator = "mimeType"
options.validators.mimeType.options = "application/pdf"
options.validators.size.validator = "Size"
options.validators.size.options.min = 30720
options.validators.size.options.max = 1048576
imageFile Creates a form element that enables users to upload images. 
[Icon]
type                    = "imageFile"
options.label           = "Icon"
options.required        = true
search.index.disabled   = true
imageSelect Creates a form element that enables the display of multiple images as a group, and enables adding images via drag-and-drop for supported web browsers. 
[images]
type = "imageSelect"
options.label = "Images"
options.multiple = "1"
options.placeholder = "Images (drop files here)"
options.browseOptions.type.types.0 = "Assets/image"
display.image.height = "150"
display.image.link = "1"
display.image.target = "_lightbox"
display.image.maxWidth = "500"
multiCheckbox Displays a list of checkboxes. 
[SportsList]
type = "multiCheckbox"
options.label = "Favorite sports"
options.multiOptions.1 = "Tennis"
options.multiOptions.2 = "Hockey"
options.multiOptions.3 = "Curling"
options.multiOptions.4 = "Soccer"
options.multiOptions.5 = "Football"
options.multiOptions.6 = "Basketball"
multiselect Displays a list of options. 
[SportsList]
type = "multiselect"
options.label = "Favorite sports"
options.multiOptions.1 = "Tennis"
options.multiOptions.2 = "Hockey"
options.multiOptions.3 = "Curling"
options.multiOptions.4 = "Soccer"
options.multiOptions.5 = "Football"
options.multiOptions.6 = "Basketball"
radio Display one or more radio buttons. 
[RadioOption1]
type = "radio"
options.multiOptions.1 = "Radio #1"
options.multiOptions.2 = "Radio #2"
select Creates a drop-down list from which users choose an option (a pick list). [please note, the key's value is shown when the content is displayed, not the label.] 
[Sport]
type = "select"
options.label = "Sport"
options.multiOptions.Tennis = "Tennis"
options.multiOptions.Hockey = "Hockey"
options.multiOptions.Curling = "Curling"
options.multiOptions.Soccer = "Soccer"
options.multiOptions.Football = "Football"
text Displays a single line plain text entry field. It is important to filter the output as shown in the example to ensure entered data is interpreted as plain text. 
[Name]
type = "text"
options.label = "Name"
display.filters.0 = "HtmlSpecialChars"
textarea Displays a multi-line plain text field. It is important to filter the output as shown in the example to ensure entered data is interpreted as plain text. 
[Address]
type = "textarea"
options.label = "Address"
display.filters.0 = "HtmlSpecialChars"
validationTextBox Displays an entry field and specify the format in which text must be entered into it. It is important to filter the output as shown in the example to ensure entered data is interpreted as plain text. 
[TwoWords]
type = "validationTextBox"
options.label = "Two Words"
options.required = "1"
options.regExp = "[\w]+[\s]+[\w]+"
options.invalidMessage = "Input must two words separated by whitespace."
options.validators.regex.validator = "regex"
options.validators.regex.options.pattern = "/^[\w]+[\s]+[\w]+$/"
display.filters.0 = "HtmlSpecialChars"

4.6.2. Default Value for Elements

You can specify a default value for an element: 

options.value = "The default value for this element"

4.6.3. Validating and Filtering Input

Chronicle uses functionality provided by the Zend framework to enable you to validate and filter user input. It is important to appropriately filter displayed values for fields which allow text entry. You can allow a subset of HTML tags/attributes to be used via the DefaultStripTags filter; this is recommended for the editor field type. Further, you can ensure the value is interpreted as plain text via the HtmlSpecialChars filter; this is recommended for any fields accepting arbitrary user input such as text and textarea. 

[title]
type = "text"
options.label = "Title"
display.filters.0 = "HtmlSpecialChars"

[body]
type = "editor"
options.label = "Body"
display.filters.0 = "DefaultStripTags"

4.6.4. Display Options

display.tagName
Use this option to specify the HTML tag to be used to display the element. For example: 
[title]
type = "text"
options.label = "Title"
options.required = true
display.tagName = "h1"
display.render
Use this option to indicate that the element should normally be hidden from view and in-place editing; the element is still editable in form mode. For example: 
[hideme]
type = "text"
options.label = "Not Normally Visible"
display.render = false
display.showLabel
Use this option to display the element label before the element value. 
[author]
type = "text"
options.label = "Author"
display.showLabel = true

4.6.5. Option to Use Macros

Using Macros in content is possible when an element's definition includes: 

options.macros.enabled = true
| Perforce Chronicle Reference Guide > User Guide > Content Types > Specifying Content Type Elements
Perforce Chronicle - Release: 2012.2/486814