getProperties()

returns objects with available configuration attributes of Form controls

getProperties(name?: string): object | { [name: string]: object };

Parameters:

• name|id: string - optional, the name of the control or its id (if the name attribute is not defined in the config of the control)

Returns:

An object either with the available attributes of the control and their values or with a set of key:value pairs where key is the name of the control (or its id) and value is an object with the available attributes of the control and their values.

Example

const form = new dhx.Form("form_container", {
    css: "dhx_widget--bordered",
    rows: [
        {
            type: "input",
            label: "Name",
            icon: "dxi dxi-magnify",
            placeholder: "John Doe",
            name: "name"
        },
        {
            type: "input",
            inputType: "password",
            label: "Password",
            placeholder: "********",
            name: "password"
        },
        {
            type: "button",
            text: "Send",
            size: "medium",
            view: "flat",
            submit: true
        }
    ]
});

form.getProperties();
// -> {name: {…}, password: {…}, u1604577858827: {…}}

// or
form.getProperties("password");
// -> {inputType: "password", label: "Password", placeholder: "********", …}

note

The returned object can contain only the properties that are listed below for each control.

Here are two ways of using the method:

• When using the method without the parameter, the method returns an object with a set of key:value pairs where key is the name of the control (or its id) and value is an object with the available attributes of the control and their values:

form.getProperties();
// -> the returned object:
{
    name: {
        autocomplete: false, errorMessage: "", height: "content", helpMessage: "",
        hiddenLabel: false, icon: "dxi dxi-magnify", inputType: "text", …
    },
    password: {
        autocomplete: false, errorMessage: "", height: "content",
        helpMessage: "", hiddenLabel: false, icon: "", inputType: "password", …
    },
    u1604577858827: {
        circle: false, color: "primary", full: false, height: "content",
        icon: "", loading: false, padding: 0, size: "medium", submit: true, …

    }
}

• When passing the name of the control (or its id) as a parameter to the method, the method will return an object with the available attributes of the control and their values:

form.getProperties("name");

// -> the returned object:
{
    autocomplete: false,
    css: "",
    errorMessage: "",
    height: "content",
    helpMessage: "",
    hiddenLabel: false,
    icon: "dxi dxi-magnify",
    inputType: "text",
    label: "Name",
    labelPosition: "top",
    labelWidth: "",
    max: undefined,
    maxlength: undefined,
    min: undefined,
    minlength: undefined,
    padding: 0,
    placeholder: "John Doe",
    preMessage: "",
    readOnly: false,
    required: false,
    successMessage: "",
    validation: undefined,
    width: "content"
}

Avatar

The returned object of the Avatar control can contain the following properties:

{
    css: string,
    width: string | number | "content",
    height: string | number | "content",
    padding: string | number,
    label: string,
    labelWidth: string | number,
    labelPosition: "left" | "top",
    hiddenLabel: boolean,
    helpMessage: string
    required: boolean,
    preMessage: string,
    successMessage: string,
    errorMessage: string,
    validation: (value: object) => boolean,
    readOnly: boolean,
    removeIcon: boolean,
    size: "small" | "medium" | "large" | number,
    circle: boolean,
    alt: string,
    icon: string,
    placeholder: string,
    preview: string,
    accept: string,
    target: string
    fieldName: string,
    autosend: boolean,
    params: { [key: string]: any },
    headerParams: { [key: string]: any },
    updateFromResponse: boolean
}

You will find the description of these properties here.

Button

The returned object of the Button control can contain the following properties:

{
    circle: boolean,
    color: string,
    css: string,
    full: boolean,
    height: string | number | "content",
    icon: string,
    loading: boolean,
    padding: string | number,
    size: string,
    submit: boolean,
    text: string,
    url: string,
    view: string,
    width: string | number | "content",
}

You will find the description of these properties here.

DatePicker

The returned object of the DatePicker control can contain the following properties:

