Button component

🌐 This document is available in both English and Ukrainian. Use the language toggle in the top right corner to switch between versions.

1. Component description

Button component is a UI element that defines a clickable button. Buttons can be added to perform various actions in a form. The most obvious function of the Button component is the Submission action. However, you can also use the Button component to initiate events related to workflow logic, reset field data, set navigation to other pages, etc.

2. Basic functions

Button component supports a large number of options for interaction with the process form, which are distributed across tabs.

  • Display

  • API

  • Conditions

  • Confirmation

  • Label: The name of the component that appears next to it.

  • Action: sets the action that this button should perform.

    • Submit: submits the form data to the server.

    • Custom: sets custom logic.

      • Show Validations: displays all validation errors in the form after the button is clicked.

      • Button Custom Logic: sets custom logic that will be executed after the button is clicked.

    • Navigation: sets navigation to other pages using Action code that is sent to the server.

      • Action code: the code that will be sent along with the form data.

      • Show Validations: displays all validation errors in the form after the button is clicked.

  • Theme: sets the theme for this button.

  • Description: a description of the component that can help users.

  • Tooltip: The text displayed when hovering the cursor over the component.

  • Tab Index: An HTML attribute that allows you to control keyboard navigation through the input fields. For details, refer to HTML documentation — for example, here: tabindex.

  • Disable on Form Invalid: the component will be disabled if the form is not valid.

  • Hidden: An attribute for fields that are hidden from the users but are still part of the form and are submitted along with the form. Don’t forget to clear the Clear when hidden option; otherwise, any value of this component will be empty.

  • Disabled: A setting that disables editing.

  • Property Name: the name of the field in the data structure that will be sent when the form data is submitted. It is also the name of the field in the data structure with which the form is prefilled. The current value of this field can be checked in the data structure displayed on the Query tab in the form design interface.

  • Advanced Conditions: Here, you can configure advanced conditions for the component. For example, these conditions determine when a component becomes visible based on other components or their values.

    This function uses JS plugins. For details, see Variables in JavaScript insertions.

  • Simple: Performs the same tasks as Advanced Conditions but allows you to specify conditions in a simpler format.

  • Pop-up should Display: shows a modal window that says Please confirm the action. Learn more here.

    • Description: the text that will be displayed in the modal window.

3. Data format

Submission
// This component has no data.