Field types

This article contains a comprehensive list of all the field types available in Prepr.

List of field types

Fields	Model	Component
Text For single and multi line text entry.	✓	✓
Assets To add one or more assets (image, video, audio, file).	✓	✓
Stack To create a stack of components and/or models often used for component-based pages. This field is where you enable the A/B testing and personalization features.	✓	✓
Content reference To create a link to another model.	✓	✓
Component To add a custom Component to a model or another component.	✓	✓
Dynamic content An advanced editor for structured elements.	✓	✗
Slug To add part of a URL that describes the path to a specific content item.	✓	✗
Boolean To select one of two possible values (Yes or no, 1 or 0, true or false).	✓	✓
List To select an option from a predefined list.	✓	✓
Number To add an integer or float to your content item.	✓	✓
Remote content To reference content in a remote source.	✓	✓
Slug To add part of a URL that describes the path to a specific content item.	✓	✗
Embed HTML To add an embed to your content item.	✓	✗
Date and time To add a date and time to your content item.	✓	✓
Tags To add a tag entry.	✓	✗
Location To select a location on a map or use coordinates.	✓	✓
Social To add a social media post to your content item.	✓	✓
Color To select a color or use a hex color code.	✓	✓

Basic field settings

Here are some basic field settings that are common across all field types.

Using the Text field type as an example, name the field as follows:

General fields	Description
Display name	The field label shown in the content editing interface.
ID	The value of this field is automatically generated. The technical ID of this field that is used, for example, to retrieve content through the API.

Click the Appearance tab to see the appearance options for the field.

Appearance fields	Description
Help text	An instruction to help content editors. Make instructions clearer by making text bold, italic, or bolditalic. Use the following standard Markdown syntax: *. and _ (italic) ** and __ (bold) *** and ___ (bolditalic).
Read / write	Allows the field to be edited by any user in the UI.
Read only	Disables the field in the UI and it can only be edited through the API.
Developer only	The field is only visible in the UI for users with developer permissions.

Click the Validation tab to see the validation rules for the field.

Enable This field is required if this is a mandatory field. The validation only triggers when a content item is set to the Done stage. For more details, check out the Workflow stages doc.

Text field

The text field allows content editors to add single and multi-line text elements to your content item.

Click the Settings tab to fill in the following settings:

Settings	Description
Single line	Allows only one text line to be entered
Text area	Multiple text lines without layout options
HTML editor	Multiple text lines with layout options, like heading, bold, italic, underlined, list, dynamic and external links, table, and alignment.
Initial value	You can prefill the form input automatically by setting an initial value. Enter the value in the model text field; this value can be overwritten manually.

For details on the Appearance options, check out the basic field settings.

Click the Validation tab to set up validation rules:

Validation	Description
This field is required	Prevents saving a content item if this field is empty
This field must be unique	Prevents saving a content item if this field value already exists for this field in another content item. This validation can only be enabled for a Single line type for a text field.
Allow scripts	Make it possible to copy-paste or add (HTML-)code in a content item
Limit character count	Specifies a maximum allowed number of characters. This option is useful, for example in titles when your website or app accepts a limited number of characters
Match a specific pattern	Only accepts specified regular expression (regex). Validates that the value of a field matches a specific pattern defined by a regular expression.

For your convenience, here are a number of common predefined regex rules:

• Email: An email consists of a user name, followed by ‘@’ followed by a domain name. Characters allowed in a user name are alphanumeric characters (a-z, 0-9), ‘_’, ‘.’, ‘-’.

• URL: A valid URL requires a protocol prefix (http, https) and a top-level domain, like

  • domain.com

  • www.domain.com

  • http://domain.com

  • https://domain.com

  • https://www.domain.com

  • https://www.domain.com

• Date (European): Dates in the format ‘DD/MM/YYYY’. Single-digit months and days may or may not have a leading zero. You can use / and - and . as digit-dividers:

  • d.m.yyyy

  • dd.mm.yyyy

  • d/m/yyyy

  • dd/mm/yyyy

  • d-m-yyyy

  • dd-mm-yyyy

• Date (US): Dates in the format:

  • m.d.yyyy

  • mm.dd.yyyy

  • m/d/yyyy

  • mm/dd/yyyy

  • m-d-yyyy

  • mm-dd-yyyy

• 12h Time: Accepts time values in the HH:MM:SS AM/PM format. Allowed hours are from 01 to 12, columns are required, while the use of seconds is optional. The input must contain AM/PM notation in either lower- or upper-case:

  • hh:mm AM

  • hh:mm:ss AM

  • hh:mm PM

  • hh:mm:ss PM

• 24h Time: Accepts time values with format HH:MM:SS. Allowed hours are from 01 to 24. The input cannot contain AM/PM notation:

  • hh:mm

  • hh:mm:ss

