Fieldtypes

In Cockpit you can build custom content models defined by a collection of different field types.

Access-List


Provides chooser for available Access groups

Account-Link


Link one or more user accounts

Options

{
    "multiple": false,
    "limit": null,
}

Asset


An asset field can reference an asset (e.g. file or pdf) you've uploaded in Cockpits Asset-Manager.

Boolean


A boolean field for true and false values.

Options

{
    "label": false,
    "default": false,
    "cls": "" // custom class
}

Code


Provides a code editor field.

Options

{
    "syntax": "text",
    "height": "auto"
}

Collection-Link


Link other collection items.

Options

{
    "link": "collectionname",
    "display": "fieldname",
    "multiple": false,
    "limit": false
}

Color


Provides a color chooser field (based on Spectrum.js).

Options

{
    "spectrum": {/* spectrum settings */}
}

Colortag


Provides chooser for predefined colors

Options

{
    "size": "inherit",
    "colors": [/* list of hex color codes */]
}

Date


Provides a date chooser field (based on Spectrum.js).

Options

{
    "weekstart": 0,
    "format": "YYYY-MM-DD",
    "cls": "",
    "placeholder": ""
}

File


Provides a file chooser field (using Cockpits built-in finder module).

Options

{
    "cls": "",
    "placeholder": "No file selected..."
}

Gallery


Manage images and additional meta information for each image.

Options

{
    "meta": {
        "title": {
            "type": "text",
            "label": "Title"
        }
    }
}

Html


Html editor field with preview.

Options

{
    "iframe"         : false,
    "mode"           : "split",
    "markdown"       : false,
    "enablescripts"  : false,
    "height"         : 500,
    "maxsplitsize"   : 1000,
    "codemirror"     : { /* codemirror settings */ },
    "toolbar"        : [ "bold", "italic", "strike", "link", "image", "blockquote", "listUl", "listOl" ],
    "lblPreview"     : "Preview",
    "lblCodeview"    : "HTML",
    "lblMarkedview"  : "Markdown"
}

Image


Choose an image and manage additional meta information.

Options

{
    "meta": {
        "title": {
            "type": "text",
            "label": "Title"
        }
    }
}

Layout


Layout editor

Options

{
    "components": {
        /* Custom components */
    }
}

Layout-Grid


Layout editior with preselected grid component

Location


Location chooser to get lat,lng values.

Options

{
    "zoomlevel": 13
}

Markdown


Markdown editor field with preview.

Options

{
    "height": 500
}

Multipleselect


Select multiple values from a pre-defined list of options.

Options

{
    "options": "Option 1, Option 2, Option 3"
}

Object


JSON object editor.

Options

{
    "height": "300px",
    "cls": ""
}

Password


Password field.

Options

{
    "cls": ""
}

Rating


Rating field.

Options

{
    "mininmum": 0,
    "maximum": 5,
    "precision": 0
}

Repeater


Manage multiple values of fields.

Options

{
    "field": {"type": "text", "label": "Name"},
    "display": null, // display value on re-order
    "limit": null
}

or add field chooser

{
    "fields": [
        {"type": "text", "label": "Name"},
        {"type": "html", "label": "Html Code"}
    ]
}

Select


Provides a selectbox.

Options

{
    "cls": "",
    "options": "Option 1, Option 2, Option 3",
    "default": "Option 2"
}

Set


Provides a field group.

Options

{
    "fields": [
        {"name":"name", "type": "text"},
        {"name":"about", "type": "html"}
    ]
}

Tags


Manage a list of tags.

Options

{
    "autocomplete": [],
    "placeholder": "Add Tag..."
}

Text


Simple text input.

Options

{
  "cls": "",
  "maxlength": null,
  "minlength": null,
  "step": null,
  "placeholder": null,
  "pattern": null,
  "size": null,
  "slug": true
}

Textarea


Simple textarea field.

Options

{
  "cls": "",
  "allowtabs": true,
  "maxlength": null,
  "minlength": null,
  "placeholder": null,
  "cols": null,
  "rows": null
}

Time


Time picker field.

Options

{
  "cls": ""
}

WYSIWYG


A WYSIWYG editor field.

Options

{
  "cls": "",
  "rows": null,
  "editor": { /* tinyMCE settings */ }
}