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 a user sees when they edit the content item.
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: * or _ (italic) ** or __ (bold) *** or ___ (bolditalic).
Show help text as tooltip	When this option is enabled, the help text will be displayed in a tooltip when a content editor hovers over the icon. If not enabled, help text will be displayed below the field. This option makes longer help text more readable and keeps content items uncluttered.
Default	The default UI setting. This option 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.
Hidden for non developers	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.

If you choose the HTML editor text field, then you can also enable/disable Heading options in the settings:

Enable the Heading option to allow headings and choose which of the headings (1 - 6) will be available to content editors.

When you enter an Initial value and content items already exist for the model, a confirmation modal appears. Click the Yes, apply, button in the modal to automatically update all linked content items with this value.

For details on 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

• 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).

Item title and SEO fields

By default, the first text element in your model or component is used as a title. This label is used to display the item in lists. You can manually change the title to another text element by clicking the icon and choosing the Set as title action for that field. You can also update text fields settings to Set as SEO title or Set as meta description.

The text field labels in the model overwrite the text field labels in a component used in the same content item. For example: If the title in a Page is set as the SEO title and the page content item includes a Header component with a text field that is also set as an SEO title, then the model text field will be used as the SEO title for the page content item.

AI features

You can enable AI features in the Text field for content editors to automatically translate, generate or optimize text in their content items.

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.

Click the AI Generate tab to enable this feature and to set the AI prompt.

Settings	Description
Allow AI text generation	Enable this toggle to allow AI generation on this field.
Set prompt for text generation	Choose one of the suggested prompts listed below or create your own prompt (opens in a new tab) to define the parameters on how AI should generate the text. You can add the other text fields in the model to your prompt.

Click the AI Optimize tab to enable this feature and choose the actions that editors can use to improve the text.

Settings	Description
Allow AI text improvement	Enable this toggle to allow this text field to be improved.
Select the actions available to editors to improve text	When selected, the actions below will be made available to content editors to improve the text in this field: Improve writing, Fix spelling and grammar, Make shorter, Make longer, Simplify language

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 web pages.

When you add a stack field to a model or component, you can choose to create a single stack. For example: if a page content item can only have one header. The chosen type can be changed later in the field configuration.

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 Settings tab to disable the Allow multiple content references and components. Disable this option to limit the content editor to adding a single referenced item or a single component in the stack of the model or component.

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.

Click the A/B testing tab to enable or disable the A/B testing. If you disable it, this feature will not be available to content editors to add A/B testing groups to this stack field.

Click the Adaptive content tab to enable or disable the Adaptive content feature. If you disable it, content editors will not be able to personalize elements in this stack field.

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.

When you add a content reference field to a model or component, you can choose to create a single content reference. The chosen type can be changed later in the field configuration.

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 Settings tab to disable the Allow multiple content references. Disable this option to limit the content editor to adding a single referenced item to the model or component.

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.

Assets field settings

Click the Settings tab to fill in the following settings for an Assets field:

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	Enable this option for content editors to crop images. When enabled, you can define multiple presets for cropping. The Image presets are image size (aspect ratio) templates you can define for different device types or use cases. For example, you may want to define a preset for displaying images on mobile or using them in a banner. 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	The content item will have this value set automatically. A content editor can overwrite this value manually.

If content items already exist for the model, a confirmation modal appears. Click the Yes, apply, button in the modal to automatically update all linked content items with the Default value.

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 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.

When you enter an Initial value and content items already exist for the model, a confirmation modal appears. Click the Yes, apply, button in the modal to automatically update all linked content items with this value.

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.

When you enter an Initial value and content items already exist for the model, a confirmation modal appears. Click the Yes, apply, button in the modal to automatically update all linked content items with this value.

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.

Go to the Appearance tab, to choose the display options.

Option	Description
Display fields as a group	Enabled by default to display the component fields in a group with a title separated from other fields in the content item. When this toggle is disabled, component fields are displayed like any other content item field.

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.