Forms Editor: Button

This component is used to perform various actions like (Submit, Save, Reset, etc.)

• Label: Enter the name of the button.
• Action: Specify the action it performs by selecting from the dropdown list.
• Theme: Change the color theme of the button.
• Size: Select the size of the button.
• Block Button: Check this option if you want to create this button as a full-width button.

Display Tab:

• Label: You can place the title or name in this component.
• Action: In this setting, you can select the action you want this button to perform. You can choose the action from the dropdown list.
• Theme: With this selection, you can choose the theme for the button.
• Size: With this selection, you can choose the size for the button.
• Block Button: Checkmark this option if you want to create this button as a full-line button.
• Left Icon: In this setting, you can provide the full icon class string for the icon.
• Right Icon: In this setting, you can provide the full icon class string for the icon.
• Shortcut: In this setting, you can select the shortcut for this component.
• Description: In the description field, you can enter text that will appear under the Input Field.
• Description: In the description field, you can enter text that will appear under the Input field.
• Tooltip: Entering data here will create a tooltip icon on the field.
• Custom CSS Class: In this setting, you can add a CSS class. Multiple classes can be added, and class names should be separated by spaces.
• Tab Index: The Tab Index setting indicates which element in a form can be focused and which cannot. It works as a global attribute and provides 3 different results depending on the integer. A Negative Integer (-1) indicates that the elements are unfocused and unreachable by sequential navigation. Zero Integer (0) indicates that the elements are focused and can be reached with sequential navigation. A Positive Integer (1) functions like the zero integer but allows setting an order depending on the number.
• Disable on Form Invalid: By enabling this setting it will make this field disabled if the form is invalid.
• Hidden: Enabling this setting will hide your field from view when the form is extracted.
• Hide Label: In this component, you can hide the label or name. Sometimes you only need the component field and not the label; hide label is used for that purpose.
• Disabled: Enabling this setting will disable the component from the form.
• Table View: When this setting is enabled, the data on this component will only show up in the Submission list of the table view.

API:

• Property Name: In this setting, you can provide the name of the field in the API endpoint.
• Field Tags: Enter tags for the field that can be used in custom logic.
• Custom Properties: Enter any custom properties to configure this component in this setting.

Conditional Tab:

• This component should Display: In this setting, you can choose "True and False" if this component should display.
• When the form component: In this setting, you can choose if you want the component to be displayed after it is submitted.
• Has the value: In this setting, you can choose the value of the component when it will be hidden or displayed.

Logic:

• Advanced Logic:

Layout:

• HTML Attributes: In this setting, you can enter HTML attributes map for component input.

Example:

Let's create a new Button Component. Click on the Button Component and drag it onto the Form Creation screen. It will open the Button settings window.

1. In the picture below, we created a simple Button with the main elements. We entered the name of the Label in the first field.
2. In the Action field, we set the action that this button must perform.
3. In the Theme, we selected the "info" theme from the dropdown list.
4. In the Size field, we can set the size of the button.
5. Click on "Save" to create the Button Component.

Finally, this is how the “Button” component will appear on the form.