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)
Text
schema type : string
options type : text
more info
"type":"string",
"title":"my field name"
"type":"text",
"helper" : "my helper tooltip"
Dropdown
schema type : string, (and array for checkbox list in dropdown)
options type : select
more info
"type":"string",
"enum": ["Vanilla", "Chocolate", "Coffee", "Strawberry", "Mint"]
"type": "select",
"optionLabels": ["Vanille", "Chocolat", "Café", "Fraise", "Comme"],
"removeDefaultNone": true
Select2 (advanced)
schema type : string, (and array for checkbox list in dropdown)
options type : select2
Select2 is a dropdown that can get his options from a webapi call thu serviceFramemork
"type": "select2",
"dataService": {
"data" : {},
"module" : "OpenContent",
"controller":"OpenContentAPI",
"action":"Lookup"
}
Radio buttons
schema type : string, number
options type : radio
more info
Checkbox
schema type : boolean (and array for checkbox list)
options type : checkbox
more info
Url
(textbox with auto complete search in dnn pages)
schema type : string
options type : url
dnn specific
Email
schema type : string
options type : email
more info
Image
(with instant upload and auto complete image search in specified folder)
schema type : string
options type : image
Uploaded files are stored in : /Portals/[portalid]/OpenContent/Files
"Image": {
"type": "image",
"helper": "Url of the image",
"typeahead": {
"Folder": "Images"
},
"uploadfolder" : "Images",
"uploadhidden" : false
}
Remarks : "uploadhidden" : false/true available from version 1.4
Image2 (a fileId is stored instead of path)
schema type : string
options type : image2
- based on select2
- no upload
"ImageId": {
"type": "image2",
"helper": "Select FileId of the image",
"folder": "Images"
}
Image crop (single ratio)
"Photo": {
"label": "Group Photo",
"type": "imagecrop",
"cropper": {
"aspectRatio": 1
},
"uploadfolder": "Files/images/GroupPhotos/",
"uploadhidden": false,
"manageurl": "/webmanagement/filemanager"
},
<img src="{{Image.url}}?crop={{Image.x}},{{Image.y}},{{Image.width}},{{Image.height}}&width=2000&height=400&bgcolor=fff" alt="{{Title}}">
need http://imageprocessor.org
Image cropper (multiple ratios) beta
schema type: string
option type: imagecropper
"Photo": {
"label": "Group Photo",
"type": "imagecropper",
"helper": "select the group photo of your choice and select the appropriate region's",
"cropper": {
"aspectRatio": 1,
"minContainerWidth": 500,
"minContainerHeight": 300
},
"croppers": {
"sq300x300": {
"width": 300,
"height": 300
},
"sq100x100": {
"width": 100,
"height": 100
},
"land1080x720": {
"width": 1080,
"height": 720
},
"port720x1080": {
"width": 720,
"height": 1080
}
},
"typeahead": {
"Folder": "Files/images/GroupPhotos/"
},
"cropfolder": "thumbs/GroupPhotos",
"uploadfolder": "Files/images/GroupPhotos/",
"uploadhidden": false,
"manageurl": "/webmanagement/filemanager"
},
File (with instant upload and auto complete search)
schema type : string
options type : file
Uploaded files are stored in : /Portals/[portalid]/OpenContent/Files
"File": {
"type": "file",
"helper": "Url of the file",
"typeahead": {
"Folder": "Files"
},
"uploadfolder" : "Files"
}
Textarea
schema type : string
options type : textarea
more info
Rich text with CKEditor
( 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)
"Text" : {
"type":"ckeditor",
"configset":"basic",
"ckeditor":{
"stylesSet" : {
....
},
... other ckeditor options like toolbar ....
}
}
more info about ckeditor config
Rich text with Wysihtml
(wysihtml http://wysihtml.com)
schema type : string
options type : wysihtml
dnn specific
List of items
schema type : array
options type : array
more info
Table of items
schema type : array
options type : table
more info
Dependency between fields
Dependencies
Conditional Dependencies
Multi-Lingual Field types
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
"ProductName": {
"title": "Product name",
"type": "mltext"
}
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
Icon Field
schema type : string
options type : icon
"Icon": {
"title": "Icon",
"type": "string"
}
"Icon": {
"type": "icon",
"glyphicons" : false,
"fontawesome" : true
}
Updated less than a minute ago