{
    css: string,
    dateFormat: string,
    disabledDates: function,
    editable: boolean,
    errorMessage: string,
    height: string | number | "content",
    helpMessage: string,
    hiddenLabel: boolean, 
    icon: string,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    mark: function,
    mode: string,
    padding: string | number,
    placeholder: string,
    preMessage: string,
    required: boolean,
    successMessage: string,
    thisMonthOnly: boolean,
    timeFormat: number,
    timePicker: boolean,
    validation: function,
    valueFormat: string,
    weekNumbers: boolean,
    weekStart: string,
    width: string | number | "content"
}

You will find the description of these properties here.

Checkbox

The returned object of the Checkbox control can contain the following properties:

{
    css: string,
    errorMessage: string,
    height: string | number | "content",
    helpMessage: string,
    hiddenLabel: boolean,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    padding: string | number,
    preMessage: string,
    required: boolean,
    successMessage: string,
    text: string,
    width: string | number | "content",
}

You will find the description of these properties here.

CheckboxGroup

The returned object of the CheckboxGroup control can contain the following properties:

{
    css: string,
    errorMessage: string,
    height: string | number|"content",
    helpMessage: string,
    hiddenLabel: boolean,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    options: object,
    padding: string | number,
    preMessage: string,
    required: boolean,
    successMessage: string,
    width: string | number | "content"
}

You will find the description of these properties here.

Checkbox properties

The returned object of a checkbox of the CheckboxGroup control can contain the following properties:

{
    css: string,
    height: string | number | "content",
    padding: string | number,
    text: string,
    width: string | number | "content"
}

You will find the description of these properties here.

ColorPicker

The returned object of the ColorPicker control can contain the following properties:

{
    css: string,
    customColors: array,
    editable: boolean,
    errorMessage: string,
    grayShades: boolean,
    height: string | number | "content",
    helpMessage: string,
    hiddenLabel: boolean,
    icon: string,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    mode: string,
    padding: string | number,
    palette: array,
    placeholder: string,
    preMessage: string,
    required: boolean,
    successMessage: string,
    validation: function,
    width: string | number | "content"
}

You will find the description of these properties here.

Combo

The returned object of the Combo control can contain the following properties:

{
    css: string,
    errorMessage: string,
    filter: function, 
    height: string | number | "content",
    helpMessage: string,
    hiddenLabel: boolean,
    itemHeight: number,
    itemsCount: boolean | function,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    listHeight: number,
    multiselection: boolean,
    padding: string | number,
    placeholder: string,
    preMessage: string,
    readOnly: boolean,
    required: boolean,
    selectAllButton: boolean,
    successMessage: string,
    template: function,
    validation: function,
    virtual: boolean,
    width: string | number | "content"
}

You will find the description of these properties here.

Container

The returned object of the Container control can contain the following properties:

{
    css: string,
    height: string | number | "content", 
    padding: string | number,
    width: string, number, "content"
}

You will find the description of these properties here.

Fieldset

The returned object of the Fieldset control can contain the following properties:

{
    css: string,
    width: string | number | "content",
    height: string | number | "content",
    padding: string | number,

    label: string,
    labelAlignment: "left" | "right" | "center",
    align: "start" | "center" | "end" | "between" | "around" | "evenly"
}

You will find the description of these properties here.

Input

The returned object of the Input control can contain the following properties:

{
    autocomplete: boolean,
    css: string,
    errorMessage: string,
    height: string | number | "content",
    helpMessage: string,
    hiddenLabel: boolean,
    icon: string,
    inputType: string,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    max: string | number,
    maxlength: string | number,
    min: string | number,
    minlength: string | number,
    padding: string | number,
    placeholder: string,
    preMessage: string,
    readOnly: boolean,
    required: boolean,
    successMessage: string,
    validation: object | function,
    width: string | number | "content"
}

You will find the description of these properties here.

RadioGroup

The returned object of the RadioGroup control can contain the following properties:

{
    css: string,
    errorMessage: string,
    height: string | number | "content",
    helpMessage: string,
    hiddenLabel: boolean,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    options: object,
    padding: string | number,
    preMessage: string,
    required: boolean,
    successMessage: string,
    width: string | number | "content"
}

You will find the description of these properties here.

RadioButton properties

The returned object of a radio button of the RadioGroup control can contain the following properties:

