(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Button

The Button Component is a interactive element that triggers actions when clicked. It supports various visual styling options, tooltip configuration, and conditional display based on authorization rules. This component is ideal for creating call-to-action elements, form submissions, navigation controls, or any interactive trigger within your application.

Properties

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Submit Order Button" allows for easy identification of the button's purpose in the component structure, making it easier for developers to locate and work with this specific button.

• contextJsonSchema - Defines the schema for context data that can be used with this button. This property helps document the expected data structure that the button will operate with, making it easier to understand what data is available for use in button actions.

Visual Properties

• textTranslations - Sets the text displayed on the button with support for multiple languages. For example, {"en-US": "Submit", "de-DE": "Absenden"} ensures proper localization of the button text for different language settings.

• size - Determines the size of the button. Options include "medium", "large", or "extra_large". For example, "large" makes the button more prominent for primary actions, while "medium" is suitable for secondary actions in forms.

• type - Specifies the visual style of the button. Options include "primary" (emphasized), "secondary" (less emphasized), or "ghost" (minimal styling). For example, using "primary" for a submit button and "secondary" for a cancel button creates a clear visual hierarchy.

• showTooltip - Controls whether a tooltip is displayed when hovering over the button. When enabled, provides additional information about the button's function to users.

• tooltipTextTranslations - Sets the text displayed in the tooltip with support for multiple languages. For example, {"en-US": "Submit order for processing", "de-DE": "Bestellung zur Bearbeitung absenden"} provides localized helper text when users hover over the button.

• tooltipPlacement - Determines the position of the tooltip relative to the button. Options include "top", "bottom", "left", and "right". For example, "top" places the tooltip above the button, which works well in most standard layouts.

• tooltipDelay - Sets the delay in milliseconds before the tooltip appears when hovering over the button. For example, setting to "300" causes the tooltip to appear after 300 milliseconds, preventing tooltips from appearing too quickly during casual mouse movements.

• widthAuto - Controls whether the button width automatically adjusts to its content. When set to true, the button will be only as wide as needed for its text and padding; when set to false, it will fill its container according to layout rules.

• heightAuto - Controls whether the button height automatically adjusts to its content. When set to true, the button height is determined by its content; when set to false, it follows fixed height settings based on the selected size.

• paddingClass - Configures spacing around the button using CSS classes. For example, "p-2" adds light padding on all sides of the button, improving its visual spacing within its container.

Event Actions Properties

• events - Configures the events that the component can trigger and respond to:
  • ON_BUTTON_CLICK: Triggered when the button is clicked. Can be used to submit forms, navigate to different views, open dialogs, or perform any other action.
  • ON_GLOBAL_PARAMETERS_CHANGE: Triggered when global parameters that affect the button change.
  • ON_INIT: Triggered when the button component is initialized. Can be used to perform setup operations when the button first appears.
  • ON_DESTROY: Triggered when the button component is removed from the DOM. Useful for cleanup operations and releasing resources.

Authorization Properties

• authorizationDisable - Specifies a policy set that determines whether the button should be enabled or disabled based on user permissions. For example, setting to "editingPermissions" would disable the button for users who don't have editing permissions, while still showing it in the interface.

• visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "adminActions" makes the button visible only to users with administrator privileges.

Visibility Properties

• displayConditions - Defines conditions for displaying the component. This allows showing or hiding the button based on complex rules involving form values, user roles, or application state. For example, a "Submit" button might only be shown when all required fields are filled in.

Testing Hooks Properties

• id - Specifies a unique identifier for the component used for programmatic access. For example, "submitOrderButton" enables targeted manipulation of this specific button through scripts or automated tests.

• dataTestId - Sets the testing hook ID for automated testing. For example, setting to "submit-order-btn" allows test scripts to reliably locate and interact with this button during automated testing.

• enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the button can be highlighted during onboarding or tutorial flows to guide users to important actions.

• guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Submit Button", "de-DE": "Senden-Schaltfläche"} provides clear identification during guided tours.

• guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Click here to submit your order", "de-DE": "Klicken Sie hier, um Ihre Bestellung abzusenden"} provides detailed instructions during guided tours.