Please note that predefined regex rules don't work on HTML editor text fields. To make a regex work on a HTML editor, you need to add a custom regex, like ^(?:<(.*)>dog(?:</\g{1}))$ (instead of ^dog).

Click the AI Translate tab to enable or disable AI translation.

Settings	Description
Allow this field to be translated using AI	You can disable this toggle if you don't want this text field to be translated when an editor triggers AI translation on the content item. In this case, the text will just be copied as is.

Dynamic content field

The dynamic content field allows content editors to combine various elements. Those elements can include text, headings, lists and even components. The dynamic content field is commonly used to create articles with a variety of content and different styling for each element.

This field offers different elements, with variable options that you can manage in the model:

Click the Content types tab to enable the following elements:

Settings	Description
Heading	Enable to allow headings and choose heading 1 - 6.
Paragraph	Allow layout - Enable this option and choose from eight formatting options. Allow scripts - Make it possible to copy-paste or add (HTML-)code in a content item.
Assets	Enable to allow assets, then choose types of assets and formatting options.
Social	Enable to allow one or more of the major social platforms.
Other	Enable to include location.
Remote content	Enable to add remote content to your content items. This option is available when at least one remote source is set up in Prepr.
Components	Enable to choose previously created components. A list of components are made available to choose from when this option is enabled.

Stack field

The Stack field allows content editors to 'stack' multiple components and content items within a single field. It also allows them to personalize elements in a stack. Check out the Personalization guide for more details. The stack field is often used to structure the elements for feature-rich web pages.

Select the models and components as follows:

Settings	Description
Allowed models and components	Select all the models and components that the content editor can include in this stack.
Allow new items to be created	For each model, disable this option if the content editor should only reference existing items while compiling the stack.
Allow items from all environments	For each selected model, enable this option to allow content editors to include content items for this model from other environments within the organization. This allows the content to be shared across an organization. For more details on shared content, check out the Environments doc.

Click the Appearance tab to enable or disable the personalization and A/B testing features. If you disable them, these features will not be visible. This means content editors will not be able to add personalization or A/B testing groups to the stack in a content item based on this model.

Click the Validation tab to enable the Limit input. Enable this option to set a minimum and maximum allowed number of referenced content items and components.

Check out the Example Page pattern doc for details on how to use the stack field in your model.

Content reference field

The content reference field allows content editors to make a reference link from one content item to another.

From the General tab, select models to create a reference to one or more content items of these specific models.

Select the models and complete the settings as follows:

Settings	Description
Allowed models	Select all the models that the content editor can use within the content reference field.
Allow new items to be created	For each model, disable this option if the content editor should only reference existing items.
Allow items from all environments	For each selected model, enable this option to allow content editors to include content items for this model from other environments within the organization. This allows the content to be shared across an organization.

Click the Appearance tab to set the type that determines how the field is displayed on the content item. Choose to show a link field as a Modal window, an Autosuggest dropdown, or as Checkboxes.

Click the Validation tab to enable the Limit input. Enable this option to set a minimum and maximum allowed number of referenced content items.

Assets field

Prepr supports multiple asset types: images, files, videos, and audio files. For more details on how to work with assets, check out the Work with assets guide.

When adding a new assets field to a model/component, you can choose between a Multiple-asset field or a Single-asset field depending on the number of assets you want to add. The chosen type can be changed later in the field configuration.

From the General tab, select which Asset type is allowed in this field, such as image, video, audio, or file.

Here, you can also change the Field type you've chosen previously, from multi-asset to single-asset, and vice versa.

Click the Settings tab to fill in the following settings:

Settings	Description
Allow alignment	Enable this option to allow the content editor to align the asset.
Allow caption	Enable this option to allow the content editor to provide a caption for the asset.
Set image presets	This option can be enabled for the Image asset type to activate the crop tool for the content editor. When enabled, you can define multiple presets to allow content editors to choose image size values (aspect ratio) for cropping. Note that crop values are not based on image resolution.
Cropping is required	This setting is visible when you enable Set image presets. Enable this option to make it mandatory for the content editor to do cropping.

For more details on how to resize assets in the API, check out the GraphQL field types doc and the REST API docs.

For more details on how to use the image options, check out Edit and configure assets Edit and configure assets.

Click on the Validation tab to indicate if this field is required. For the multi-asset field type, you can also enable the Limit input option and set a minimum and a maximum number of assets allowed.

Boolean field

This field allows content editors to choose one of two possible values.

Fill in the Settings as follows:

Settings	Description
Default value	You can prefill the form input automatically by setting an initial value. Enter the value in the model list field; this value can be overwritten manually.

Appearance	Description
True condition label	Specify a label for a true value
False condition label	Specify a label for a false value

List field

The list field allows content editors to make a choice out of the given options.

