setProperties()
allows changing available configuration attributes of Form controls dynamically
setProperties(arg: string | { [name: string]: IFormProps }, props?: IFormProps): 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 valuesproperties: 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:
| text | (string) the text label of a button |
| submit | (boolean) enables the button to send form data to a server |
| url | (string) the URL the post request with form data will be sent to (if the submit property is set to true) |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| css | (string) adds style classes to a control |
| icon | (string) an icon of the button |
| view | (string) defines the look of a button: "flat"|"link" |
| size | (string) defines the size of a button: "small"|"medium" |
| color | (string) defines the color scheme of a button: "danger"|"secondary"|"primary"|"success" |
| full | (boolean) extends a button to the full width of a form |
| circle | (boolean) makes the corners of a button round |
| loading | (boolean) adds a spinner into a button |
| padding | (string|number) sets padding between a cell and a border of a button control |
DatePicker
It is possible to change the following configuration attributes of the DatePicker control:
| valueFormat | (string) defines the format of the value that will be returned while getting the current value of the control: "string" (default) or "Date" |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of a DatePicker control |
| css | (string) adds style classes to a control |
| required | (boolean) defines whether a control is required |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control |
| successMessage | (string) a message that appears in case of successful validation of the control value |
| errorMessage | (string) a message that appears in case of error during validation of the control value |
| label | (string) specifies a label for a control |
| labelWidth | (string|number) sets the width of the label of a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| validation | (function) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation |
| icon | (string) the name of an icon from the used icon font |
| placeholder | (string) a tip for the input |
| editable | (boolean) allows a user to enter the value of the control manually |
| mode | (string) specifies the mode of displaying a calendar: "calendar" (default), "month", "year" |
| mark | (function) adds a CSS class to specific days |
| disabledDates | (function) allows disabling some date intervals, day labels are dimmed |
| weekStart | (string) sets the starting day of the week: "monday" or "sunday" (default) |
| weekNumbers | (boolean) defines whether to show the numbers of weeks, false by default |
| timePicker | (boolean) adds a timepicker into a calendar, false by default |
| timeFormat | (number) defines the time format of a timepicker: 12-hour or 24-hour (12 or 24 (default), correspondingly) |
| dateFormat | (string) defines the format of dates in the calendar, "%d/%m/%y" by default |
| thisMonthOnly | (boolean) hides dates of the previous/next months relative to the currently displayed one |
Checkbox
It is possible to change the following configuration attributes of the Checkbox control:
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of a Checkbox control |
| css | (string) adds style classes to a control |
| required | (boolean) defines whether a control is required |
| text | (string) optional, the text value of a control. It's placed to the right of the control. |
| label | (string) specifies a label for a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| labelWidth | (string|number) sets the width of the label of a control |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control |
| successMessage | (string) a message that appears in case of successful validation of the control value |
| errorMessage | (string) a message that appears in case of error during validation of the control value |
CheckboxGroup
It is possible to change the following configuration attributes of the CheckboxGroup control:
| options | (object) an object with options of a CheckboxGroup |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| css | (string) adds style classes to a control |
| required | (boolean) defines whether a control is required |
| padding | (string|number) sets padding between a cell and a border of a CheckboxGroup control |
| label | (string) specifies a label for a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| labelWidth | (string|number) sets the width of the label of a control |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control |
| successMessage | (string) a message that appears in case of successful validation of the control value |
| errorMessage | (string) a message that appears in case of error during validation of the control value |
Checkbox properties
| text | (string) the text label of a checkbox |
| width | (string|number|"content") the width of a checkbox |
| height | (string|number|"content") the height of a checkbox |
| padding | (string|number) sets padding between a cell and a border of a checkbox |
| css | (string) adds style classes to a a checkbox |
ColorPicker
It is possible to change the following configuration attributes of the ColorPicker control:
| validation | (function) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of the ColorPicker control |
| css | (string) adds style classes to a control |
| icon | (string) the name of an icon from the used icon font |
| placeholder | (string) a tip for the input |
| editable | (boolean) allows a user to enter the value of the control manually |
| required | (boolean) defines whether a control is required |
| label | (string) specifies a label for a control |
| labelWidth | (string|number) sets the width of the label of a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control |
| successMessage | (string) a message that appears in case of successful validation of the control value |
| errorMessage | (string) a message that appears in case of error during validation of the control value |
| mode | (string) the mode of a control: "palette" (default), "picker" |
| palette | (array) contains arrays of colors you want to be shown in a colorpicker |
| customColors | (array) shows a section with custom colors in the bottom part of the ColorPicker |
| grayShades | (boolean) defines whether the section with gray shades is displayed in the palette |
Combo
It is possible to change the following configuration attributes of the Combo control:
| validation | (function) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of the Combo control |
| css | (string) adds style classes to a control |
| placeholder | (string) sets a placeholder in the input of Combo |
| required | (boolean) defines whether the field with Combo is required (for a form) |
| readonly | (boolean) makes Combo readonly (it is only possible to select options from the list, without entering words in the input) |
| label | (string) specifies a label for a control |
| labelWidth | (string|number) sets the width of the label of a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control |
| successMessage | (string) a message that appears in case of successful validation of the control value |
| errorMessage | (string) a message that appears in case of error during validation of the control value |
| itemHeight | (number) sets the height of a cell in the list of options |
| listHeight | (number) sets the height of the list of options |
| template | (function) sets a template of displaying options in the popup list |
| filter | (function) sets a custom function for filtering Combo options. Check the details. |
| multiselection | (boolean) enables selection of multiple options in Combo |
| selectAllButton | (boolean) defines whether the Select All button should be shown |
| itemsCount | (boolean, function) shows the total number of selected options |
| virtual | (boolean) enables dynamic loading of data on scrolling the list of options |
Input
It is possible to change the following configuration attributes of the Input control:
| inputType | (string) the type of an input: "text", "password", "number" |
| min | (string|number) the minimal value allowed in the input. The attribute works only with the input type: "number". |
| max | (string|number) the maximal value allowed in the input. The attribute works only with the input type: "number". |
| step | (string|number) the step the value will be adjusted with when using up and down arrows. The attribute works only with the input type: "number". |
| validation | (object|function) the rule of input validation |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of the Input control |
| minlength | (string|number) the minimum number of characters allowed in the input. The attribute works with the following input types: "text", "password". |
| maxlength | (string|number) the maximum number of characters allowed in the input. The attribute works with the following input types: "text", "password". |
| css | (string) adds style classes to a control |
| required | (boolean) defines whether a control is required |
| readOnly | (boolean) defines whether an input is readonly |
| icon | (string) the name of an icon from the used icon font |
| placeholder | (string) a tip for the input |
| autocomplete | (boolean) enables/disables the autocomplete functionality of the input |
| label | (string) specifies a label for a control |
| labelWidth | (string|number) sets the width of the label of a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control |
| successMessage | (string) a message that appears in case of successful validation of the control value |
| errorMessage | (string) a message that appears in case of error during validation of the control value |
RadioGroup
It is possible to change the following configuration attributes of the RadioGroup control:
| options | (object) an object with options of a RadioGroup |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of a RadioGroup control |
| css | (string) adds style classes to a control |
| required | (boolean) defines whether a control is required |
| label | (string) specifies a label for a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| labelWidth | (string|number) sets the width of the label of a control |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control, applied for all radio buttons in a group |
| successMessage | (string) a message that appears in case of successful validation of the control value, applied for all radio buttons in a group |
| errorMessage | (string) a message that appears in case of error during validation of the control value, applied for all radio buttons in a group |
RadioButton properties
| text | (string) the text label of a radio button |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of a radio button |
| css | (string) adds style classes to a control |
Select
It is possible to change the following configuration attributes of the Select control:
| validation | (function) the validation function |
| icon | (string) the name of an icon from the used icon font |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of the Select control |
| css | (string) adds style classes to a control |
| label | (string) specifies a label for a control |
| labelWidth | (string|number) sets the width of the label of a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control |
| successMessage | (string) a message that appears in case of successful validation of the control value |
| errorMessage | (string) a message that appears in case of error during validation of the control value |
SimpleVault
It is possible to change the following configuration attributes of the SimpleVault control:
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of the SimpleVault control |
| css | (string) adds style classes to a control |
| required | (boolean) defines whether a control is required |
| label | (string) specifies a label for a control |
| labelWidth | (string|number) sets the width of the label of a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control |
| successMessage | (string) a message that appears in case of successful validation of the control value |
| errorMessage | (string) a message that appears in case of error during validation of the control value |
| fieldName | (string) the name of the file field in the form data that is sent to the server |
| params | (object) extra parameters for sending an XMLHttpRequest |
| singleRequest | (boolean) defines whether files are sent in one request |
| target | (string) mandatory, sets an URL to the server-side script that will process file upload |
Slider
It is possible to change the following configuration attributes of the Slider control:
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of the Slider control |
| css | (string) adds style classes to a control |
| label | (string) specifies a label for a control |
| labelWidth | (string|number) sets the width of the label of a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| helpMessage | (string) adds a help message to a control |
| min | (number) the minimal value of slider, 0 by default |
| max | (number) the maximal value of slider, 100 by default |
| step | (number) the step the slider thumb will be moved with, 1 by default |
| mode | (string) the direction of the Slider scale, "horizontal" by default |
| tooltip | (boolean) enables prompt messages with ticks values on hovering over the slider thumb, true by default |
| range | (boolean) enables/disables the possibility to select a range of values on the slider |
| inverse | (boolean) enables/disables the inverse slider mode |
| tick | (number) sets the interval of steps for rendering the slider scale |
| majorTick | (number) sets interval of rendering numeric values on the slider scale |
| tickTemplate | (function) sets a template for rendering values on the scale |
Spacer
It is possible to change the following configuration attributes of the Spacer control:
| width | (string|number|"content") the width of a control |
| padding | (string|number) sets padding between a cell and a border of the Spacer control |
| height | (string|number|"content") the height of a control |
| css | (string) adds style classes to a control |
Text
It is possible to change the following configuration attributes of the Text control:
| inputType | (string) the type of an input: "text", "password", "number". |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of the Text control |
| css | (string) adds style classes to a control |
| label | (string) specifies a label for a control |
| labelWidth | (string|number) sets the width of the label of a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control |
| successMessage | (string) a message that appears in case of successful validation of the control value |
| errorMessage | (string) a message that appears in case of error during validation of the control value |
Textarea
It is possible to change the following configuration attributes of the Textarea control:
| validation | (object,function) the rule of input validation |
| placeholder | (string) a tip for the textarea |
| readOnly | (boolean) defines whether a textarea is readonly |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of the Textarea control |
| minlength | (string|number) the minimum number of characters allowed in the textarea |
| maxlength | (string|number) the maximum number of characters allowed in the textarea |
| css | (string) adds style classes to a control |
| label | (string) specifies a label for a control |
| labelWidth | (string|number) sets the width of the label of a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| required | (boolean) defines whether a control is required |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control |
| successMessage | (string) a message that appears in case of successful validation of the control value |
| errorMessage | (string) a message that appears in case of error during validation of the control value |
TimePicker
It is possible to change the following configuration attributes of the TimePicker control:
| valueFormat | (string) defines the format of the value to be applied when working with the events of the timepicker control: "string", "timeObject" |
| validation | (function) the validation function |
| icon | (string) the name of an icon from the used icon font |
| placeholder | (string) a tip for the input |
| editable | (boolean) allows a user to enter the value of the control manually |
| width | (string|number|"content") the width of a control |
| height | (string|number|"content") the height of a control |
| padding | (string|number) sets padding between a cell and a border of the TimePicker control |
| css | (string) adds style classes to a control |
| label | (string) specifies a label for a control |
| labelWidth | (string|number) sets the width of the label of a control |
| hiddenLabel | (boolean) invisible label that will be used to identify the input on the server side |
| labelPosition | (string) defines the position of a label: "left"|"top" |
| required | (boolean) defines whether a control is required |
| helpMessage | (string) adds a help message to a control |
| preMessage | (string) a message that contains instructions for interacting with the control |
| successMessage | (string) a message that appears in case of successful validation of the control value |
| errorMessage | (string) a message that appears in case of error during validation of the control value |
| timeFormat | (number) defines what clock format is activated: the 12-hour or 24-hour one |
| controls | (boolean) defines whether a timepicker is equipped with the Close and Save buttons |
Change log:
added in v7.0