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

Input

The Input Component is a flexible form control that allows users to enter single-line text data. It provides a clean, customizable interface for capturing user input with support for validation, custom styling, and events. This component is ideal for collecting short text inputs like names, email addresses, references, or any scenario requiring single-line text entry from users.

Properties

General Properties

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

Visual Properties

  • labelTranslations - Sets the label text displayed above the input field, with support for multiple languages. For example, {"en-US": "Email Address", "de-DE": "E-Mail-Adresse"} ensures proper localization of the field label based on the user's language settings.

  • counterVisible - Determines whether a character counter is displayed below the input field. When enabled, users can see how many characters they've typed, which is particularly useful for fields with length constraints or when users need to optimize their input length.

  • customIconName - Specifies a custom icon to display within the input field. For example, setting to "email" would show an envelope icon, providing a visual cue about the expected input type while enhancing the user interface.

  • hidden - Controls whether the component is visible in the form. When set to true, the component remains in the form structure but is not displayed, which is useful for conditional input fields that should only appear in specific scenarios.

  • saveInLocalStorage - Determines whether the component's entered value is preserved in local storage between sessions. When enabled, user input persists between page reloads, improving user experience for complex forms that may take time to complete.

  • defaultValue - Sets the initial text value that will be used when the form is reset. For example, setting to "example@domain.com" would pre-populate the field with this value when a form is first loaded or reset.

  • readonly - Controls whether the text can be edited by users. When set to true, the input field displays the value but prevents changes, which is useful for display-only scenarios or when values are determined programmatically.

  • paddingClass - Configures spacing around the input component using CSS classes. For example, "p-4" adds medium padding on all sides of the component to improve visual spacing within its container.

Non-Visual Properties

  • dataField - Defines the field name that will be used when submitting form data. For example, setting to "customerEmail" ensures the input value is submitted with this field name in the data object, making it clear what the data represents on the server side.

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

Validation Properties

  • validation - Configures validation rules for the input field. This powerful object supports several validation types:

    • required: When set to true, the field must contain a value before the form can be submitted.
    • email: When set to true, validates that the input is a properly formatted email address.
    • maxLength: Sets the maximum number of characters allowed in the input field.
    • minLength: Sets the minimum number of characters required in the input field.
    • pattern: Defines a regular expression pattern that the input must match to be valid.

    For example, an email field might use: { required: true, email: true, maxLength: 100 } to ensure a valid email address is provided and it's not excessively long.

Authorization Properties

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

  • visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "adminOnlyPolicy" restricts the input visibility to users with admin privileges.

Visibility Properties

  • displayConditions - Defines conditions for displaying the component. This allows showing or hiding the input field based on complex rules involving other form values, user roles, or application state.

Event Actions Properties

  • events - Configures the events that the component can trigger and respond to:
    • ON_VALUE_CHANGE: Triggered when the input value changes. Can be used to perform immediate actions based on user input, such as validating data, updating related fields, or triggering API calls.
    • ON_INIT_BASED_ON_USER_VIEW: Triggered specifically when the component initializes in user view mode rather than edit mode.
    • ON_INIT: Triggered when the input component is initialized. Can be used to perform setup operations like loading default values or setting initial states.
    • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.

Testing Hooks Properties

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

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

  • enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the input field can be highlighted during onboarding or tutorial flows to explain its purpose to new users.

  • guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Email Address Input", "de-DE": "E-Mail-Adresse Eingabe"} provides clear identification during guided tours.

  • guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Enter your primary email address here", "de-DE": "Geben Sie hier Ihre primäre E-Mail-Adresse ein"} provides detailed instructions during guided tours.

  • No labels