The Component class
The numerous different components all inherit properties and methods from the
The following alphabetically ordered list of properties may be relevant for every component, regardless of their type:
|allowCalculateOverride||Whether to allow the ||Boolean|
|attributes||Set of HTML attributes for additional styling. See the ||struct/containers.Map/dict|
|clearOnHide||Whether or not the component's value should be cleared when it becomes hidden. Is set to ||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 ||String|
|customConditional||A component can be hidden using this advanced conditional. Assign the variable ||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 ||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.
|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|
|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|
|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|
|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:
|addComponent||Add a number of components to the input component. The input component must be able to host child components.|
|addCustomClass||Sets the |
|setAttribute||Set an HTML attribute of a component. If the attribute is already set, append it instead of overwriting it. Example: |
|setCalculateValue||Set the |
|setRequired||Makes the component required so that a Submit button cannot be clicked until the component has a value.|
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.