Skip to main content

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
    }
});

Avatar​

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

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

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.

Fieldset​

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

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

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,
    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​

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.

Toggle​

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

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

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

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

It is possible to change the following configuration attributes of a toggle of the ToggleGroup control:

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

You will find the description of these properties here.

Related API: getProperties()

Change log:

added in v7.0