Examples (widgets)# Examples (widgets)
Below are several functional examples and a complete widget, which includes a commented JSON schema and a corresponding template.html file.
Range (click to expand)
{
"type": "object",
"properties": {
"opacity": {
"type": "string",
"format": "range",
"multipleOf": 0.1,
"minimum": "0",
"maximum": "1",
"default": "0.5"
}
}
}
Important
The slider always occupies 100% width, and its increments are determined by the multipleOf factor.
Check out
Textarea (click to expand)
{
"type": "object",
"properties": {
"text": {
"title": "Text widget",
"type": "string",
"format": "textarea",
"default": "Default text",
"description": "This will give extra information about the widget!"
}
}
}
Checkbox (click to expand)
{
"type": "object",
"properties": {
"checkbox": {
"type": "boolean",
"format": "checkbox"
}
}
}
Color picker (click to expand)
{
"type": "object",
"properties": {
"color": {
"type": "string",
"format": "color",
"default": "#000000"
}
}
}
Dropdown (click to expand)
{
"type": "object",
"properties": {
"order": {
"title": "text_1",
"type": "string",
"enum": ["option-a", "option-b"],
"default": "option-a",
"options": {
"enum-titles": ["Option a", "Option b"]
}
}
}
}
Complete widget example (click to expand)
template.htmlschema.json
{% set media = properties.media.media_type %}
{% if properties.text.title %}
<h2 className="large-title">{{ properties.text.title|safe }}</h2>
{% endif %}
<img src="/static/uploads-cm2/{{ properties.img }}" />
{%- if properties.links.button_text and properties.links.button_link -%}
<a href="{{ object_url(properties.links.button_link) if properties.links.button_link else '#'}}"
className="btn {{ properties.links.button_type }}">
{{ properties.links.button_text }}
</a>
{%- endif -%}
{%- if properties.fields -%}
{%- for field in properties.fields -%}
{{ field.label }}
{{ field.name }}
{{ field.placeholder }}
{{ field.required }}
{{ field.type }}
{{ field.optional }}
{%- endfor -%}
{%- endif -%}
{
/*
* Name: Type
* Description: Type is always needed within the scope of every object.
This can be set to multiple values with varying effects.
* Options: string | csstring | boolean | object | array
*/
"type": "object",
"properties": {
/*
* Name: class
* Description: Class can be set to make better distinctions between the multiple items and to make it better callable within the scope of the template.
* Options: No "-" is allowed except in combination with type [csstring]
*/
"text": {
/*
* Name: title
* Description: Can be anything, this is printed in the widget as the name of the item. Will be filled with [class] if left empty.
*/
"title": "Content",
"type": "object",
"properties": {
// Simple text object
"title": {
"title": "Title",
"type": "string",
/*
* Name: format
* Description: Used in combination with types. Allows for formatting of inputs.
* Options: object | color | range | text | textarea | checkbox | filemanager | table | tabs | select
*/
"format": "text",
"description": "strong tags can be used for bold styling around text. See placeholder for example",
/*
* Name: options
* Description: The options allow for customizable fields.
* Options: enum_titles | inputAttributes
*/
"options": {
"inputAttributes": {
"placeholder": "Ontdek onze <strong>innovaties</strong>"
}
}
}
}
},
"links": {
"title": "Button/Link",
"type": "object",
"properties": {
"button_text": {
"title": "Button text",
"type": "string",
"format": "text"
},
"button_type": {
"title": "Color",
"type": "string",
/*
* Name: enum
* Description: A customizable dropdown selector. The values within the enum are values directly displayed within the code
* Options: comma separated strings
*/
"enum": [
"btn--primary",
"btn--secondary",
"btn--default"
],
/*
* Name: enum_titles
* Description: enum_titles option gives you a customizable title to display to the end user instead of the one used for within the code. (optional)
* Options: comma separated strings
*/
"options": {
"enum_titles": [
"Primary",
"Secondary",
"Default"
]
},
// The default selected option (options are defined within the enum)
"default": "btn--primary"
},
/*
* Name: link-object
* Description: This object gives you a link selector modal for the end user based on the available pages within the CMS.
* Options: Always start any calls within the HTML with everything before the '-object'. Example 'button_link-object' would only be accessible through 'button_link'. The '-object' part is always needed to make this function
*/
"button_link-object": {
"title": "Button link",
"type": "csstring",
"format": "object"
}
}
},
"media": {
"title": "Media",
"type": "object",
"properties": {
"media_type": {
"title": "Which media type",
"type": "string",
"enum": [
"videocms",
"videoyoutube"
],
"options": {
"enum_titles": [
"Video CMS",
"Video Youtube"
]
},
"default": "videocms"
},
/*
* Name: DAM selector
* Description: This object gives you a DAM selector modal for the end user based on the available media within the CMS DAM.
* Options: type csstring in combination with format filemanager
*/
"image": {
"title": "Image",
"type": "csstring",
"format": "filemanager"
},
"video_cms": {
"title": "Video CMS",
"type": "csstring",
"format": "filemanager",
"options": {
/*
* Name: dependencies
* Description: The below option sets a dependency based on the value of another field. Gives a boolean value (True/False)
* Options: field name + field value
*/
"dependencies": {
"media_type": "videocms"
}
}
}
}
},
/*
* Name: Type Array
* Description: Type array is used to display data recurring data fields.
Within you have the option to either show the data in tabs or table.
tabs: Is used to display data fields in a tab manner. Based on the amount of data fields, you might want to use this when the amount gets above 4-5 fields
table: Is used to display data fields in a table manner. Use this when under 4 data fields
* Options: string | csstring | boolean | object | array
*/
"fields": {
"type": "array",
"format": "table",
"title": "Fields",
// within array, always use items instead of properties to start an array
"items": {
// always define type object and properties within said array
"type": "object",
"properties": {
"label": {
"type": "string",
"title": "Label text"
},
"name": {
"type": "string"
},
"placeholder": {
"type": "string"
},
"required": {
"type": "boolean",
"format": "checkbox"
},
"type": {
"type": "string",
"enum": [
"text",
"email",
"number",
"tel",
"textarea"
]
},
"optional": {
"title": "Show optional text",
"type": "boolean",
"format": "checkbox"
}
}
}
}
}
}
Below are several functional examples and a complete widget, which includes a commented JSON schema and a corresponding template.html file.
Range (click to expand)
{
"type": "object",
"properties": {
"opacity": {
"type": "string",
"format": "range",
"multipleOf": 0.1,
"minimum": "0",
"maximum": "1",
"default": "0.5"
}
}
}
Important
The slider always occupies 100% width, and its increments are determined by the multipleOf factor.
Check out
Textarea (click to expand)
{
"type": "object",
"properties": {
"text": {
"title": "Text widget",
"type": "string",
"format": "textarea",
"default": "Default text",
"description": "This will give extra information about the widget!"
}
}
}
Checkbox (click to expand)
{
"type": "object",
"properties": {
"checkbox": {
"type": "boolean",
"format": "checkbox"
}
}
}
Color picker (click to expand)
{
"type": "object",
"properties": {
"color": {
"type": "string",
"format": "color",
"default": "#000000"
}
}
}
Dropdown (click to expand)
{
"type": "object",
"properties": {
"order": {
"title": "text_1",
"type": "string",
"enum": ["option-a", "option-b"],
"default": "option-a",
"options": {
"enum-titles": ["Option a", "Option b"]
}
}
}
}
Complete widget example (click to expand)
template.htmlschema.json
{% set media = properties.media.media_type %}
{% if properties.text.title %}
<h2 className="large-title">{{ properties.text.title|safe }}</h2>
{% endif %}
<img src="/static/uploads-cm2/{{ properties.img }}" />
{%- if properties.links.button_text and properties.links.button_link -%}
<a href="{{ object_url(properties.links.button_link) if properties.links.button_link else '#'}}"
className="btn {{ properties.links.button_type }}">
{{ properties.links.button_text }}
</a>
{%- endif -%}
{%- if properties.fields -%}
{%- for field in properties.fields -%}
{{ field.label }}
{{ field.name }}
{{ field.placeholder }}
{{ field.required }}
{{ field.type }}
{{ field.optional }}
{%- endfor -%}
{%- endif -%}
{
/*
* Name: Type
* Description: Type is always needed within the scope of every object.
This can be set to multiple values with varying effects.
* Options: string | csstring | boolean | object | array
*/
"type": "object",
"properties": {
/*
* Name: class
* Description: Class can be set to make better distinctions between the multiple items and to make it better callable within the scope of the template.
* Options: No "-" is allowed except in combination with type [csstring]
*/
"text": {
/*
* Name: title
* Description: Can be anything, this is printed in the widget as the name of the item. Will be filled with [class] if left empty.
*/
"title": "Content",
"type": "object",
"properties": {
// Simple text object
"title": {
"title": "Title",
"type": "string",
/*
* Name: format
* Description: Used in combination with types. Allows for formatting of inputs.
* Options: object | color | range | text | textarea | checkbox | filemanager | table | tabs | select
*/
"format": "text",
"description": "strong tags can be used for bold styling around text. See placeholder for example",
/*
* Name: options
* Description: The options allow for customizable fields.
* Options: enum_titles | inputAttributes
*/
"options": {
"inputAttributes": {
"placeholder": "Ontdek onze <strong>innovaties</strong>"
}
}
}
}
},
"links": {
"title": "Button/Link",
"type": "object",
"properties": {
"button_text": {
"title": "Button text",
"type": "string",
"format": "text"
},
"button_type": {
"title": "Color",
"type": "string",
/*
* Name: enum
* Description: A customizable dropdown selector. The values within the enum are values directly displayed within the code
* Options: comma separated strings
*/
"enum": [
"btn--primary",
"btn--secondary",
"btn--default"
],
/*
* Name: enum_titles
* Description: enum_titles option gives you a customizable title to display to the end user instead of the one used for within the code. (optional)
* Options: comma separated strings
*/
"options": {
"enum_titles": [
"Primary",
"Secondary",
"Default"
]
},
// The default selected option (options are defined within the enum)
"default": "btn--primary"
},
/*
* Name: link-object
* Description: This object gives you a link selector modal for the end user based on the available pages within the CMS.
* Options: Always start any calls within the HTML with everything before the '-object'. Example 'button_link-object' would only be accessible through 'button_link'. The '-object' part is always needed to make this function
*/
"button_link-object": {
"title": "Button link",
"type": "csstring",
"format": "object"
}
}
},
"media": {
"title": "Media",
"type": "object",
"properties": {
"media_type": {
"title": "Which media type",
"type": "string",
"enum": [
"videocms",
"videoyoutube"
],
"options": {
"enum_titles": [
"Video CMS",
"Video Youtube"
]
},
"default": "videocms"
},
/*
* Name: DAM selector
* Description: This object gives you a DAM selector modal for the end user based on the available media within the CMS DAM.
* Options: type csstring in combination with format filemanager
*/
"image": {
"title": "Image",
"type": "csstring",
"format": "filemanager"
},
"video_cms": {
"title": "Video CMS",
"type": "csstring",
"format": "filemanager",
"options": {
/*
* Name: dependencies
* Description: The below option sets a dependency based on the value of another field. Gives a boolean value (True/False)
* Options: field name + field value
*/
"dependencies": {
"media_type": "videocms"
}
}
}
}
},
/*
* Name: Type Array
* Description: Type array is used to display data recurring data fields.
Within you have the option to either show the data in tabs or table.
tabs: Is used to display data fields in a tab manner. Based on the amount of data fields, you might want to use this when the amount gets above 4-5 fields
table: Is used to display data fields in a table manner. Use this when under 4 data fields
* Options: string | csstring | boolean | object | array
*/
"fields": {
"type": "array",
"format": "table",
"title": "Fields",
// within array, always use items instead of properties to start an array
"items": {
// always define type object and properties within said array
"type": "object",
"properties": {
"label": {
"type": "string",
"title": "Label text"
},
"name": {
"type": "string"
},
"placeholder": {
"type": "string"
},
"required": {
"type": "boolean",
"format": "checkbox"
},
"type": {
"type": "string",
"enum": [
"text",
"email",
"number",
"tel",
"textarea"
]
},
"optional": {
"title": "Show optional text",
"type": "boolean",
"format": "checkbox"
}
}
}
}
}
}