getProperties()

returns objects with available configuration attributes of Form controls

getProperties(name?: string): { [name: string]: IFormProps } | IFormProps;

Parameters:

name|id: string - optional, the name of the control or its id (if the name attribute is not defined in the config of the control)

Returns:

An object either with the available attributes of the control and their values or 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 values.

Example

var form = new dhx.Form("form-sample", {    css: "dhx_widget--bordered",    rows: [        {            type: "input",            label: "Name",            icon: "dxi dxi-magnify",            placeholder: "John Doe",            name: "name"        },        {            type: "input",            inputType: "password",            label: "Password",            placeholder: "********",            name: "password"        },        {            type: "button",            text: "Send",            size: "medium",            view: "flat",            submit: true        }    ]});
form.getProperties();// -> {name: {…}, password: {…}, u1604577858827: {…}}
// orform.getProperties("password");// -> {inputType: "password", label: "Password", placeholder: "********", …}

note

The returned object can contain only the properties that are listed below for each control.

Here are two ways of using the method:

When using the method without the parameter, the method returns an object with a set of key:value pairs where key is the name of the control (or its ) and value is an object with the available attributes of the control and their values:

form.getProperties();// -> the returned object:{    name: {        autocomplete: false, errorMessage: "", height: "content", helpMessage: "",        hiddenLabel: false, icon: "dxi dxi-magnify", inputType: "text", …    },    password: {        autocomplete: false, errorMessage: "", height: "content",        helpMessage: "", hiddenLabel: false, icon: "", inputType: "password", …    },    u1604577858827: {        circle: false, color: "primary", full: false, height: "content",        icon: "", loading: false, padding: 0, size: "medium", submit: true, …
    }}

When passing the name of the control (or its id) as a parameter to the method, the method will return an object with the available attributes of the control and their values:

form.getProperties("name");
// -> the returned object:{    autocomplete: false,    errorMessage: "",    height: "content",    helpMessage: "",    hiddenLabel: false,    icon: "dxi dxi-magnify",    inputType: "text",    label: "Name",    labelPosition: "top",    labelWidth: "",    max: undefined,    maxlength: undefined,    min: undefined,    minlength: undefined,    padding: 0,    placeholder: "John Doe",    preMessage: "",    readOnly: false,    required: false,    successMessage: "",    validation: undefined,    width: "content"}

Button#

The returned object of the Button control can contain the following configuration attributes:

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

The returned object of the DatePicker control can contain the following configuration attributes:

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
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, false by default
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#

The returned object of the Checkbox control can contain the following configuration attributes:

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

The returned object of the CheckboxGroup control can contain the following configuration attributes:

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

ColorPicker#

The returned object of the ColorPicker control can contain the following configuration attributes:

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

The returned object of the Combo control can contain the following configuration attributes:

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

The returned object of the Input control can contain the following configuration attributes:

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".
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".
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#

The returned object of the RadioGroup control can contain the following configuration attributes:

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

Select#

The returned object of the Select control can contain the following configuration attributes:

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

The returned object of the SimpleVault control can contain the following configuration attributes:

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

The returned object of the Slider control can contain the following configuration attributes:

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

The returned object of the Spacer control can contain the following configuration attributes:

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

Text#

The returned object of the Text control can contain the following configuration attributes:

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

The returned object of the Textarea control can contain the following configuration attributes:

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

The returned object of the TimePicker control can contain the following configuration attributes:

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