Field Types / Common options

Note: You are currently reading the documentation for Bolt 3.7. Looking for the documentation for Bolt 5.2 instead?

All fields have few common options to further customize them. We explain them in more detail below.

Grouping fields in tabs¶

If you have a number of fields in your ContentType, it might be convenient to add grouping to the fields, by using tabs. It will look like this:

To do this, simply add group to the fields that you would like to place under a certain tab. You don't need to specify all of the fields with a grouping, just the ones that are the first on a tab. Any subsequent fields without a specified group will fall under the previously set grouping.

For example:

pages:
    name: Pages
    singular_name: Page
    fields:
        title:
            type: text
            class: large
            group: content
        slug:
            type: slug
            uses: title
        body:
            type: html
        image:
            type: image
            group: media
        file:
            type: file
        ..

Prefix and Postfix¶

Sometimes it can be beneficial to add some extra text, labels or other markup to how a field is displayed in the Bolt backend, when editing a record. You can use the optional prefix and postfix values to add some markup before or after a field. For example:

        subtitle:
            type: text
            class: large
            prefix: "<p>Add a subtitle, if you want.</p>"
            postfix: "<hr>"

As you can see, using postfix: "<hr>" gives a simple and effective way of adding a divider in the edit screen.

You can set the field option separator : true to make Bolt insert an <hr>-tag after the field.

Because the prefix & postfix values are parsed as markdown, you can insert basic markup like links, e.g. [Bolt](https://bolt.cm), or font style, e.g. *strong* _underline_.

Info¶

In the case where you want to provide a large volume of informational text about the use and purpose of a field, the value of the info parameter can be used.

The info parameter will place a button beside the field label that, when hovered over, will display a popup with the info text.

For fields that have an info button by default (e.g. image field), the info description will override that field type default.

Default values¶

When you want to give a record a default value, use default:. For most fields this will set the initial value of the field, when you're creating a new record of this ContentType. For date and datetime fields, the value is passed through strtotime, meaning that you can use a fixed date as default, like "1900-01-01 12:00:00", but also relative dates like "first day of this month", "next Monday" or "yesterday".

For select fields, you can use one of the values that you define. For example:

    colors:
        type: select
        values: [ red, green, blue ]
        default: green

If your select field is using a list of records from another ContentType as its values, and you want to define a default, you will need to use the ID of the record that you want to set as the default.

Required and patterns¶

You can use the required option to make a field required. Combine it with the pattern option to make sure that a field contains an email-address, or that a title is no longer than a certain amount of characters. Note that the requirements are only enforced in the browser, so don't "trust" any data that's been entered by an editor. When a field does not validate, a default message is shown that, "the x field is required or needs to match a pattern". You can set a custom error message for a field with the error option. for example error: "The title field is required and must be no longer than 40 characters"

Currently, you can use the required option for fields of type text, textarea, html, date, datetime, float and integer.

For example, to make a title required, you can do this:

        title:
            type: text
            prefix: "<p>A title is required.</p>"
            required: true
            class: large

If combined with a pattern, you can add frontend validation to the field. By doing this, you can require that the values of a field are within certain parameters. You can use either one of the predetermined patterns like email or url, or any regular expression. Currently, the pattern option is only available for text fields. Examples of patterns that can be used, can be found on the website html5pattern.com. Some common use-cases are:

For example, use this to make sure a title is no longer than 80 characters:

        title:
            type: text
            prefix: "<p>A title is required. The maximum length is 80 characters</p>"
            required: true
            pattern: "^.{1,80}$"
            class: large

The ^ and $ in some of the examples note the beginning and end of the value respectively. If we would omit these, the results would be off. For example, .{1,10} would match any value that has "between 1 and 10 characters" in it, regardless of what comes before or after it. Probably not what you're looking for.

Note: You should not try to use a pattern to match an email address. Always use email to validate an email address.

You can also define fields that are not required, but that do have a pattern. Doing this, the field can be left blank, but if it is filled, it must match the pattern. For example, you could make an optional email-address like this:

        person:
            type: text
            prefix: "<p>An optional email address.</p>"
            required: false
            pattern: email

Note: If you have a required field, you should always include a postfix. Otherwise the editor might not know what's expected of them.

Readonly fields¶

You can use the readonly option to lock the content in a field. For example if you have generated some entries with an import that users should not change. You can combine it with the default option to make sure that a field contains something. The readonly status is only enforced in the browser, so don't "trust" any data that's been entered by an editor.

        serialnumber:
            type: text
            default: "SN-123456789"
            readonly: true