How build UIs with Data forms

map.apps offers a convenient way to create user interfaces. Instead of implementing own Dijit widgets a JSON definition can be used describing the form elements and potential validation rules. The DataFormService interprets the JSON and renders a user interface.

JSON Definition
{
    "dataform-version": "1.0.0",
    "size": {
        "h": 300,
        "w": 500
    },
    "type": "gridpanel",
    "showLabels": true,
    "children": [
        {
            "type": "numbertextbox",
            "field": "max10",
            "title": "Enter a number",
            "max": 10,
            "min": 2,
            "size": {
                "l": 150,
                "t": 50
            }
        }
    ]
}

dataform

The following UI elements are available:

Type Name Short Description

panel

Panel

A layout panel for placing other panels or form controls.

tabpanel

TabPanel

A layout panel displaying subpanels as tabs.

borderpanel

BorderPanel

A layout panel arranging subpanels with "top,right,bottom,left,center" properties.

accordionpanel

AccordionPanel

A layout panel displaying subpanels as accordion stack.

label

Label

A form control displaying static text.

textbox

TextBox

A text input form control.

checkbox

CheckBox

A form control which displays a checkbox, used for boolean conditions.

numbertextbox

NumberTextBox

A text input form control for editing numbers.

numberspinner

NumberSpinner

A text input form control for editing numbers and providing +/- buttons.

timetextbox

TimeTextBox

A text input form control for editing time values, provides a drop-down for time selections.

datetextbox

DateTextBox

A text input form control for editing date values, provides a calendar for selecting dates.

textarea

Textarea

A text input form control for multiline text.
For more information about data forms, see the data form bundle documentation .