Item field types

An item type consists of a number of item fields - generally speaking your options are:

Text fields are for rendering various input fields for text
Link fields are for linking to folders, files and items
Select box fields are for letting people select users or products, or for creating lists on the fly
Number and date fields are for specifying number or dates
List fields are for letting users select values from various types of lists (with static or dynamic options)

Additionally, you have access to all the HTML5 input fields - and a number of cool-but-unique fields (like the color field and the geolocation field) grouped under the other fields label.

Text fields

Text fields render input fields for text - these are your options:

Field type	Description	Parameters & Comments
Long text	Renders a multi-line input field for text	Use the extra parameters to control the size of the field in rows and columns
Rich text	Renders a text field and a rich text editor.	An extra parameter lets you select a custom editor configuration - if none is set the system checks if one has been set for the user, and finally defaults to the default configuration defined in Settings > Editing > Editor Configurations.
Text	Renders a simple input field for text (255 character limit).	None
Hidden field	“Renders” a hidden field for passing on values not entered by the user	If you make the field required and does not give it a default value or assign a value automatically to it, the user will not be able to save the item. So don't.
Password	Renders a text field where input is rendered as dots (rather than characters)	None

Link fields

Link fields make it possible to link to various types of content - internal and external pages, items, files and folders:

Field type	Description	Parameters & Comments
Link	Renders a control for selecting an internal page on the solution or a file from the file manager.	The extra parameters let you control what can be selected; pages, paragraphs or files. You can also choose to only return the page or paragraph ID (rather than an URL). This field cannot be edited from frontend.
Link to item	Renders a control for linking to an item-base page or paragraph.	You can access the item fields of the selected item by using the Item.[LinkToItem].Fields loop.
Folder	Renders a file folder selector – the contents of the selected folder can then be rendered in frontend.	You can specify a search pattern in the field settings to only show files matching this pattern, e.g. .xlsx to match all Excel files, or 2015- to match files starting with 2015. Cannot be edited from frontend.
File	Renders a file selector	You can set the default folder and the selectable file extensions using the extra parameters in the field settings. You can also allow file upload and select a max number of files for editors to upload.

Select box fields

The select box fields let user select product or users when creating an item - you can then render user or product details in the frontend when the item is published. You can also let users create custom lists on the fly.

The select box field are:

Field type	Description	Parameters & Comments
User	Select users and user groups. Basic user management tags and loops are available, so you can render various details about the selected users in frontend.	None
Product	Select one or more products or product groups. Basic product tags & loops are available for rendering the selected products/groups in frontend.	Select a paragraph with a product catalog which will be used to render the content in frontend. Specify whether products, product groups, or both may be selected using this field. Inactive products can be selected, but will return a blank page in frontend. Attention! This is NOT a replacement for the product catalog app, and you cannot search or filter products selected with this field. Sort order in frontend follows the sort order in the item field.
Product Catalog	Select one or more products or product groups. This field returns a ProductListViewModel which can be used to render the product data in frontend.	Use in place of Product field type on solutions using ViewModels
Editable list	Renders an input box for creating custom lists when creating the item.	Content can be added quicker by entering them in a comma-separated format. They will look a little bit wonky until you save the item type.

Number & Date fields

You have access to the following fields for adding number and date/datetime fields to your item types:

Field type	Description	Parameters & Comments
Decimal	Renders an field for specifying decimal numbers	Number formatting depends on your backend language; a Danish backend will have comma as the decimal mark and point as a thousands separator, whereas a US backend will have point as the decimal marker and comma as the thousands separator.
Integer	Renders a field for specifying integers (non-fractional numbers)	Number formatting depends on your backend language; a Danish backend will have point as a thousands separator, whereas a US backend will have comma as the thousands separator.
Date	Renders a date selector	To get current date preselected enter NOW as the default value in the field settings.
Date and time	Renders a date/time selector	To get current date preselected enter NOW as the default value in the field settings.

List fields

Using the list fields, you can add checkbox lists, a dropdown lists, or a radio button lists to your item types:

Field type	Description	Parameters & Comments
Checkbox list	Renders a list of checkboxes	Checkbox lists with a static source have extra parameters for styling the list options in a grid (each option must have an icon)
Dropdown list	Renders a dropdown list
Radio button list	Renders a radio button list	Radio button lists with a static source have extra parameters for styling the list option in a grid (each option must have an icon)

