Fields

Qoob comes packed with a variety of fields. Each has its own set of arguments that can alter what that field does.

Fields are blocks of arrays that represent the options of an individual within a specific settings panel, set via a Settings array.

Each field has its arguments:

Name Type Default Description
type string Value identifying the type of the field
name string Unique name identifying the field that must be different from all other field names
label string Displays the title of the option
default string / int / array Default field’s value

A basic example is shown below.

"settings": [{
    "name": "header",
    "label": "Header",
    "type": "text"
}, {
    "name": "show_image",
    "label": "Show pepper",
    "type": "checkbox"
}],
"default" : {
    "header" : "Menu",
    "show_image" : 1
}

Text

The Text field accepts any kind of text.

Arguments

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names.
label string Displays the title of the option.
type string ‘text’ Value identifying the type of field.
placeholder string Text that is displayed in the input when the value isn’t present.
default string Default field’s value

Example

"settings": [{
    "name": "header",
    "label": "Header",
    "type": "text",
    "placeholder": "Enter header"
}],
"default": {
    "header": "About Us"
}

Texarea

The Textarea field accepts any form of multi-line string input, including custom HTML.

Arguments

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names
label string Displays the title of the option
placeholder string Text that is displayed in the input when the value isn’t present
type string ‘textarea’ Value identifying the type of the field/td>
default string Default field’s value

Example

"settings": [{
    "name": "text",
    "label": "Text",
    "type": "textarea",
    "placeholder": "Enter text"
}],
"default": {
    "text": "At Pizza, we do not just make pizza. We make people's days. And we carry that belief into everything we do." 
}

Select

The Select field displays information in a drop-down field in a single format.

Arguments

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names
label string Displays the title of the option
type string ‘select’ Value identifying the type of the field
options array The array of options in key pair format. The key ID represents the ID of the option. The key value represents the text that appears in the selector. The key color image represents an option color, value can be in hex or rgb format
default string Default current select value

Example

{
    "name": "position_image",
    "label": "Position image",
    "type": "select",
    "default": "top",
    "options": [{
        "id": "top",
        "val": "top image"
    }, {
        "id": "bottom",
        "val": "bottom image"
    }]
}

Checkbox

The Checkbox field may be used in order to offer a single check option.

Arguments

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names.
label string Displays the title of the option.
type string ‘checkbox’ Value identifying the type of the field
default int Int value 1 or 0

Example

"settings": [{
    "name": "show_image",
    "label": "Show image",
    "type": "checkbox"
}],
"default" : {
    "show_image" : 1
}

Switch

The Switch field may be used in order to offer a single option off or on.

Arguments

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names.
label string Displays the title of the option.
type string checkbox_switch Value identifying the type of the field
default int Int value 1 or 0

Example

"settings": [{
    "name": "show_image",
    "label": "Show image",
    "type": "checkbox_switch"
}],
"default" : {
    "show_image" : 1
}

Color picker

The color picker allows to choose color for text, buttons etc.

Arguments

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names
label string Displays title of the option
type string ‘colorpicker’ Value identifying the type of the field
colors array Add the array to display a row of your own palette colors. The value can be in hex or rgb format
default string The value can be in hex or rgb format

Example

"settings": [{
    "name": "color_text",
    "label": "Color text",
    "type": "colorpicker",
    "colors": [
        "rgb(0, 181, 50)",
        "rgb(255, 189, 0)"
    ]
}],
"default": {
    "color_text": "rgb(0, 181, 50)"
}

Image

With the image field, one can create a new gallery of images by selecting existing images.

 

Arguments

defaultstring The url to the image

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names
label string Displays the title of the option
type string image Value identifying the type of the field
tags array Add an array to display the images in the media center by tags
hideDeleteButton int Hide or show delete image button

Example

"settings": [{
     "name": "bgImageUrl",
     "label": "Background image",
     "type": "image",
     "tags" : ["morning", "coffe"]
}],
"default": {
     "bgImageUrl": "%block_url%/assets/cat.png"
}

Video

The video field allows to choose a video from media library or upload it.

Arguments

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names
label string Displays the title of the option
type string video Value identifying the type of the field
tags array Add an array to display the videos in the media center by tags
hideDeleteButton int Hide or show delete video button
default object The url to the video and the url to the poster.
"settings": [{
     "name": "bgVideoUrl",
     "label": "Background video",
     "type": "video",
     "tags" : ["city", "forest"]
}],
"defaults": {
     "bgVideoUrl": {
        "url": "%block_url%/assets/traffic.mp4",
        "preview": "%block_url%/assets/poster.jpg"
     }
}

