Button Component
The Button component represents a clickable button element.
Buttons can be used to submit the form to the back-end or to initiate other actions. If you want a button to trigger custom events within your form’s gui_event function, call the button’s setEvent() method and provide a unique event name. Make sure this name does not conflict with any reserved Form.io event names, as doing so may lead to unexpected behavior or errors.
If the button label is left empty, the button will appear extremely thin. For this reason, it is strongly recommended to always define a non-empty label.
Besides the properties and methods described below, this component also inherits all properties and methods from the base Component class. For instance, every Button component supports the label and tooltip properties, even if they are not explicitly listed here.
Displaying a message on the spinner
Some callbacks may take a noticeable amount of time to complete. In such cases, it can be helpful to inform the user about the ongoing process. You can display a custom message on the spinner by setting the eventMessage custom property.
obj.properties = {"eventMessage": "Calculating results..."}
obj.addCustomProperty("eventMessage", "Calculating results...");
Properties
| Name | Description | Datatype | Default |
|---|---|---|---|
| action | The action to execute when the button is clicked. One of the following:
| String | 'event' |
| block | Set to true to make the button the full width of the container instead of based on the text width. | Boolean | False |
| custom | When action is set to custom, this is the JavaScript that will run when the button is clicked. | String | |
| disableOnInvalid | Whether to disable the button if the form is invalid. | Boolean | False |
| event | The name of the event to trigger when the button is clicked. Most useful when action is set to event. | String | |
| leftIcon | The icon to place to the left of the button. This should be a FontAwesome font. Example: fa fa-plus. For an overview of available icons please refer to the FontAwesome website. | String | |
| rightIcon | The icon to place to the right of the button. This should be a FontAwesome font. Example: fa fa-plus | String | |
| showValidations | When the button is pressed, whether or not to display validation errors on the form. Ignored if the action is submit. | Boolean | False |
| size | Button size as defined by the Bootstrap documentation. Shall be one of xs, sm, md, lg, xl. | String | 'md' |
| 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 | False |
| theme | Bootstrap-defined theme of the button. Can be primary, success, default etc. | String | 'primary' |
Methods
| Name | Syntax | Description |
|---|---|---|
| setEvent | obj.setEvent(eventName) | Sets the action property to 'event' and the event property to eventName |
| setUpload | obj.setUpload(contentType) | When the button is clicked, a user can upload content of the specified type. The contentType must be a valid MIME type or a comma-separated list of extensions (e.g. .jpg,.png). After this method has been called on a Button, clicking the button triggers gui_upload instead of gui_event. See gui_upload for more information. |