List field sources

When creating list fields, click the pencil icon next to the Type field to edit the field options. From here, you can also choose between three source types for the list options:

A static source, where you manually provide labels, values, and icons for the list options
An SQL source, where you retrieve a list of labels and values from a database using SQL
An Item type source, which allows you to generate list options based on instances of that item type
A Folder source, where you generate a list of the elements in a folder

In the example in Figure 7.1 with SQL as the source type, all products with “t-shirt” in the product name will be rendered as list options.

Figure 7.1 SQL as source type

For the Item type source type, you can select an item type from which you select which fields should be labels and values.

Furthermore, you can specify which language/website, page or paragraphs the items are drawn from. For pages, you can also choose to include child items or not.

So in the example in Figure 7.2, the list options would consist of the headlines of all news articles (made with the NewsArticle item type) on the current website.

Figure 7.2 Item type as source type

For the Folder type source type (Figure 7.3), you can select a folder from which the files will be generated as the list options. If the files are images of the types .svg .png .jpg or .gif, the images are rendered as icons. Otherwise, the file names without the file type will be used as the list options. The list values are the full url to the file.

NB: To show images as icons, the icon width and height parameters of the list field must be specified.

Figure 7.3 Folder as source type

HTML5 input fields

HTML5 introduced new input types, and most of these are all available for item types. Please be aware that not all browsers support all the input types – if a browser does not support a field type, it will default to type text.

These are the available HTML5 input field types:

color
date
datetime
datetime local
email
month
number
password
range
tel
text
time
url
week

Selecting an HTML5 input field comes with extra parameters (Figure 8.1) for controlling the type and styling of the field.

Figure 8.1 Parameters for HTML5 fields

You can:

Select the type of control from the dropdown menu
Specify a regular expression pattern to check the input element’s value against – works with input types text, url, tel, email and password
Specify a short placeholder, describing the expected value of an input field – e.g. 70252090 for a Danish telephone number. Works with input types text, url, tel, email and password
Specify the size (width in characters) of an input element – use a non-negative integer greater than zero as value
Specify a minimum and maximum value of an input element. You can use a floating point number as the expected minimum and maximum values. Works with input types number, range, date, datetime, dagtetime-local, month, time and week.
Specify the legal number intervals (step) for an input element. You can insert a positive floating point number to specify the value granularity. Works with input types number, range, date, datetime, dagtetime-local, month, time and week.
Activate or deactivate autocomplete on the input field – works with input types text, url, tel, email, password, datepickers, range, and color
Specify, that the element is a required part of the submission

Other field types

In addition to the field types described above, you have access to the following field types:

Field type	Description	Parameters & Comments
Item relation list	Renders a control for adding lists of references to other items of a particular type, e.g. ‘Related News’ based on a News-item.	With the extra parameters you specify the item type selectable, sort by and sort order
Geolocation	Renders geo-location coordinates (format: 56.108145, 10.209894) based on values in other fields on the item	First, create address fields (e.g. Street, ZIP, City, etc.) on the item type where you want to use the geolocation field. Then enter a comma-separated list of the fields you want to use to look up the geolocation in the parameter field on the geolocation field - e.g. street,zip,city. The values entered in the address fields will then be used to look up and render a geolocation. You can override the retrieved coordinates with your own by checking the override retrieved coordinates checkbox.
Color	Renders a color selector which lets you select a color, enter a color code or select a preset color	Preset colors are defined in item field settings using the ‘Presets’ field.
Color swatch	Sets a global color scheme for a website - mirrored by all other color swatch fields. Choose between 11 colors - 5 brand colors, 5 neutral colors, and 1 custom (non-global) color.	Use pencil-icon to generate colors from a base color, an image, or a predefined business palette. Intended use is to extend website settings - used on Rapido.
Checkbox	Renders a check box	None
Item type	Renders fields from another item type within this item type.	This field type lets you create little content blocks and reuse them again and again when building item types. Click Enable presets to make it possible to create various pre-configurations of the underlying item fields. See Rapido website settings for examples.
Item tab	Select another item type - the fields from this item type are rendered in a tab	Allows you to group & organize your website properties - used extensively on Rapido.
Google font	Allows you to select a Google Font family and font weight	You must provide a Google Fonts API key under Settings > Control panel > Item settings to use this - read more here