_activeComponentId = 'form';

Form Builder

Build mode turns the Form component into a drag-and-drop designer, drag field types onto the canvas, reorder and configure them, then hand the result to a form rendered in Edit or View mode elsewhere. No data model is needed here, that only comes into play once you render the finished definition for actual data entry.

Try it

Drag a field type from the left panel onto the form to add it, or click a field to configure it in the right panel. The commands in the form's header let you undo, redo and preview your changes. The Price field already has the Price Field role assigned: select it to see the role in its settings, then select a text field to see that this role is only available for NumericBox fields.

The form builder needs at least 1080px of horizontal space to fit its panels and the form side by side. Open this page on a desktop or laptop to try it.

Usage

The HTML and JavaScript tabs build the identical Form Builder setup shown above, declaratively via attributes or imperatively via the JS API. A FieldRole marks a field for special handling elsewhere in your app once the definition is saved. The Price field above already has the Price Field role assigned, restricted to NumericBox fields via inputType, so wherever this saved definition gets processed later, that field can be picked out by its role rather than by name, regardless of what the person building the form happened to call it.

<cui-form id="form"
          ui-display-mode="2"
          ui-fixed-layout="false"
          ui-field-roles='[
    { "id": "Price", "label": "Price Field", "inputType": 6 }
]'
          ui-field-sets='[
    { "type": "FieldSet", "label": "Product", "fields": [
        { "type": "Field", "name": "productName", "label": "Product Name" },
        { "type": "Field", "name": "price", "label": "Price", "inputType": 6, "role": "Price" },
        { "type": "Field", "name": "inStock", "label": "In Stock", "inputType": 2 }
    ] }
]'></cui-form>

const form = $UI.createComponent(componyx.UI.Form, {
    id: 'form',
    displayMode: componyx.UI.Form.DisplayModeOption.BUILD,
    fixedLayout: false,
    fieldRoles: [
        new componyx.UI.Form.FieldRole({ id: 'Price', label: 'Price Field', inputType: componyx.UI.Form.InputTypeOption.NUMERICBOX })
    ],
    fieldSets: [
        new componyx.UI.Form.FieldSet({
            label: 'Product',
            fields: [
                new componyx.UI.Form.Field({ name: 'productName', label: 'Product Name' }),
                new componyx.UI.Form.Field({
                    name: 'price',
                    label: 'Price',
                    inputType: componyx.UI.Form.InputTypeOption.NUMERICBOX,
                    role: 'Price'
                }),
                new componyx.UI.Form.Field({
                    name: 'inStock',
                    label: 'In Stock',
                    inputType: componyx.UI.Form.InputTypeOption.CHECKBOX
                })
            ]
        })
    ],
    containerElement: document.body
});

form.show();

What's next

See the Form API reference for the complete list of properties, events and methods, including rule cases, repeatable field sets and validation options. See the Form demo for how a saved definition gets bound to real data in Edit and View mode.