setProperties()

allows changing available configuration attributes of Form controls dynamically

setProperties(arg: string | { [name: string]: object }, properties?: object): void;

Parameters:

• arg: string | object - either the name of the control or its id (if the name attribute is not defined in the config of the control), or 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 new values
• properties: object - optional, an object with the available attributes of the control and their new values

Example

form.setProperties("input_name", {
    label: "new label",
    css: "new-css",
    padding: "20px",
    height: 100,
    maxlength: 15,
    readOnly: true
});

The method invokes the afterChangeProperties and beforeChangeProperties events.

note

Note, that the method allows changing values only for the properties that are listed below for each control.

Here are two ways of using the setProperties method:

1. To change values for the available attributes of a separate control you need to pass two parameters to the method:

• arg - (string) the name of the control (or its id)
• properties - (object) an object with available attributes of the control and their new values

For instance:

form.setProperties("input_name", {
  label: "new label",
  css: "new-css",
  padding: "20px",
  height: 100,
  maxlength: 15,
  readOnly: true,
});

2. You can also change values for the available properties of several controls at once. For that, you need to pass one parameter to the method:

• arg - (object) 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 new values

For example:

form.setProperties({
    "simplevault_name": {
        label: "new label",
        css: "new-css",
        padding: 20,
        required: true
    },
    "input_name": {
        label: "new label",
        css: "new-css",
        padding: "20px",
        height: 100,
        maxlength: 15,
        readOnly: true
    }
});

Button

It is possible to change the following configuration attributes of the Button control:

{
    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

It is possible to change the following configuration attributes of the DatePicker control:

{
    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

It is possible to change the following configuration attributes of the Checkbox control:

{
    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

It is possible to change the following configuration attributes of the CheckboxGroup control:

{
    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

It is possible to change the following configuration attributes of a checkbox of the CheckboxGroup control:

{
    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

It is possible to change the following configuration attributes of the ColorPicker control:

{
    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

It is possible to change the following configuration attributes of the Combo control:

{
    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

It is possible to change the following configuration attributes of the Container control:

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

You will find the description of these properties here.

Input

It is possible to change the following configuration attributes of the Input control:

{
    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

It is possible to change the following configuration attributes of the RadioGroup control:

{
    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

It is possible to change the following configuration attributes of a radio button of the RadioGroup control:

{
    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

It is possible to change the following configuration attributes of the Select control:

{
    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

It is possible to change the following configuration attributes of the SimpleVault control:

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

You will find the description of these properties here.

Slider

It is possible to change the following configuration attributes of the Slider control:

{
    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

It is possible to change the following configuration attributes of the Spacer control:

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

You will find the description of these properties here.

Text

It is possible to change the following configuration attributes of the Text control:

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

You will find the description of these properties here.

Textarea

It is possible to change the following configuration attributes of the Textarea control:

{
    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

It is possible to change the following configuration attributes of the TimePicker control:

{
    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.

Related API: getProperties()

Change log:

added in v7.0