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
const form = new dhx.Form("form_container", {
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: {…}}
// or
form.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 |
Container
The returned object of the Container control can contain the following properties:
width- string, number, "content" - the width of a controlheight- string, number, "content" - the height of a controlpadding- string, number - sets padding between a cell and a border of a control
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