Field types

Field types

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

List of field types

FieldsModelComponent
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

General fieldsDescription
Display nameThe field label a user sees when they edit the content item.
IDThe 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 settings

Appearance fieldsDescription
Help textAn 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 tooltipWhen 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.
DefaultThe default UI setting. This option allows the field to be edited by any user in the UI.
Read onlyDisables the field in the UI and it can only be edited through the API.
Hidden for non developersThe field is only visible in the UI for users with developer permissions.

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

validation

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:

Text settings

SettingsDescription
Single lineAllows only one text line to be entered
Text areaMultiple text lines without layout options
HTML editorMultiple text lines with layout options, like heading, bold, italic, underlined, list, dynamic and external links, table, and alignment.
Initial valueYou 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:

heading display options

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

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

Click the Validation tab to set up validation rules:

Text validation settings

ValidationDescription
This field is requiredPrevents saving a content item if this field is empty
This field must be uniquePrevents 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 scriptsMake it possible to copy-paste or add (HTML-)code in a content item
Limit character countSpecifies 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 patternOnly 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), ‘_’, ‘.’, ‘-’. match a specific pattern

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

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

item title

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.

Data privacy Since we are using the OpenAI API, data will be stored for 30 days (by default, for violation checks), but will not be used for AI training purposes.

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

Text AI Translate

SettingsDescription
Allow this field to be translated using AIYou 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.

Text AI Generate

SettingsDescription
Allow AI text generationEnable this toggle to allow AI generation on this field.
Set prompt for text generationChoose 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.

For text fields in components, you can add fields from any model to the prompt. For example: In the SEO component, generate the Meta title field from the Page Title with the prompt: Generate a meta title with an absolute maximum of 60 characters based on {@Page.title}.

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

Text AI Improve

SettingsDescription
Allow AI text improvementEnable this toggle to allow this text field to be improved.
Select the actions available to editors to improve textWhen 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:

SettingsDescription
HeadingEnable to allow headings and choose heading 1 - 6.
ParagraphAllow 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.
AssetsEnable to allow assets, then choose types of assets and formatting options.
SocialEnable to allow one or more of the major social platforms.
OtherEnable to include location.
Remote contentEnable to add remote content to your content items. This option is available when at least one remote source is set up in Prepr.
ComponentsEnable to choose previously created components. A list of components are made available to choose from when this option is enabled.

Dynamic content content types

Dynamic content content types 2

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:

SettingsDescription
Allowed models and componentsSelect all the models and components that the content editor can include in this stack.
Allow new items to be createdFor each model, disable this option if the content editor should only reference existing items while compiling the stack.
Allow items from all environmentsFor 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.

new-stack-field

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.

stack field settings

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.

stack-field-validation

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.

Enable A/B testing

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.

Enable adaptive content

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:

SettingsDescription
Allowed modelsSelect all the models that the content editor can use within the content reference field.
Allow new items to be createdFor each model, disable this option if the content editor should only reference existing items.
Allow items from all environmentsFor 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.

general

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.

content reference settings

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.

When you choose the Modal window, you will be able to upgrade this content reference field to a Stack field from the model at a later stage, if needed. For example, for personalization purposes.

appearance

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

validation

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.

Multiple-asset and single-asset field

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

Click the Settings tab to fill in the following settings:

SettingsDescription
Allow alignmentEnable this option to allow the content editor to align the asset.
Allow captionEnable this option to allow the content editor to provide a caption for the asset.
Set image presetsThis 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 requiredThis setting is visible when you enable Set image presets. Enable this option to make it mandatory for the content editor to do cropping.

assets-settings

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.

assets-validation

Boolean field

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

Fill in the Settings as follows:

SettingsDescription
Default valueYou 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.

boolean initial value

AppearanceDescription
True condition labelSpecify a label for a true value
False condition labelSpecify a label for a false value

Boolean field

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

list field

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.

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

Number field

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.

Number settings

Click the Validation tab to enable validation rules.

ValidationDescription
This field is requiredPrevents saving a content item if this field is empty.
This field must be uniquePrevents saving a content item if this field value already exists for this field in another content item.
Limit inputEnable 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.

Component-field

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

component settings modal

OptionDescription
Display fields as a groupEnabled 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.

⚠️

The Remote content field is available when at least one remote source is set up in Prepr).

Remote content field

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:

SettingsDescription
Slug templateChoose 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 slugsWhen 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.

slug-settings

You can also include linked content items in your slug construct. If you have linked models, then the id and slug fields of the linked model will be available to add to the construct.

An example model with a content reference:

using parent content item

If you want to add the title in the slug, and refer to the linked content item, use the variable {publication.id}. Your slug construct should be:

slug construct

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.

embed html settings

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.

embed html

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

plain text embed

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

date-and-time

Click the Settings tab and fill the settings as follows:

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

date-and-time-settings

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

Tags settings

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

suggestions

A Tag group is a way to group related tags, for example, a tag group called Article category has a list of tags each of which is an article category. Go to Settings → Tag groups → Add tag group to create a new tag group.

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:

social

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.

color initial value

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.

resource

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

Was this article helpful?

We’d love to learn from your feedback