Components

Amount Component

The Amount Component accepts as an input from the user a monetary value. This component has two main parts: the main part is a textfield in which the user can put the monetary value and the second part in which the user can put the type of the currency.

  • Amount
  • Properties
  • Example
  • JSON

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.

var myAmount = new Amount({
id: 'amount',
label: 'Payment',
blockProcessAttr: false,
currency: [{ "id": "1", "text": "EUR" }, { "id": "2", "text": "ALL" }, { "id": "3", "text": "GBP" }],
value: {
"amount": "132323",
"currency": "1"
}

{
    "ctor": "Amount",
    "props": {
        "value": {
            "amount": "100",
            "currency": "1"
        },
        "sortChildren": false,
        "guid": "dfb5210e-67d9-4778-8c18-cb54dc09638e",
        "id": "amount",
        "currencyList": [{ "id": "1", "text": "EUR" }, { "id": "2", "text": "USD" }, { "id": "3", "text": "GBP" }],
        "index": 0,
        "spacing": {},
        "attr": {
            "isCmp": true
        },
        "css": {},
        "visible": true,
        "enabled": true,
        "draggable": true,
        "classes": [
            "d-flex"
        ]
    }
}

AutoComplete Component

The AutoComplete component enables the user to make more than one choice from a list of alternatives. AutoComplete is made up of an input field in which the user can click and at the click of the button, it displays a drop-down list from which the user can select an item to display.

  • AutoComplete
  • Properties
  • Example

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.
  • Multiple Selection: allows the choice of multiple items.
  • DataProvider: fills the component with data.

var myAutoComplete = new AutoComplete({
id: 'autocomplete',
label: 'Employees',
blockProcessAttr: false,
multipleSelection: true,
displayTable: true,
valueField: "value",
labelField: "employee",
tableData: [["John Doe"], ["Rob Smith"], ["Harry Johnes"]],
dataProvider: [{ "value": "1", "employee": "John Doe" }],
value: [{ "value": "1", "employee": "John Doe" }]
});

Button Component

The button component is quite simple and flexible, as it allows the user to add a button on the web app. Obvia allows three different button types: button, submit, and reset.

  • Button
  • Properties
  • JSON

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.
{
    "ctor": "Button",
    "props": {
        "label": "Click Me",
        "type": "button",
        "components": [],
        "sortChildren": false,
        "guid": "1",
        "id": "button",
        "index": 0,
        "spacing": {},
        "attr": {
            "isCmp": true
        },
        "css": {},
        "visible": true,
        "enabled": true,
        "draggable": true,
        "classes": [

        ]
    }
}

CheckBox Component

CheckBox is a simple component made up of a single clickable box, representing an option. A combination of them forms a CheckBoxGroup. Using this component is a good option when you want to give users the ability to select or deselect one option.

  • CheckBox
  • Properties
  • Example
  • JSON

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.
  • Value: selects the value of the component, whether or not the box should be filled.

var myCheckBox = CheckBox({
id: 'checkBoxField',
label: 'CheckBox Label',
versionStyle: '',
blockProcessAttr: false,
value: "1",
enabled:true,
checked:false
});

{
"ctor": "CheckBox",
"props": {
"label": "CheckBox Label",
"value": "1",
"guid": "1",
"id": "checkBox",
"index": 0,
"spacing": {},
"attr": {
"isCmp": true
},
"css": {},
"visible": true,
"enabled": true,
"draggable": true,
"classes": []
}
}

CheckBoxGroup Component

CheckBoxGroup is a component made up of smaller units known as CheckBox. A check box represents a single option and their combination forms a CheckBoxGroup. Using this component is a good option when you want to give users the ability to select a few options from a possible set of choices.

  • CheckBox
  • Properties
  • Example
  • JSON

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.
  • DataProvider: fills the component with data.

var myCheckBox = CheckBox({
id: 'checkBoxField',
label: 'CheckBox Label',
versionStyle: '',
blockProcessAttr: false,
value: "1",
enabled:true,
checked:false
});

{
    "ctor": "CheckBoxGroup",
    "props": {
        "valueField": "id",
        "labelField": "text",
        "rendering": {
            "direction": "horizontal",
            "separator": false,
            "wrap": true,
            "mode": "append"
        },
        "dataProvider": [{
                "text": "Option 1",
                "id": "1",
                "enabled": true,
                "checked": false,
                "buttonClass": [
                    "btn btn-xs btn-default"
                ]
            },
            {
                "text": "Option 2",
                "id": "2",
                "enabled": true,
                "checked": false,
                "buttonClass": [
                    "btn btn-xs btn-default"
                ]
            },
            {
                "text": "Option 3",
                "id": "3",
                "enabled": true,
                "checked": true,
                "buttonClass": [
                    "btn btn-xs btn-success"
                ]
            },
            {
                "text": "Option 4",
                "id": "4",
                "enabled": true,
                "checked": false,
                "buttonClass": [
                    "btn btn-xs btn-default"
                ]
            }
        ],
        "sortChildren": false,
        "guid": "a4fd90ba-ae99-412b-a0dc-71c73e0fb630",
        "id": "checkBoxGroup",
        "index": 0,
        "spacing": {},
        "attr": {
            "data-triggers": "rowAdd rowEdit beforeRowAdd rowDelete beforeRowDelete dataProviderLengthChanged change itemClick itemDblClick",
            "role": "group",
            "isCmp": true
        },
        "css": {},
        "visible": true,
        "enabled": true,
        "draggable": true,
        "classes": [
            "card"
        ]
    }
}

Color Component

Color is a component that allows the user to select a color through different means. The user can either input the right RGB numbers, select the right color shade in the spectrum, or use a color picker to pick any color from the window.

  • Color
  • Properties
  • JSON

  • Name or id: used to reference the component.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.

{
"ctor": "Color",
"props": {
"components": [],
"sortChildren": false,
"guid": "1",
"id": "color",
"index": 0,
"spacing": {},
"attr": {
"isCmp": true
},
"css": {
"width": "20px",
"height": "20px"
},
"visible": true,
"enabled": true,
"draggable": true,
"classes": []
}
}

Date Component

The Date component gives the user the opportunity to input a date using the date-picker element. This component is made up of two main parts: an input field and a date-picker element. The user can enter his input by manually filling the input field with a formatted date in the Day / Month / Year format or can click on this field. The click enables the display of the date-picker element, which is nothing other than a calendar from which the user selects the date. The selected date will be displayed on the input field.

  • DateTime
  • Properties
  • Example
  • JSON

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.
  • Input/Output Format: specifies the format of the date, which can be DD/MM/YYYY, YY/MM/DD or MM/DD/YY.

var myDate = new DateTime({
id: 'datetime',
label: 'Date',
versionStyle: '',
blockProcessAttr: false,
inputFormat: 'DD/MM/YYYY',
outputFormat: 'DD-MM-YYYY',
displayFormat: 'MM/DD/YYYY',
value: '2020/02/04'
});

{
    "ctor": "Container",
    "props": {
        "components": [{
            "ctor": "DateTime",
            "props": {
                "value": "2021-02-15",
                "inputFormat": "YYYY-MM-DD",
                "outputFormat": "YYYY-MM-DD",
                "displayFormat": "DD/MM/YYYY",
                "components": [],
                "sortChildren": false,
                "guid": "1",
                "id": "datetime",
                "index": 0,
                "spacing": {},
                "attr": {
                    "value": "2021-02-15",
                    "data-date": "15/02/2021",
                    "isCmp": true
                },
                "css": {},
                "visible": true,
                "enabled": true,
                "draggable": true,
                "classes": []
            }
        }],
        "sortChildren": false,
        "guid": "guid1",
        "id": "workAreaColumnL2",
        "index": 0,
        "spacing": {
            "h": 100
        },
        "css": {},
        "visible": true,
        "enabled": true,
        "classes": [
            "col"
        ],
        "parentType": "row"
    }
}

DateTimeCombo Component

The DateTimeCombo component is designed in such a way as to give the user the ability to enter as input a clock or date. The clock is formatted in the Hour/Minute/Seconds format. The user can define each clock component by using a drop-down list that selects the hour (0-23), minutes (0-59) and seconds (0-59). The date can be formatted in three ways Day/Month/Year, Month/Day/Year, Year/Month/Days. Each Date component can be selected from a drop-down list: Day (1-31), Month (1-12), Year (1900-2099).

  • DateTimeCombo
  • Properties
  • Example
  • JSON

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.
  • Input/Output Format: specifies the format of the date, which can be DD/MM/YYYY, YY/MM/DD or MM/DD/YY.

var myDayMonthYear = new DateTimeCb({
id: 'dayMonthYear',
label: 'Date Mode 2',
versionStyle: '',
blockProcessAttr: false,
mode: "date", //datetime, time
inputFormat: 'DD/MM/YYYY',
outputFormat: 'DD-MM-YYYY',
value: '10/10/2010'
});

{
    "ctor": "DateTimeCb",
    "props": {
        "value": "09/02/2021",
        "inputFormat": "DD/MM/YYYY",
        "outputFormat": "DD-MM-YYYY",
        "mode": 3,
        "sortChildren": false,
        "guid": "1",
        "id": "dateTimeCb",
        "index": 0,
        "spacing": {},
        "attr": {
            "isCmp": true
        },
        "css": {},
        "visible": true,
        "draggable": true,
        "classes": ["d-flex"]
    }
}

Image Component

The image component allows the user to put an image in the website. The user can put the image in  through its url, and can also input the height and width of the image.

  • Image
  • Properties
  • JSON

  • Name or id: used to reference the component.
  • Src: used for the URL of the image.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.
  • Height: input the height of the image.
  • Width: input the width of the image.
  • Alt: give a name to the image.
{
    "ctor": "Image",
    "props": {
        "src": "https://obviajs.com/wp-content/uploads/2020/09/Untitled-1.png",
        "alt": "Obvia logo",
        "height": 96,
        "width": 84,
        "guid": "1",
        "id": "image",
        "index": 0,
        "spacing": {},
        "attr": {
            "data-triggers": "load",
            "isCmp": true
        },
        "css": {},
        "visible": true,
        "enabled": true,
        "draggable": true,
        "classes": []
    }
}

Label Component

Label is one of the simplest and most versatile components, so it can be used almost anywhere. In its simplest form, it is just a short text.

  • Label
  • Properties
  • Example
  • JSON

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.
  • labelType: allows the user to select the type of label.
var myLabel = new Label({
    id: 'label',
    label: 'Label'
});

{
"ctor": "Label",
"props": {
"labelType": "label",
"label": "This is a label",
"components": [],
"sortChildren": false,
"guid": "1",
"id": "label",
"index": 0,
"spacing": {},
"attr": {
"isCmp": true
},
"css": {},
"visible": true,
"enabled": true,
"draggable": true,
"classes": []
}
}

Map Component

Map is a component that allows users to select a geographic location that will then appear on the map using a Marker Type component.

  • Map Location
  • Properties
  • Example
  • JSON

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.

var myMap = new GoogleMap({
id: 'map',
label: 'Geographic Location',
versionStyle: "",
blockProcessAttr: false,
value: {
latitude: 41.1533,
longtitude: 20.1683,
zoomLevel: 7 }
});

{
    "ctor": "MapLocationPicker",
    "props": {
        "value": {
            "latitude": 41.1533,
            "longitude": 20.1683
        },
        "components": [{
                "ctor": "TextInput",
                "props": {
                    "value": 41.1533,
                    "type": "text",
                    "autocomplete": "off",
                    "components": [],
                    "sortChildren": false,
                    "guid": "f3707324-abe1-4148-86db-8763e8db6484",
                    "id": "latitude",
                    "index": 0,
                    "spacing": {
                        "mr": 1
                    },
                    "css": {},
                    "visible": true,
                    "enabled": true,
                    "classes": []
                }
            },
            {
                "ctor": "TextInput",
                "props": {
                    "value": 20.1683,
                    "type": "text",
                    "autocomplete": "off",
                    "components": [],
                    "sortChildren": false,
                    "guid": "052f23da-4b8a-4d3e-92d0-00eab1806160",
                    "id": "longitude",
                    "index": 0,
                    "spacing": {
                        "mr": 1
                    },
                    "css": {},
                    "visible": true,
                    "enabled": true,
                    "classes": []
                }
            },
            {
                "ctor": "Button",
                "props": {
                    "type": "button",
                    "components": [{
                        "ctor": "Label",
                        "props": {
                            "html": "",
                            "labelType": "i",
                            "components": [],
                            "sortChildren": false,
                            "guid": "f05f6c37-15e6-4fa5-8907-4e2d2b44a861",
                            "id": "fa",
                            "index": 0,
                            "spacing": {},
                            "css": {},
                            "visible": true,
                            "enabled": true,
                            "classes": [
                                "fas",
                                "fa-map-marker",
                                "no-form-control"
                            ],
                            "parentType": "button"
                        }
                    }],
                    "sortChildren": false,
                    "guid": "01a9f3c5-81db-4a95-ac77-488e5cfa16f8",
                    "id": "selectBtn",
                    "index": 0,
                    "spacing": {},
                    "css": {},
                    "visible": true,
                    "enabled": true,
                    "classes": []
                }
            },
            {
                "ctor": "Modal",
                "props": {
                    "components": [{
                        "ctor": "Container",
                        "props": {
                            "components": [{
                                "ctor": "Container",
                                "props": {
                                    "components": [{
                                            "ctor": "Container",
                                            "props": {
                                                "components": [{
                                                        "ctor": "Heading",
                                                        "props": {
                                                            "label": "Pick Location",
                                                            "align": "left",
                                                            "headingType": "h5",
                                                            "components": [],
                                                            "sortChildren": false,
                                                            "guid": "69ed24fc-8cdc-40ca-884a-a718bd1ea24e",
                                                            "id": "title",
                                                            "index": 0,
                                                            "spacing": {},
                                                            "css": {},
                                                            "visible": true,
                                                            "enabled": true,
                                                            "classes": []
                                                        }
                                                    },
                                                    {
                                                        "ctor": "Container",
                                                        "props": {
                                                            "type": "btn-group",
                                                            "components": [{
                                                                    "ctor": "Button",
                                                                    "props": {
                                                                        "type": "button",
                                                                        "components": [{
                                                                            "ctor": "Label",
                                                                            "props": {
                                                                                "html": "",
                                                                                "labelType": "i",
                                                                                "components": [],
                                                                                "sortChildren": false,
                                                                                "guid": "8e20705d-c8c6-4a94-8bc2-5fdf5afce4e1",
                                                                                "id": "fa",
                                                                                "index": 0,
                                                                                "spacing": {},
                                                                                "css": {},
                                                                                "visible": true,
                                                                                "enabled": true,
                                                                                "classes": [
                                                                                    "fas",
                                                                                    "fa-times"
                                                                                ],
                                                                                "parentType": "button"
                                                                            }
                                                                        }],
                                                                        "sortChildren": false,
                                                                        "guid": "a2d794f7-6351-468c-8b1c-05b3b2e40790",
                                                                        "id": "dismissButton",
                                                                        "index": 0,
                                                                        "spacing": {},
                                                                        "attr": {
                                                                            "data-dismiss": "modal",
                                                                            "aria-label": "Dismiss"
                                                                        },
                                                                        "css": {},
                                                                        "visible": true,
                                                                        "enabled": true,
                                                                        "classes": [
                                                                            "close",
                                                                            "no-form-control"
                                                                        ],
                                                                        "parentType": "btn-group"
                                                                    }
                                                                },
                                                                {
                                                                    "ctor": "Button",
                                                                    "props": {
                                                                        "type": "button",
                                                                        "components": [{
                                                                            "ctor": "Label",
                                                                            "props": {
                                                                                "html": "",
                                                                                "labelType": "i",
                                                                                "components": [],
                                                                                "sortChildren": false,
                                                                                "guid": "5d7c99bd-2690-4d06-9e19-dc71a1cf2712",
                                                                                "id": "fa",
                                                                                "index": 0,
                                                                                "spacing": {},
                                                                                "css": {},
                                                                                "visible": true,
                                                                                "enabled": true,
                                                                                "classes": [
                                                                                    "fas",
                                                                                    "fa-check"
                                                                                ],
                                                                                "parentType": "button"
                                                                            }
                                                                        }],
                                                                        "sortChildren": false,
                                                                        "guid": "d0d7f0f5-037b-4ab0-a277-7cf1508bc578",
                                                                        "id": "acceptButton",
                                                                        "index": 0,
                                                                        "spacing": {},
                                                                        "attr": {
                                                                            "data-dismiss": "modal",
                                                                            "aria-label": "Accept"
                                                                        },
                                                                        "css": {},
                                                                        "visible": true,
                                                                        "enabled": true,
                                                                        "classes": [
                                                                            "close",
                                                                            "no-form-control"
                                                                        ],
                                                                        "parentType": "btn-group"
                                                                    }
                                                                }
                                                            ],
                                                            "sortChildren": false,
                                                            "guid": "18614340-5e6d-4bd3-87b0-aa687dff843d",
                                                            "id": "headerButtonsCnt",
                                                            "index": 0,
                                                            "spacing": {},
                                                            "css": {},
                                                            "visible": true,
                                                            "enabled": true,
                                                            "classes": []
                                                        }
                                                    }
                                                ],
                                                "sortChildren": false,
                                                "guid": "2dbbd159-cf24-4927-b16c-6c177bbbabde",
                                                "id": "modalHeader",
                                                "index": 0,
                                                "spacing": {},
                                                "css": {},
                                                "visible": true,
                                                "enabled": true,
                                                "classes": [
                                                    "modal-header"
                                                ]
                                            }
                                        },
                                        {
                                            "ctor": "Container",
                                            "props": {
                                                "components": [{
                                                        "ctor": "Container",
                                                        "props": {
                                                            "type": "row",
                                                            "components": [{
                                                                "ctor": "Container",
                                                                "props": {
                                                                    "components": [{
                                                                            "ctor": "TextInput",
                                                                            "props": {
                                                                                "value": 41.1533,
                                                                                "type": "text",
                                                                                "autocomplete": "off",
                                                                                "components": [],
                                                                                "sortChildren": false,
                                                                                "guid": "91b949f7-fd56-4a48-be69-f18aac6ac1b9",
                                                                                "id": "mLatitude",
                                                                                "index": 0,
                                                                                "spacing": {
                                                                                    "mr": 1
                                                                                },
                                                                                "css": {},
                                                                                "visible": true,
                                                                                "enabled": true,
                                                                                "classes": []
                                                                            }
                                                                        },
                                                                        {
                                                                            "ctor": "TextInput",
                                                                            "props": {
                                                                                "value": 20.1683,
                                                                                "type": "text",
                                                                                "autocomplete": "off",
                                                                                "components": [],
                                                                                "sortChildren": false,
                                                                                "guid": "855f19e1-893a-4e43-a164-5c275936a282",
                                                                                "id": "mLongitude",
                                                                                "index": 0,
                                                                                "spacing": {},
                                                                                "css": {},
                                                                                "visible": true,
                                                                                "enabled": true,
                                                                                "classes": []
                                                                            }
                                                                        }
                                                                    ],
                                                                    "sortChildren": false,
                                                                    "guid": "325d9cce-fd19-4b93-b17d-00fc8f2bf873",
                                                                    "id": "inputsColumn",
                                                                    "index": 0,
                                                                    "spacing": {
                                                                        "colSpan": 12
                                                                    },
                                                                    "css": {},
                                                                    "visible": true,
                                                                    "enabled": true,
                                                                    "classes": [],
                                                                    "parentType": "row"
                                                                }
                                                            }],
                                                            "sortChildren": false,
                                                            "guid": "3a865788-44ca-49a1-b592-f20f501bed4d",
                                                            "id": "inputsRow",
                                                            "index": 0,
                                                            "spacing": {
                                                                "mb": 1
                                                            },
                                                            "css": {},
                                                            "visible": true,
                                                            "enabled": true,
                                                            "classes": []
                                                        }
                                                    },
                                                    {
                                                        "ctor": "Container",
                                                        "props": {
                                                            "height": 500,
                                                            "type": "row",
                                                            "components": [],
                                                            "sortChildren": false,
                                                            "guid": "1af15652-856c-4448-accc-fe80aa50107e",
                                                            "id": "mapContainer",
                                                            "index": 0,
                                                            "spacing": {},
                                                            "css": {},
                                                            "visible": true,
                                                            "enabled": true,
                                                            "classes": []
                                                        }
                                                    }
                                                ],
                                                "sortChildren": false,
                                                "guid": "77307f10-70b3-40d5-8f6b-7a8c523a9dda",
                                                "id": "modalBody",
                                                "index": 0,
                                                "spacing": {},
                                                "css": {
                                                    "overflow-y": "auto",
                                                    "max-height": "80vh"
                                                },
                                                "visible": true,
                                                "enabled": true,
                                                "classes": [
                                                    "modal-body"
                                                ]
                                            }
                                        },
                                        {
                                            "ctor": "Container",
                                            "props": {
                                                "components": [],
                                                "sortChildren": false,
                                                "guid": "675f5bf4-62bb-43c2-ab11-f378f4c0d9c0",
                                                "id": "modalFooter",
                                                "index": 0,
                                                "spacing": {},
                                                "css": {},
                                                "visible": true,
                                                "enabled": true,
                                                "classes": [
                                                    "modal-footer"
                                                ]
                                            }
                                        }
                                    ],
                                    "sortChildren": false,
                                    "guid": "18b1b430-c403-46e4-9e54-58bae746c4c3",
                                    "id": "modalContent",
                                    "index": 0,
                                    "spacing": {},
                                    "css": {},
                                    "visible": true,
                                    "enabled": true,
                                    "classes": [
                                        "modal-content"
                                    ]
                                }
                            }],
                            "sortChildren": false,
                            "guid": "850d3e41-a173-4a90-9075-34b10e976dc8",
                            "id": "modalDialog",
                            "index": 0,
                            "spacing": {},
                            "attr": {
                                "role": "document"
                            },
                            "css": {},
                            "visible": true,
                            "enabled": true,
                            "classes": [
                                "modal-dialog",
                                "modal-lg"
                            ]
                        }
                    }],
                    "sortChildren": false,
                    "guid": "3bf448cd-ec13-4573-b17c-58f6eda94bc2",
                    "id": "locationSelectModal",
                    "index": 0,
                    "spacing": {},
                    "attr": {
                        "data-triggers": "displayListUpdated accept dismiss shown hidden",
                        "tabindex": -1,
                        "role": "dialog"
                    },
                    "css": {
                        "z-index": 1042
                    },
                    "visible": true,
                    "enabled": true,
                    "classes": [
                        "modal",
                        "modal-fullscreen"
                    ]
                }
            }
        ],
        "sortChildren": false,
        "guid": "b16ca87c-5103-46b2-b162-0669db0c67c0",
        "id": "map",
        "index": 0,
        "spacing": {},
        "attr": {
            "data-triggers": "browse",
            "isCmp": true
        },
        "css": {},
        "visible": true,
        "enabled": true,
        "draggable": true,
        "classes": [
            "wrap"
        ]
    }
}

RadioGroup Component

Radio Group is a component composed of smaller units known as Radio Buttons. A radio button represents a single option and the combination of several radio buttons forms a RadioGroup. RadioGroup allows the user to choose a single option from a set of options which makes it ideal for gender and status options as one person may have only one.

  • RadioGroup
  • Properties
  • Example

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.
  • DataProvider: fills the component with data.

var myTextarea = new TextArea({
id: 'textarea',
label: 'Textarea Label',
versionStyle: '',
blockProcessAttr: false,
spellCheck: {
defaultDictionary: 'English',
},
value: ''
});

TextArea Component

This component is composed of two parts. Initially, TextArea specifies a multi-line input field in which the user can enter an unlimited number of characters. The second part of this component is the SpellCheck button, which identifies spelling errors in the text entered as input by the user.

  • TextArea
  • Properties
  • Example
  • JSON

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Colspan, Spacing: determine the appearance and position of the component.
  • Spell Check: the Spell Check button shows us a list of options in order to select the grammar in which we want to make the correction right.

var myTextarea = new TextArea({
id: 'textarea',
label: 'Textarea Label',
versionStyle: '',
blockProcessAttr: false,
spellCheck: {
defaultDictionary: 'English', },
value: ''
});

{
    "ctor": "TextArea",
    "props": {
        "spellCheck": null,
        "guid": "1",
        "id": "textarea",
        "index": 0,
        "spacing": {},
        "attr": {
            "isCmp": true
        },
        "css": {},
        "visible": true,
        "enabled": true,
        "draggable": true,
        "classes": []
    }
}

TextInput Component

TextInput Component specifies an input field with a text input line in which the user can input data.

  • TextInput
  • Properties
  • Example
  • JSON

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Input Mask: allows you to select the type of data you want to get as input from the user.
  • Colspan, Spacing: determine the appearance and position of the component.

var myText = TextInput({
id: 'textField',
label: 'Text Label',
versionStyle: '',
blockProcessAttr: false,
mask: 'currency',
value: '34,444.00'
});

{
    "ctor": "TextInput",
    "props": {
        "value": "",
        "type": "text",
        "autocomplete": "off",
        "components": [],
        "sortChildren": false,
        "guid": "1",
        "id": "textField",
        "index": 0,
        "spacing": {},
        "attr": {
            "isCmp": true
        },
        "css": {},
        "visible": true,
        "enabled": true,
        "draggable": true,
        "classes": []
    }
}

Upload Component

This component is a very practical solution that gives users the ability to upload images (png, jpeg, jpg, gif) and documents (pdf, docx, xlsx) to the server.

  • Upload
  • Properties
  • Example
  • JSON

  • Name or id: used to reference the component.
  • Label: used to give the component a name.
  • Visible: toggles the component's visibility in the browser.
  • Enable: toggles the component's modifiability by the user.
  • Required: checks if the data must be completed before being sent for further processing.
  • Input Mask: allows you to select the type of data you want to get as input from the user.
  • Colspan, Spacing: determine the appearance and position of the component.
  • Multiple Upload: allows the user to upload more than one file at the same time, but only if the user is allowed to do this action.
  • Allowed File Extensions: contains a list from which you can select the file format that the user can upload.

var firstUpload = new Upload({
id: 'upload',
spacing: { mb: '5' },
multiple: true,
allowDrop: true,
target: 'http://phptest/upload.php'
});

{
    "ctor": "UploadEx",
    "props": {
        "type": "container",
        "components": [{
                "ctor": "Container",
                "props": {
                    "height": 30,
                    "type": "row",
                    "components": [{
                            "ctor": "Container",
                            "props": {
                                "components": [{
                                    "ctor": "Label",
                                    "props": {
                                        "html": "",
                                        "labelType": "i",
                                        "components": [],
                                        "sortChildren": false,
                                        "guid": "a46a812f-b74e-477a-8a7a-909d0f0b3a82",
                                        "id": "iconLbl",
                                        "index": 0,
                                        "spacing": {},
                                        "css": {},
                                        "visible": true,
                                        "enabled": true,
                                        "classes": []
                                    }
                                }],
                                "sortChildren": false,
                                "guid": "81f2228d-6aba-45b8-b336-df0b6fc159e5",
                                "id": "iconColumn",
                                "index": 0,
                                "spacing": {
                                    "colSpan": 1
                                },
                                "css": {},
                                "visible": true,
                                "enabled": true,
                                "classes": [],
                                "parentType": "row"
                            }
                        },
                        {
                            "ctor": "Container",
                            "props": {
                                "components": [{
                                        "ctor": "Label",
                                        "props": {
                                            "label": "No file selected.",
                                            "html": "No file selected.",
                                            "labelType": "label",
                                            "components": [],
                                            "sortChildren": false,
                                            "guid": "1b08a6f6-28e7-4de2-b824-c70a240d6a19",
                                            "id": "fileName",
                                            "index": 0,
                                            "spacing": {},
                                            "css": {},
                                            "visible": true,
                                            "enabled": true,
                                            "classes": []
                                        }
                                    },
                                    {
                                        "ctor": "Upload",
                                        "props": {
                                            "name": "uploadInput[]",
                                            "guid": "1c8be83f-73f0-4091-bc7d-898b03c345d8",
                                            "id": "uploadInput",
                                            "index": 0,
                                            "spacing": {},
                                            "css": {},
                                            "visible": true,
                                            "enabled": true,
                                            "classes": [
                                                "d-none"
                                            ]
                                        }
                                    }
                                ],
                                "sortChildren": false,
                                "guid": "d708a41c-a5f0-46e3-a000-bfec1699edd8",
                                "id": "fileNameColumn",
                                "index": 0,
                                "spacing": {
                                    "colSpan": 7
                                },
                                "css": {},
                                "visible": true,
                                "enabled": true,
                                "classes": [],
                                "parentType": "row"
                            }
                        },
                        {
                            "ctor": "Container",
                            "props": {
                                "components": [{
                                    "ctor": "Label",
                                    "props": {
                                        "html": "",
                                        "labelType": "label",
                                        "components": [],
                                        "sortChildren": false,
                                        "guid": "bcc5ae85-d4d0-4df7-9a1c-4f069414a1ed",
                                        "id": "fileSize",
                                        "index": 0,
                                        "spacing": {},
                                        "css": {},
                                        "visible": true,
                                        "enabled": true,
                                        "classes": []
                                    }
                                }],
                                "sortChildren": false,
                                "guid": "27eff6db-0cf5-453f-8711-8d7b7925ab13",
                                "id": "fileSizeColumn",
                                "index": 0,
                                "spacing": {
                                    "colSpan": 1
                                },
                                "css": {},
                                "visible": true,
                                "enabled": true,
                                "classes": [],
                                "parentType": "row"
                            }
                        },
                        {
                            "ctor": "Container",
                            "props": {
                                "role": "group",
                                "type": "btn-group",
                                "components": [{
                                        "ctor": "Button",
                                        "props": {
                                            "type": "button",
                                            "components": [{
                                                "ctor": "Label",
                                                "props": {
                                                    "html": "",
                                                    "labelType": "i",
                                                    "components": [],
                                                    "sortChildren": false,
                                                    "guid": "053c0a13-4599-4db4-85e8-6e2983bb9b13",
                                                    "id": "fa",
                                                    "index": 0,
                                                    "spacing": {},
                                                    "css": {},
                                                    "visible": true,
                                                    "enabled": true,
                                                    "classes": [
                                                        "fas",
                                                        "fa-folder-open"
                                                    ],
                                                    "parentType": "button"
                                                }
                                            }],
                                            "sortChildren": false,
                                            "guid": "914154e2-c1be-4b19-b59a-b9db785a7f55",
                                            "id": "selectBtn",
                                            "index": 0,
                                            "spacing": {},
                                            "css": {},
                                            "visible": true,
                                            "enabled": true,
                                            "classes": [],
                                            "parentType": "btn-group"
                                        }
                                    },
                                    {
                                        "ctor": "Button",
                                        "props": {
                                            "type": "button",
                                            "components": [{
                                                "ctor": "Label",
                                                "props": {
                                                    "html": "",
                                                    "labelType": "i",
                                                    "components": [],
                                                    "sortChildren": false,
                                                    "guid": "4f334999-26e4-4c5c-81b4-8b92579a7c45",
                                                    "id": "fa",
                                                    "index": 0,
                                                    "spacing": {},
                                                    "css": {},
                                                    "visible": true,
                                                    "enabled": false,
                                                    "classes": [
                                                        "fas",
                                                        "fa-cloud-upload-alt"
                                                    ],
                                                    "parentType": "button"
                                                }
                                            }],
                                            "sortChildren": false,
                                            "guid": "82e5242b-d298-45a2-8513-f325790ab497",
                                            "id": "uploadBtn",
                                            "index": 0,
                                            "spacing": {},
                                            "css": {},
                                            "visible": true,
                                            "enabled": false,
                                            "classes": [],
                                            "parentType": "btn-group"
                                        }
                                    },
                                    {
                                        "ctor": "Button",
                                        "props": {
                                            "type": "button",
                                            "components": [{
                                                "ctor": "Label",
                                                "props": {
                                                    "html": "",
                                                    "labelType": "i",
                                                    "components": [],
                                                    "sortChildren": false,
                                                    "guid": "c25f4f2d-ae45-4110-bb6f-a5af6dd3effa",
                                                    "id": "fa",
                                                    "index": 0,
                                                    "spacing": {},
                                                    "css": {},
                                                    "visible": true,
                                                    "enabled": false,
                                                    "classes": [
                                                        "fas",
                                                        "fa-trash"
                                                    ],
                                                    "parentType": "button"
                                                }
                                            }],
                                            "sortChildren": false,
                                            "guid": "49f74bdc-640b-4af6-9797-db892f396466",
                                            "id": "removeBtn",
                                            "index": 0,
                                            "spacing": {},
                                            "css": {},
                                            "visible": true,
                                            "enabled": false,
                                            "classes": [],
                                            "parentType": "btn-group"
                                        }
                                    }
                                ],
                                "sortChildren": false,
                                "guid": "7d3806eb-0066-4e8a-8c7c-bd301c66af26",
                                "id": "controlsColumn",
                                "index": 0,
                                "spacing": {
                                    "colSpan": 3,
                                    "pl": 0,
                                    "pr": 0
                                },
                                "css": {},
                                "visible": true,
                                "enabled": true,
                                "classes": [],
                                "parentType": "row"
                            }
                        }
                    ],
                    "sortChildren": false,
                    "guid": "b62f4405-0eb2-46e4-8fb2-2e3242d9f5df",
                    "id": "mainRow",
                    "index": 0,
                    "spacing": {},
                    "css": {},
                    "visible": true,
                    "enabled": true,
                    "classes": [],
                    "parentType": "container"
                }
            },
            {
                "ctor": "Container",
                "props": {
                    "height": 5,
                    "type": "row",
                    "components": [{
                        "ctor": "Container",
                        "props": {
                            "height": 5,
                            "components": [{
                                "ctor": "ProgressBar",
                                "props": {
                                    "width": "100%",
                                    "height": "100%",
                                    "components": [{
                                        "ctor": "Container",
                                        "props": {
                                            "role": "progressbar",
                                            "components": [],
                                            "sortChildren": false,
                                            "guid": "3acfb896-70f3-4f64-86aa-eb1b583711de",
                                            "id": "progressBar",
                                            "index": 0,
                                            "spacing": {},
                                            "css": {},
                                            "visible": true,
                                            "enabled": true,
                                            "classes": [
                                                "progress-bar"
                                            ],
                                            "valueMax": 100
                                        }
                                    }],
                                    "sortChildren": false,
                                    "guid": "d8d2f814-e46f-40d6-a579-861176388a71",
                                    "id": "progressbar",
                                    "index": 0,
                                    "spacing": {},
                                    "css": {},
                                    "visible": true,
                                    "enabled": true,
                                    "classes": [
                                        "bg-info",
                                        "progress-bar",
                                        "progress-bar-animated",
                                        "progress-bar-striped "
                                    ]
                                }
                            }],
                            "sortChildren": false,
                            "guid": "8f0dde4b-2b5c-4b25-8278-ee8e28804b9b",
                            "id": "progressColumn",
                            "index": 0,
                            "spacing": {
                                "colSpan": 12,
                                "pl": 0
                            },
                            "css": {},
                            "visible": true,
                            "enabled": true,
                            "classes": [
                                "progress"
                            ],
                            "parentType": "row"
                        }
                    }],
                    "sortChildren": false,
                    "guid": "bc1401d6-1222-4a4c-8478-95de62fcb9e7",
                    "id": "progressRow",
                    "index": 0,
                    "spacing": {},
                    "css": {},
                    "visible": true,
                    "enabled": true,
                    "classes": [
                        "d-none"
                    ],
                    "parentType": "container"
                }
            }
        ],
        "sortChildren": false,
        "guid": "3e3bd344-70fc-4c98-acf6-fdba7815268c",
        "id": "upload",
        "index": 0,
        "spacing": {},
        "attr": {
            "isCmp": true
        },
        "css": {},
        "visible": true,
        "enabled": true,
        "draggable": true,
        "classes": []
    }
}
Components In-Depth
Examples