The Component class
The numerous different components all inherit properties and methods from the Component superclass.
The following alphabetically ordered list of properties may be relevant for every component, regardless of their type:
| Name | Description | Datatype |
|---|---|---|
| allowCalculateOverride | Whether to allow the calculateValue to be overridden by the user. See the calculateValue property. Set to False by default. | Boolean |
| attributes | Set of HTML attributes for additional styling. See the setAttribute method described below. | struct/containers.Map/dict |
| calculateValue | The value of the component, calculated using the values of other components. Can be JavaScript or JSON Logic. Set using the setCalculateValue method described below. See Custom JavaScript. | String |
| clearOnHide | Whether or not the component's value should be cleared when it becomes hidden. Is set to False by default (different from the default value in Form.io) | Boolean |
| conditional | Defines when the component should be shown or hidden depending on values or properties of components in the form. For more info, see the Conditional section. | Conditional |
| customClass | Custom HTML class(es) to use for the component. Separate multiple classes with spaces. Adding custom classes is easily done using the addCustomClass method described below. You can add your own custom classes as described here. | String |
| customConditional | A component can be hidden using this advanced conditional. Assign the variable show in a piece of JavaScript. For example: show = data.checkbox1 && data.checkbox2;. See Custom JavaScript. An example is provided in How to. | String |
| defaultValue | The default value of the component shown after initialization and that is received when the form is submitted and the component value was not edited. | Unspecified |
| description | Text to display below the component in dark-gray. | String |
| disabled | Whether or not the component is disabled for the user. If it is disabled, the value cannot be changed by the user, but it can still be altered from the back-end. You can disable a component based on a condition as described in How to. | Boolean |
| errors | Allows customizable errors to be displayed for the component when an error occurs or validation fails. For more info, see the Error section. | Error |
| hidden | Set to true to make the component hidden by default. | Boolean |
| input | Whether the component is an input from the user, or is purely visual. Generally does not need to be changed from the default value of the component. | Boolean |
| key | Unique string by which the component can be identified. This can not be changed after calling the component's constructor. | String |
| label | Text to display on, in or around the component. For example, the text to display on a button. | String |
| logic | Specifies custom behaviour for the component, such as enabling/disabling the component based on a condition. For more info, see the Logic section. | Logic |
| modalEdit | Edit the value in a modal dialog instead of the component in the form. Defaults to False for all components. | Boolean |
| placeholder | Text/value to display in an editable field, such as a textfield. The placeholder disappears when the component gains focus. | Unspecified |
| prefix | The text to display as prefix of the component. Available for all components that allow textual input, such as textfields and numbers. The prefix is not part of the value of the component. | String |
| redrawOn | When to redraw the component. If the value of the component is set by for example custom JavaScript using Logic, you may require setting this property. The value can have the following forms:
| String |
| suffix | The text to display as suffix of the component. Available for all components that allow textual input, such as textfields and numbers. The suffix is not part of the value of the component. | String |
| tabindex | Set this to override the tab index of the form, allowing you to control the order in which a user can tab through the application. The index can have decimals. | Double |
| tableView | When true and the component is part of an EditGrid, the component's value is shown (simplified) in the collapsed row of the EditGrid. | Boolean |
| tooltip | Tooltip to display when the question mark icon on the component is hovered over. This is available for most, but not all components. | String |
| type | Type of the component. This is generally the name of the class, but lower-case. This property value cannot be changed. | String |
| validate | Defines validation criteria for the component. If the validation fails, a message is shown and a Submit button is disabled. For more info, see the Validate section. | Validate |
The following methods are available for all components:
| Name | Syntax | Description |
|---|---|---|
| addComponent | addComponent(obj, comp1, ..., compN) | Add a number of components to the input component. The input component must be able to host child components. |
| addCustomClass | addCustomClass(obj, class1, ..., classN) | Sets the customClass property by adding the given HTML class names. These names can include custom classes you define as described here. |
| disableWhen | disableWhen(obj, triggerType, triggerValue, disableComponent) | Add disable (or enable) logic to a component. Does the same as the createDisableLogic function. |
| setAttribute | setAttribute(obj, name, value) | Set an HTML attribute of a component. If the attribute is already set, append it instead of overwriting it. Example: obj.setAttribute("style", "color: red") |
| setCalculateValue | setCalculateValue(obj, theValue, allowOverride) | Set the calculateValue property to theValue and (optionally) the allowCalculateOverride property to allowOverride. |
| setRequired | setRequired(obj) | Makes the component required so that a Submit button cannot be clicked until the component has a value. |
Available components
The components that can be added to your application have been divided into five categories. Each category contains an alphabetical list of all components including descriptions and examples.
- Basic: These can be used to collect basic user inputs such as text fields and checkboxes.
- Advanced: These components are for more advanced user inputs such as e-mail addresses or dates.
- Layout: Use these to define the layout of your application.
- Data: These can hold and/or present data, generally in tabular form.
- Miscellaneous: These components can be used to perform uploads, downloads or to nest forms.