From the General tab, fill the list items with key-value pairs. A key-value pair allows you to set up a list item with a technical name (a unique identifier, a key) and a user-friendly value that you see in the content items (the data, the value).

Click on the Settings tab to set an Initial value. The value entered here is automatically prefilled on the content item, but content editors can overwrite this value manually.

Number field

The number field can be useful when you want to add numerical data to your content item. For example year of birth, stock number, or product prize. The Integer and Float fields can hold 32-bit safe values.

From the General tab, you can choose the Number type: Integer or Float.

Click the Settings tab to set an Initial value. The value entered here is automatically prefilled on the content item, but content editors can overwrite this value manually.

Click the Validation tab to enable validation rules.

Validation	Description
This field is required	Prevents saving a content item if this field is empty.
This field must be unique	Prevents saving a content item if this field value already exists for this field in another content item.
Limit input	Enable this option to set a minimum and maximum allowed value.

Component field

The Component field allows content editors to include the predefined fields from a previously created component.

From the General tab, choose the component that you want this model to use.

Remote content field

The Remote content field allows editors to use content maintained in an external system in content items.

On the General tab, name the field and choose the desired remote source. For more details, see the available integrations.

Slug field

A slug is part of a URL that describes the path to the specific content item. It is the part that comes after your domain name in the URL. You can only add one slug field per model.

Fill in the Settings tab as follows:

Settings	Description
Slug template	Choose values from the list of fields in the box below. (The API names of the fields are shown.) The list of fields includes title, id, locale, country, lang, and any other text and content reference fields in a model. When a content editor creates a new content item, the slug will be auto-generated with these filed values. Note, if any of these fields are not required in a model, a slug can still be generated without those values. In other words, making a field optional in a model allows the field to be omitted when generating a slug.
Automatically generate unique slugs	When a new content item is created with a slug value that already exists, Prepr auto-generates a unique slug in the format provided slug template + '-' + #, where # is an incremented number, for example, news-article-1 or news-article-2. When this setting is disabled, no unique slug will be generated, but an error will occur to indicate a duplicate content item.

For an example on how to use the slug field, check out Review URLS.

Embed HTML field

You can easily use Prepr content on your front-end with the embed field. This kind of embedded code is short code, usually in HTML language for users to copy and paste into a website. This is useful when you want to include content in Prepr in another website.

Click the Settings tab and enter the default embedded HTML, such as iFrame code. Choose variables (embed fields) to add data dynamically from other fields.

Using plain text or HTML encoded variables

By default, you can pre-fill the title and ID of the content item, but you can also choose to add other fields to your embed structure. You can only use API IDs of fields that you have added to your model. Each text field will generate a plain text variable as well as an encoded variable.

When using embed codes, it can be necessary to use encoded URLs, so that specific characters are encoded to an HTML structure (f.e.: spaces are encoded into %20 characters). To use an encoded variable, click the .encoded field to add.

Building the embed code

Once you have added the embed HTML to your model, you will see this field in all content items of this model. All variables (API IDs) are replaced in real-time with the data you enter in your content item.

Plain text embed

Encoded embed

Using the embed code

To use the embed code on your front-end or a third-party website, simply click ' Copy code' to save the embed code to your clipboard.

Date and time field

The field Date and time allows content editors to add dates and times to your content items.

From the General tab, choose a Type as follows:

• Date - A date-only field
• Date range - A start date and end date
• Business hours - A day and time picker to enter AM and PM openings hours.

Click the Settings tab and fill the settings as follows:

Settings	Description
Allow time selection (hh:mm)	Enable this option to add a time to your date or date range.
Allow extra dates	Enable this option to use multiple date or date ranges.

Tags field

This field allows content editors to add tags to your content item.

In the Appearance settings, choose one of the follow Type values:

• Free tag entry
• Restrict entry to tag group
  • For the Restrict entry to tag group option, choose a predefined tag group and choose either Checkboxes / Radiobuttons or Autosuggest

If you have the SEO score option selected in a model, tag suggestions will be visible as the Free tag entry field. For example:

Location field

The field Location allows content editors to add Google Maps geo-points (coordinates or an address) to your content item.

See the Basic field settings on how to add a Location field to a model. Check out Adding elements to a content field for an example on how location content is added.

Social field

Prepr supports several social embeddings. You can select one of them for each social field. In a content item, editors can copy and paste a social URL. Prepr will generate a preview of the social post.

From the General tab, select the type as follows:

Color field

The color field allows content editors to choose a color. For example, this is useful when you want to manage your front-end styling in Prepr.

Click the Settings tab to set an initial value. This means that the value is prefilled on the content item automatically. This value can be overwritten manually.

Resource field

The resource field is used to link to an internal or external webpage and can be added to a component as a field.

For more details on how to use the resource field in a content item, check out External linking options.