GuidesDiscussionsDownloadDemosOpen Source
HomeGuidesChangelogDiscussions
GuidesDiscussionsDownloadDemosOpen SourceLog In
Guides
These docs are for v3.2. Click to read the latest docs for v5.0.

Field types

Field types in edit and template settings forms

Suggest Edits

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 items from a webapi call thu serviceFramemork

see Select2 for more detailed information.

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

Date / Time

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

Image

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

"Image": {
    "type": "image",
    "helper": "Url of the image",
    "typeahead": {
        "Folder": "Images"
    },
    "uploadfolder" : "Images",
    "uploadhidden" : false
}

Remarks :

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

Image2 (a fileId is stored instead of path)

schema type : string
options type : image2

"ImageId": {
    "type": "image2",
    "helper": "Select FileId of the image",
    "folder": "Images"
}

Remarks

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

Image crop (single ratio)

"Photo": {
            "label": "Group Photo",
            "type": "imagecrop",            
            "cropper": {
                "aspectRatio": 1               
            },
            "uploadfolder": "Files/images/GroupPhotos/",
            "uploadhidden": false,
            "manageurl": "/webmanagement/filemanager"
        },
604 
<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 crop 2 (single ratio) with dropdown list (select2)

"Photo": {
            "label": "Image",
            "type": "imagecrop2",            
            "width": 200,
            "height": 100,
            "uploadfolder": "Files/images/GroupPhotos/",
            "cropfolder": "Files/images/GroupPhotos/",
            "uploadhidden": false,
            "manageurl": "/webmanagement/filemanager",
            "cropButtonHidden" : false,
            "multiple": false
        },

"Photo": {
            "label": "Image",
            "type": "imagecrop2",            
            "cropper": {
                "aspectRatio": 1               
            },
            "uploadfolder": "Files/images/GroupPhotos/",
   					"cropfolder": "Files/images/GroupPhotos/",
            "uploadhidden": false,
            "manageurl": "/webmanagement/filemanager",
   					"cropButtonHidden" : false
        },

<img src="{{Image.cropUrl}}" alt="{{Title}}">
 
 <!-- OR with "cropButtonHidden" : true  and image handler-->
 
<img src="{{Image.url}}?crop={{Image.x}},{{Image.y}},{{Image.width}},{{Image.height}}&width=2000&height=400&bgcolor=fff" alt="{{Title}}">

Image cropper

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",
    "downloadButton":true
}

File2 (based on select2)

"File": {
    "type": "file2",
    "filter":"^.*\.(jpg|JPG|gif|GIF|doc|DOC|pdf|PDF)$",
    "folder":"Files",
    "showFileUpload":true,
    "showUrlUpload":true  
}

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

Rich Text with Summernote

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/

{
    "type": "object",
    "properties": {
        "ModuleTitle": {
            "title": "Main Title",
            "type": "string"
        },
				"Text": {
				"title": "Text",
				"type": "string"
			}
     }
}

{
    "fields": {
		"ModuleTitle": {
            "type":"text"
        },
		"Text": {
			"title": "Text",
			"type": "summernote"
			}
    }
}

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 over 7 years ago