User input elements are fundamental tools in application development. They facilitate user interactions, data collection, and enhance user experiences.

These elements seamlessly integrate within forms, offering flexibility for customization and deep data handling capabilities. They ensure responsive interfaces across various devices.

This documentation provides detailed insights into these elements, including their properties and behaviors, enabling you to create engaging and functional user interfaces.

Editable Properties

General

• Data Model Field: Represents the field to which the input is bound, if applicable. Changing the selected field will trigger updates to other fields on the input to match the new field selection. This property is used to link the input to a specific data field, enabling dynamic data handling.

• Data Path: The data path associated with the generic input. It allows you to specify the data path for the input, ensuring that it is linked to the appropriate data source or location within your application.

• Default Value: The default value of the generic input. You can specify the initial value that the input should display or contain when it is first rendered or created..

• Predicate: The predicate applied to the input for filtering or comparing data. It defines the criteria for selecting or filtering data, allowing you to customize how data is processed within the input.

• Form Element: The form that contains this input. It establishes a connection between the input and the form, helping organize and structure the input within the larger context of the form.

• Label: Allows you to control the label associated with the generic input. It determines the text or description that is displayed alongside the input, providing context and guidance to users.

• Description: Used to control the helper text associated with the generic input. It allows you to provide additional information or instructions to users, enhancing the usability and understanding of the input.

Behavior

• Disabled: Provides control over whether the field is disabled based on specified logic. When enabled, it allows you to dynamically determine whether the field should be in a disabled state, making it responsive to changing conditions or user interactions.

• On Change: Allows you to define a JSONata transform that executes each time the value of the field changes. This feature is used to introduce custom logic and actions that should occur when the field's value is modified. It empowers you to create interactive and responsive user interfaces that respond to user input.

• Data: Serves to define data transformations for the field. It enables you to manipulate and process data associated with the field before it is used in your application. This feature is pivotal for data validation, formatting, or any other necessary data manipulation to align the field's data with your application's requirements.

• Fields: An array that specifies additional data paths required by this field. It acts as a way to establish connections to external data sources or data paths necessary for the field's functionality. This property facilitates interactions between the field and other parts of your application's data model, ensuring that the field has access to the relevant data paths it needs.

• Target Data Path: Gives you control over the target data path for the field. It defines precisely where the field's data should be stored or retrieved within your application's data structure. By configuring the "Target Data Path," you can ensure that the field's data is organized and accessed in the correct location within your application.

Display Properties

Layout

• Padding: Controls the padding inside of the container, which is the number of pixels of gap to leave between the edge of the container and the inner contents.

• Width: The width of this container. Can be expressed in any CSS unit, such as 100%, 400px, auto, etc.

• Height: The height of this container. Can be expressed in any CSS unit, such as 100%, 400px, auto, etc.

• Align Items: How to align contents of the column/row. The default is “Stretch”, which will attempt to stretch the width of items in a column or the height of items in a row to match each other when the items' width/height are set to auto. Note: The flex-start and flex-end options have dynamic labels based on the value of the “Flex Direction” property: “Left” and “Right” for the “Column” direction, and “Top” and “Bottom” for the “Row” direction.

• Visible: Manages the visibility of the input based on logic. It allows you to dynamically show or hide the input based on specified conditions. If the property is enabled and the logic evaluates to true, the input is displayed; otherwise, it remains hidden.

Validation Properties

• Required: Defines whether the field must be filled out or contain a value. When enabled, it indicates that the field is mandatory, and the user must input data for this field to fulfill validation criteria.

• Transform: Allows the use of a JSONata transform specifically for validating the field's input. This transformation provides a powerful way to define validation rules for the field. The transform should output a string error message if the validation fails or return 'undefined' if the validation is successful.

Length Validation Properties

• Minimum Length: Sets the minimum allowable length for values in this field.

• Maximum Length: Sets the maximum allowable length for values in this field.

Advanced Properties

• Additional Query Fields: A JSON array that allows you to specify additional data paths required by this field. This array serves as a means to establish connections to other data sources or data paths necessary for the field's operation. It facilitates interactions between the field and external data, ensuring that the field has access to the relevant data paths it needs.

• Target Data Path: Target data path for the field. It specifies the exact location within your application's data structure where the field's data should be stored or retrieved. By setting the "Target Data Path," you can ensure that the field's data is managed and located precisely where it is needed within your application.

These common properties provide a foundation for configuring and customizing input elements.