---
agentTools:
  projectIndex: https://opencontent.readme.io/v3.5/llms.txt
---

# Field types

Field types in edit and template settings forms

The definition of field is partially in schema.json (data definition) and partially in options.json (ui definition)

[block:api-header]
{
  "type": "basic",
  "title": "Text"
}
[/block]

**schema type** : string
**options type** : text
[more info](http://www.alpacajs.org/docs/fields/text.html)

[block:code]
{
  "codes": [
    {
      "code": "\"type\":\"string\",\n\"title\":\"my field name\"",
      "language": "json",
      "name": "schema.json"
    },
    {
      "code": "\"type\":\"text\",\n\"helper\" : \"my helper tooltip\"",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

* You can use a Pattern as for validation. This is Alpaca functionality but as the regex is stored in JSON you will need to escape a slashes or you will get an error.

[block:code]
{
  "codes": [
    {
      "code": "\"type\":\"string\",\n\"title\":\"my field name\",\n\"pattern\": \"[\\\\d\\\\s]+\"",
      "language": "json",
      "name": "schema.json"
    }
  ]
}
[/block]

[block:api-header]
{
  "type": "basic",
  "title": "Dropdown"
}
[/block]

**schema type** : string, (and array for checkbox list in dropdown)
**options type** : select
[more info](http://www.alpacajs.org/docs/fields/select.html)

[block:code]
{
  "codes": [
    {
      "code": "\"type\":\"string\", \n\"enum\": [\"Vanilla\", \"Chocolate\", \"Coffee\", \"Strawberry\", \"Mint\"]",
      "language": "json",
      "name": "schema.json"
    },
    {
      "code": " \"type\": \"select\",\n \"optionLabels\": [\"Vanille\", \"Chocolat\", \"Café\", \"Fraise\", \"Comme\"],\n\"removeDefaultNone\": true",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

[block:api-header]
{
  "type": "basic",
  "title": "Select2 (advanced)"
}
[/block]

**schema type** : string, (and array for checkbox list in dropdown)
**options type** : select2

Select2 is a dropdown that can get his items from a webapi call thu serviceFramemork

see [Select2](https://opencontent.readme.io/docs/select2) for more detailed information.

[block:api-header]
{
  "type": "basic",
  "title": "Radio buttons"
}
[/block]

**schema type** : string, number
**options type** : radio
[more info](http://www.alpacajs.org/docs/fields/radio.html)

[block:api-header]
{
  "type": "basic",
  "title": "Checkbox"
}
[/block]

**schema type** : boolean (and array for checkbox list)
**options type** : checkbox
[more info](http://www.alpacajs.org/docs/fields/checkbox.html)

[block:api-header]
{
  "type": "basic",
  "title": "Url"
}
[/block]

(textbox with auto complete search in dnn pages)
schema type : string
options type : url
dnn specific

[block:api-header]
{
  "type": "basic",
  "title": "Email"
}
[/block]

**schema type** : string
**options type** : email
[more info](http://www.alpacajs.org/docs/fields/email.html)

[block:api-header]
{
  "title": "Date / Time"
}
[/block]

**schema type** : string
**options type** : date
**options** : "dateformat": "DD-MM-YYYY" (or any other .NET date time format)

[block:api-header]
{
  "type": "basic",
  "title": "Image"
}
[/block]

(with instant upload and auto complete image search in specified folder)
**schema type** : string
**options type** : image

[block:code]
{
  "codes": [
    {
      "code": " \"Image\": {\n    \"type\": \"image\",\n    \"helper\": \"Url of the image\",\n    \"typeahead\": {\n        \"Folder\": \"Images\"\n    },\n    \"uploadfolder\" : \"Images\",\n    \"uploadhidden\" : false\n}",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

Remarks :

* Uploaded files are stored in : /Portals/\[portalid]/OpenContent/Files
* "uploadhidden" : false/true available from version 1.4

[block:api-header]
{
  "type": "basic",
  "title": "Image2 (a fileId is stored instead of path)"
}
[/block]

**schema type** : string
**options type** : image2

[block:code]
{
  "codes": [
    {
      "code": " \"ImageId\": {\n    \"type\": \"image2\",\n    \"helper\": \"Select FileId of the image\",\n    \"folder\": \"Images\"\n}",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

Remarks

* based on select2
* no upload function
* only suitable for searching max 1000 items

[block:api-header]
{
  "type": "basic",
  "title": "Image crop (single ratio)"
}
[/block]

[block:code]
{
  "codes": [
    {
      "code": " \"Photo\": {\n            \"label\": \"Group Photo\",\n            \"type\": \"imagecrop\",            \n            \"cropper\": {\n                \"aspectRatio\": 1               \n            },\n            \"uploadfolder\": \"Files/images/GroupPhotos/\",\n            \"uploadhidden\": false,\n            \"manageurl\": \"/webmanagement/filemanager\"\n        },\n",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/39aa6eb-oc-image-cropper.JPG",
        "oc-image-cropper.JPG",
        604,
        304,
        "#777378"
      ]
    }
  ]
}
[/block]

[block:code]
{
  "codes": [
    {
      "code": " <img src=\"{{Image.url}}?crop={{Image.x}},{{Image.y}},{{Image.width}},{{Image.height}}&width=2000&height=400&bgcolor=fff\" alt=\"{{Title}}\">",
      "language": "handlebars",
      "name": "template.hbs"
    }
  ]
}
[/block]

need <http://imageprocessor.org>

[block:api-header]
{
  "type": "basic",
  "title": "Image crop 2 (single ratio) with dropdown list (select2)"
}
[/block]

[block:code]
{
  "codes": [
    {
      "code": " \"Photo\": {\n            \"label\": \"Image\",\n            \"type\": \"imagecrop2\",            \n            \"width\": 200,\n            \"height\": 100,\n            \"uploadfolder\": \"Files/images/GroupPhotos/\",\n            \"cropfolder\": \"Files/images/GroupPhotos/\",\n            \"uploadhidden\": false,\n            \"manageurl\": \"/webmanagement/filemanager\",\n            \"cropButtonHidden\" : false,\n            \"multiple\": false\n        },\n",
      "language": "json",
      "name": "options.json"
    },
    {
      "code": " \"Photo\": {\n            \"label\": \"Image\",\n            \"type\": \"imagecrop2\",            \n            \"cropper\": {\n                \"aspectRatio\": 1               \n            },\n            \"uploadfolder\": \"Files/images/GroupPhotos/\",\n   \t\t\t\t\t\"cropfolder\": \"Files/images/GroupPhotos/\",\n            \"uploadhidden\": false,\n            \"manageurl\": \"/webmanagement/filemanager\",\n   \t\t\t\t\t\"cropButtonHidden\" : false\n        },\n",
      "language": "text",
      "name": "options.json (with ratio)"
    }
  ]
}
[/block]

[block:code]
{
  "codes": [
    {
      "code": " <img src=\"{{Image.cropUrl}}\" alt=\"{{Title}}\">\n \n <!-- OR with \"cropButtonHidden\" : true  and image handler-->\n \n<img src=\"{{Image.url}}?crop={{Image.x}},{{Image.y}},{{Image.width}},{{Image.height}}&width=2000&height=400&bgcolor=fff\" alt=\"{{Title}}\">\n \n \n \n \n ",
      "language": "handlebars",
      "name": "template.hbs"
    }
  ]
}
[/block]

[block:api-header]
{
  "type": "basic",
  "title": "Image cropper"
}
[/block]

schema type: string
option type: imagecropper

[block:code]
{
  "codes": [
    {
      "code": " \"Photo\": {\n            \"label\": \"Group Photo\",\n            \"type\": \"imagecropper\",\n            \"helper\": \"select the group photo of your choice and select the appropriate region's\",\n            \"cropper\": {\n                \"aspectRatio\": 1,\n                \"minContainerWidth\": 500,\n                \"minContainerHeight\": 300\n            },\n            \"croppers\": {\n                \"sq300x300\": {\n                    \"width\": 300,\n                    \"height\": 300\n                },\n                \"sq100x100\": {\n                    \"width\": 100,\n                    \"height\": 100\n                },\n                \"land1080x720\": {\n                    \"width\": 1080,\n                    \"height\": 720\n                },\n                \"port720x1080\": {\n                    \"width\": 720,\n                    \"height\": 1080\n                }\n            },\n            \"typeahead\": {\n                \"Folder\": \"Files/images/GroupPhotos/\"\n            },\n            \"cropfolder\": \"thumbs/GroupPhotos\",\n            \"uploadfolder\": \"Files/images/GroupPhotos/\",\n            \"uploadhidden\": false,\n            \"manageurl\": \"/webmanagement/filemanager\"\n        },\n",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

[block:api-header]
{
  "type": "basic",
  "title": "File (with instant upload and auto complete search)"
}
[/block]

**schema type** : string
**options type** : file
Uploaded files are stored in : /Portals/\[portalid]/OpenContent/Files

[block:code]
{
  "codes": [
    {
      "code": " \"File\": {\n    \"type\": \"file\",\n    \"helper\": \"Url of the file\",\n    \"typeahead\": {\n        \"Folder\": \"Files\"\n    },\n    \"uploadfolder\" : \"Files\",\n    \"downloadButton\":true\n}",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

[block:api-header]
{
  "type": "basic",
  "title": "File2 (based on select2)"
}
[/block]

[block:code]
{
  "codes": [
    {
      "code": "\"File\": {\n    \"type\": \"file2\",\n    \"filter\":\"^.*\\.(jpg|JPG|gif|GIF|doc|DOC|pdf|PDF)$\",\n    \"folder\":\"Files\",\n    \"showFileUpload\":true,\n    \"showUrlUpload\":true  \n}",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

[block:api-header]
{
  "title": "Folder2 (based on select2)"
}
[/block]

[block:code]
{
  "codes": [
    {
      "code": "\"Folder\": {\n    \"type\": \"folder2\",\n    \"filter\":\"\",\n    \"folder\":\"Files\"\n}",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

[block:api-header]
{
  "type": "basic",
  "title": "Textarea"
}
[/block]

**schema type** : string
**options type** : textarea
[more info](http://www.alpacajs.org/docs/fields/textarea.html)

[block:api-header]
{
  "type": "basic",
  "title": "Rich text with CKEditor"
}
[/block]

( CKEditor <http://ckeditor.com> )
**schema type** : string
**options type** : ckeditor
configset: basic, standard, full. ('basic' is default. 'standard' includes div and table support. 'full' allows any code)
dnn specific
require dnnckeditor (<https://dnnckeditor.codeplex.com>)

[block:code]
{
  "codes": [
    {
      "code": "{\n   \"fields\": {\n      \"CKEditor1\": {\n         \"title\": \"CkEditor With Style Set\",\n         \"type\": \"ckeditor\",\n         \"ckeditor\":{\n               \"extraAllowedContent\": \"table tr th td div span(*);\",\n               \"stylesSet\" : [\n                { \"name\": \"Blue Title\", \"element\": \"h3\",\"styles\": { \"color\": \"Blue\" } },\n                { \"name\": \"Red Title\",  \"element\": \"h3\",\"styles\": { \"color\": \"Red\" } }\n               ]\n         }\n      },\n      \"CKEditor2\": {\n         \"title\": \"CkEditor With Predefined Config Set\",\n         \"type\": \"ckeditor\",\n         \"configset\": \"full\"\n      }\n   }\n}",
      "language": "json",
      "name": "options.json"
    },
    {
      "code": "{\n    \"type\": \"object\",\n    \"properties\": {\n         \"Title\": {\n            \"title\": \"Title\",\n            \"type\": \"string\"\n         },\n         \"CKEditor1\": {\n            \"title\": \"Text\",\n            \"type\": \"string\"\n         }\n      }\n}",
      "language": "json",
      "name": "schema.json"
    },
    {
      "code": "<h2>{{Title}}</h2>\n<hr>\n{{{CKEditor1}}}\n",
      "language": "text",
      "name": "template.hbs"
    }
  ]
}
[/block]

[more info about ckeditor config](http://docs.ckeditor.com/#!/api/CKEDITOR.config)

[block:api-header]
{
  "type": "basic",
  "title": "Rich text with Wysihtml"
}
[/block]

(wysihtml <http://wysihtml.com>)
**schema type** : string
**options type** : wysihtml
dnn specific

[block:api-header]
{
  "title": "Rich Text with Summernote"
}
[/block]

The Summernote editor is a very compact WYSIWYG editor.
An important characteristic of this editor is that it will not upload images to the server but it will inject them Base-64 encoded inside the text.
So you should probably not use this editor for large images inside a text.

<http://summernote.org/>

[block:code]
{
  "codes": [
    {
      "code": "{\n    \"type\": \"object\",\n    \"properties\": {\n        \"ModuleTitle\": {\n            \"title\": \"Main Title\",\n            \"type\": \"string\"\n        },\n\t\t\t\t\"Text\": {\n\t\t\t\t\"title\": \"Text\",\n\t\t\t\t\"type\": \"string\"\n\t\t\t}\n     }\n}",
      "language": "json",
      "name": "schema.json"
    },
    {
      "code": "{\n    \"fields\": {\n\t\t\"ModuleTitle\": {\n            \"type\":\"text\"\n        },\n\t\t\"Text\": {\n\t\t\t\"title\": \"Text\",\n\t\t\t\"type\": \"summernote\"\n\t\t\t}\n    }\n}",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

[block:api-header]
{
  "type": "basic",
  "title": "List of items"
}
[/block]

schema type : array
options type : array
[more info](http://www.alpacajs.org/docs/fields/array.html)

[block:api-header]
{
  "type": "basic",
  "title": "Table of items"
}
[/block]

**schema type** : array
**options type** : table
[more info](http://www.alpacajs.org/docs/fields/table.html)

[block:api-header]
{
  "title": "Accordion"
}
[/block]

**schema type** : array
**options type** : accordion

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/a489dcb-accordionfield.JPG",
        "accordionfield.JPG",
        885,
        683,
        "#f2f2f2"
      ]
    }
  ]
}
[/block]

titleField : a fieldname of the items shows in the accoreon used as title of the accordeon

[block:code]
{
  "codes": [
    {
      "code": "\"myfield\": {\n  \"type\": \"accordion\",        \n  \"titleField\": \"fieldname\" \n}",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

inherit from array [more info on array](http://www.alpacajs.org/docs/fields/array.html)

[block:api-header]
{
  "type": "basic",
  "title": "Dependency between fields"
}
[/block]

[Dependencies](http://www.alpacajs.org/docs/api/dependencies.html)
[Conditional Dependencies](http://www.alpacajs.org/docs/api/conditional-dependencies.html)

[block:api-header]
{
  "type": "basic",
  "title": "Multi-Lingual Field types"
}
[/block]

To support multi-lingual scenario's you can use the ML variant of certain fields.
In doing so you will be presented with the possibility to add the content in the different activated languages (even if content localization is still disabled)
Currently the following field types have a multi-lingual variant:

**Multi lingual Text**
schema type : string
options type : mltext

[block:code]
{
  "codes": [
    {
      "code": "\"ProductName\": {\n   \"title\": \"Product name\",\n   \"type\": \"mltext\"\n}",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

**Multi lingual CKeditor**
schema type : string
options type : mlckeditor

**Multi lingual wysihtml**
schema type : string
options type : mlwysihtml

**Multi lingual url**
schema type : string
options type : mlurl

**Multi lingual Image**
schema type : string
options type : mlimage

**Multi lingual File**
schema type : string
options type : mlfile

[block:api-header]
{
  "type": "basic",
  "title": "Icon Field"
}
[/block]

**schema type** : string
**options type** : icon

[block:code]
{
  "codes": [
    {
      "code": " \"Icon\": {\n   \"title\": \"Icon\",\n   \"type\": \"string\"\n}",
      "language": "json",
      "name": "schema.json"
    },
    {
      "code": "\"Icon\": {                        \t\n\t\"type\": \"icon\",\n  \"glyphicons\" : false,\n  \"fontawesome\" : true          \n}",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

[block:api-header]
{
  "title": "User2 Field"
}
[/block]

[block:code]
{
  "codes": [
    {
      "code": " \"User\": {\n   \"title\": \"User\",\n   \"type\": \"string\"\n}",
      "language": "json",
      "name": "schema.json"
    },
    {
      "code": "\"User\": {                        \t\n\t\"type\": \"user2\",\n  \"lazyLoading\" : false,\n  \"role\" : \"Editor\"          \n}",
      "language": "json",
      "name": "options.json"
    }
  ]
}
[/block]

role : filter users on role
**Note:** If you need to select multiple roles, in schema.json, set `"type": "array"`.