RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/form/api/form_setproperties_method/ below:

JavaScript Form - setProperties Method

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

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.

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()

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4