Icon

The icon field allows to choose an icon from the icon library.

Arguments

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names
label string Displays the title of the option
type string icon Value identifying the type of the field
hideDeleteButton int Hide or show delete icon button
default string The icons classes. For example “glyphicon glyphicon-search”.

Example

"settings": [{
     "name": "iconFront",
     "label": "Icon for front side",
     "type": "icon"
}],
"defaults": {
     "iconFront" : "glyphicon glyphicon-heart"
}

Accordion

The accordion field is used for an unlimited items, which can include any fields.

Arguments

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names
label string Displays the title of the option
type string accordion Value identifying the type of the field
settings array Array of fields
default array Array of key pair data. The key represents the field’s name and displays the value of the fields

Example

"settings": [{
     "name": "box",
     "label": "Items",
     "type": "accordion",
     "settings": [{
         "name": "title",
         "label": "Title",
         "type": "text",
         "placeholder": "Enter title"
     },{
         "name": "boxbg",
         "label": "Background color",
         "type": "select",
         "visible_color": "true",
         "options": [{
             "id": "release",
             "colorimage": "rgb(0, 132, 255)",
             "val": "release"
         },{
             "id": "comingsoon",
             "colorimage": "rgb(208, 208, 208)",
             "val": "comingsoon"
         }]
     }]
}],
"defaults": {
    "box": [{
         "boxbg" : "release",
         "title": "Wordpress",
         "order": 1
    },{
         "boxbg" : "comingsoon",
         "title": "Joomla",
         "order": 2
    },{
         "boxbg" : "comingsoon",
         "title": "Drupal",
         "order": 3
    }]
}

Accordion Flip

The accordion flip field is used for unlimited items, which can include any fields.

The accordion flip field has come in qoob 3.0.

Arguments

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names
label string Displays the title of the option
type string accordion_flip Value identifying the type of the field
settings array Array of fields
default array Array of key pair data. The key represents a field’s name and displays the value of fields

Example

"settings": [{
     "name": "box",
     "label": "Items",
     "type": "accordion_flip",
     "settings": [{
         "name": "title",
         "label": "Title",
         "type": "text",
         "placeholder": "Enter title"
     },{
         "name": "boxbg",
         "label": "Background color",
         "type": "select",
         "visible_color": "true",
         "options": [{
             "id": "release",
             "colorimage": "rgb(0, 132, 255)",
             "val": "release"
         },{
             "id": "comingsoon",
             "colorimage": "rgb(208, 208, 208)",
             "val": "comingsoon"
         }]
     }]
}],
"defaults": {
    "box": [{
         "boxbg" : "release",
         "title": "Wordpress",
         "order": 1
    },{
         "boxbg" : "comingsoon",
         "title": "Joomla",
         "order": 2
    },{
         "boxbg" : "comingsoon",
         "title": "Drupal",
         "order": 3
    }]
}

Date Picker

The Date Picker (DP) field is a new way to select dates. The DP contains several modes based on how you’d like to display date data.

The DP field has come in qoob 3.0.

Arguments

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names.
label string Displays the title of the option.
type string ‘datepicker’ Value identifying the type of field.
dateFormat string ‘dd-MM-yyyy’ String to assign the format of the date output. For more info, please see ‘Date Formatting’ below.
default string Default field’s value

Date Formatting

Format a date into a string value with a specified format:

Date format Value format
dd-MM-yyyy 12-04-2017
MM-dd-yyyy 04-12-2017
yyyy-MM-dd 2012-04-17
MM yyyy 04 2017
MMM yyyy Apr 2017
MMMM yyyy April 2017

Example

"settings": [{
    "name": "date",
    "label": "Date",
    "type": "datepicker",
    "dateFormat": "dd-MM-yyyy"
}],
"default": {
    "date": "16-03-2014"
}

Slider

The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.

Arguments

maxint / string100Value setting the maximum slider value.

Name Type Default Description
name string Unique name identifying the field that must be different from all other field names.
label string Displays the title of the option.
type string ‘slider’ Value identifying the type of field.
min int / string 0 Value setting the minimum slider value.
default string Default field’s value

Example

"settings": [{
    "name": "size",
    "label": "Size",
    "type": "slider",
    "min": "200",
    "max": "500"
}],
"default": {
    "size": "250"
}