Text Box

You have to go through a three-step form wizard to enable this Control, i.e., Design, Validation & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Text Box” control form wizard. Here you are required to fill in the following details:

  1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Label Name: Specifies the display name or title for a field or control in the user interface.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  4. Placeholder: Defines the hint text displayed inside a form field or input box when it is empty, providing guidance on the expected input.
  5. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
    1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon.
    2. Select Tooltip Position: Select tooltip position from the following Top, Right, Bottom or Left

2nd Step – Validation

  1. Minimum Character Limit: Specifies the minimum number of characters required for the input field to be considered valid.
  2. Maximum Character Limit: Specifies the maximum number of characters required for the input field to be considered valid.
  3. Char Limit Error Message (Optional): Defines a custom error message to display when the input does not meet the character limit.
  4. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
    1. Error Message: Here, you can define the error message that will be displayed if this control is left blank.
  5. Text only?: Here, you specify whether or not you require only text as values in this Control
  6. Number only?: Here, you specify whether or not you require only number as values in this Control
  7. Default Value: As the name suggests, it defines a default value for a field. This default value can be changed by user input.

3rd Step – Advance

  1. Design
    1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    2. Description: Enter extra suggestions for user experience on this field.
  2. Others
    1. Link with Page Variable: Specifies if the field should be linked to a page variable for dynamic interaction.
      1. Linked Page Variable Name: Defines the name of the page variable to be linked with the field.
    2. Enable auto validate on load (default check on typing): Determines whether the field should automatically validate its input when the page loads or only upon user typing.
      1. Query Field: Specifies the field used to send a query request.
      2. Output Field: Defines the field where the results of a query or process are displayed.
      3. Data Source: Specifies the origin of the data, such as an API, database, or external service.
      4. Enable Encryption: Enables or disables the encryption of sensitive data to enhance security.
      5. Response Attribute: Defines the attribute in the response that will be used for further processing or display.
    3. Enable for Form Validation: Allows the field to be included in the form validation process.
      1. Auto Validate Message: Defines the message displayed when auto-validation fails, such as an error message for invalid input.
    4. Enable Auto Search: Enable Auto Search enables search/refresh configured component
      1. Refresh Component Key: The unique key used to trigger a refresh for a specific component within the application.
      2. Refresh Component Form: Specifies whether the entire form should be refreshed or just a specific component.
    5. Enable Mask Input: Enables input masking, which hides the actual characters typed by the user for sensitive fields (e.g., passwords, credit card numbers).
      1. Mask Input: Defines the masking pattern (e.g., replacing characters with asterisks) for input fields.
      2. Guide: Provides a help or instruction text to guide users on how to properly interact with the field.
  3. Mobile
    1. Align Self: Defines the alignment of a specific item within a flex container, allowing it to override the container's default alignment rules.
    2. Flex: Specifies how a flex item will grow, shrink, or maintain its size within a flex container, determining its proportion relative to other items.
    3. Form Control Margin Bottom: Defines the spacing below a form control element, allowing customization of the vertical gap between controls for better layout and design consistency.

Click “Confirm” and “Text Box” control is configured.