Skip to main content

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 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:

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