{
    css: string,
    height: string | number | "content",
    padding: string | number,
    text: string,
    width: string | number | "content"
}

You will find the description of these properties here.

Select

The returned object of the Select control can contain the following properties:

{
    css: string,
    errorMessage: string,
    height: string | number | "content",
    helpMessage: string,
    hiddenLabel: boolean,
    icon: string,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    padding: string | number,
    preMessage: string,
    successMessage: string,
    validation: function,
    width: string | number | "content"
}

You will find the description of these properties here.

SimpleVault

The returned object of the SimpleVault control can contain the following properties:

{
    css: string,
    width: string | number | "content",
    height: string | number | "content",
    padding: string | number,
    label: string,
    labelWidth: string | number,
    labelPosition: "left" | "top",
    hiddenLabel: boolean,
    helpMessage: string,
    required: boolean,
    preMessage: string,
    successMessage: string,
    errorMessage: string,
    params: { [key: string]: any },
    headerParams: { [key: string]: any },
    target: string,
    fieldName: string,
    singleRequest: boolean,
    updateFromResponse: boolean,
    autosend: boolean,
    accept: string,
    validation: (value: ISimpleVaultValue) => boolean
}

You will find the description of these properties here.

Slider

The returned object of the Slider control can contain the following properties:

{
    css: string,
    height: string | number | "content",
    helpMessage: string,
    hiddenLabel: boolean,
    inverse: boolean,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    majorTick: number,
    max: number,
    min: number,
    mode: string,
    padding: string | number,
    range: boolean,
    step: number,
    tick: number,
    tickTemplate: function,
    tooltip: boolean, 
    width: string | number | "content"
}

You will find the description of these properties here.

Spacer

The returned object of the Spacer control can contain the following properties:

{
    css: string,
    height: string | number | "content"
    padding: string | number
    width: string | number | "content"
}

You will find the description of these properties here.

Text

The returned object of the Text control can contain the following properties:

{
    css: string,
    height: string | number | "content",
    helpMessage: string,
    hiddenLabel: boolean,
    inputType: string,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    padding: string | number,
    width: string | number | "content"
}

You will find the description of these properties here.

Textarea

The returned object of the Textarea control can contain the following properties:

{
    css: string,
    errorMessage: string,
    height: string | number | "content",
    helpMessage: string,
    hiddenLabel: boolean,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    maxlength: string | number,
    minlength: string | number,
    padding: string | number,
    placeholder: string,
    preMessage: string,
    readOnly: boolean,
    required: boolean,
    successMessage: string,
    validation: object | function,
    width: string | number | "content"
}

You will find the description of these properties here.

TimePicker

The returned object of the TimePicker control can contain the following properties:

{
    controls: boolean,
    css: string,
    editable: boolean,
    errorMessage: string,
    height: string | number| "content",
    helpMessage: string,
    hiddenLabel: boolean,
    icon: string,
    label: string,
    labelPosition: string,
    labelWidth: string | number,
    padding: string | number,
    placeholder: string,
    preMessage: string,
    required: boolean,
    successMessage: string,
    timeFormat: number,
    validation: function,
    valueFormat: string,
    width: string | number | "content"
}

You will find the description of these properties here.

Toggle

The returned object of the Toggle control can contain the following properties:

{
    css: string,
    width: string | number | "content",
    height: string | number | "content",
    padding: string | number,
    full: boolean,
    text: string,
    icon: string,
    offText: string,
    offIcon: string,
    value: string | number
}

You will find the description of these properties here.

ToggleGroup

The returned object of the ToggleGroup control can contain the following properties:

{
    css: string,
    full: boolean,
    gap: number,
    height: string | number |"content",
    multiselection: boolean,
    options: object[],
    padding: string | number,
    width: string | number | "content"
}

You will find the description of these properties here.

Toggle properties

The returned object of a toggle of the ToggleGroup control can contain the following properties:

{
    full: boolean,
    text: string,
    icon: string,
    offText: string,
    offIcon: string,
    value: string | number
}

You will find the description of these properties here.

Related API: setProperties()

Change log:

added in v7.0