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

Number input

Overview

The Dynamic Number Input Component provides a specialized form control for capturing numerical values with built-in validation and formatting options. This component is ideal for scenarios where precise numeric entry is required, such as quantities, prices, measurements, or any other numerical data within forms.

Properties

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Price Input" allows for easy identification of the component's purpose in the component structure.

• id - Specifies a unique identifier for the component used for programmatic access. For example, "productPriceInput" enables targeted manipulation of this specific input through actions.

Visual Properties

• labelTranslations - Sets the field label with support for multiple languages. For example, {"en-US": "Price", "de-DE": "Preis"} ensures proper localization of the field label.

• value - Sets the initial numeric value displayed in the input. For example, setting to "100" will pre-fill the field with this value when the form is loaded.

• helperText - Provides additional guidance text displayed below the input field. For example, "Enter price in USD without currency symbol" helps users understand what format is expected.

• step - Determines the increment/decrement value when using the up/down arrows or buttons. For example, setting to "0.5" allows users to increase or decrease the value by half units, useful for decimal precision.

• thousandSeparator - Defines the character used to separate thousands in large numbers for improved readability. For example, setting to "," will display "1,000" instead of "1000", making large numbers easier to read.

• hidden - Controls whether the component is visible to users. When set to true, the component won't be displayed but still exists in the DOM, useful for conditional form fields that may need to appear later.

• saveInLocalStorage - Determines whether the input's value is preserved in local storage. When enabled, user input persists between page reloads, improving user experience for lengthy forms.

• defaultValue - Sets the initial value that will be used when the form is reset. For example, setting to "0" ensures the field resets to zero when form reset actions are triggered.

• readonly - Controls whether the input value can be edited by users. When set to true, the input will display its value but not allow changes, useful for displaying calculated values that shouldn't be modified.

Non-Visual Properties

• dataField - Defines the field name that will be used when submitting form data. For example, setting dataField to "productPrice" ensures the numeric value is submitted with this field name in the data object.

• controlsRequestType - Specifies how the field data is sent in HTTP requests: 'BODY', 'URL', or 'HEADERS'. For example, setting to "BODY" includes the field in the request body, which is standard for most form submissions.

Validation Properties

• validation - Configures validation rules for the number input, including:
  • required - When set to true, the field must contain a value before the form can be submitted.
  • min - Sets the minimum allowed value. For example, setting to "0" prevents negative numbers from being entered.
  • max - Sets the maximum allowed value. For example, setting to "100" restricts input to values no greater than 100.
  • validated - Controls whether validation rules should be actively applied to user input.

Authorization Properties

• authorizationDisable - Specifies a policy set that determines when the component should be disabled. For example, setting to "readOnlyPolicy" will disable the field for users who don't have edit permissions.

Event Actions

• events - Configures the events that the component can trigger and respond to:
  • ON_INIT: Triggered when the number input component is initialized. Can be used to perform setup operations like loading initial configuration.
  • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.
  • ON_VALUE_CHANGE: Triggered when the user modifies the numeric value. Can be used to perform immediate calculations or updates based on the new value.
  • ON_INIT_BASED_ON_USER_VIEW: Triggered specifically when the component initializes in user view mode rather than edit mode.

Testing Hooks

• dataTestId - Sets the testing hook ID for automated testing. For example, setting to "product-price-input" allows test scripts to reliably locate this component.