Password

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 “Password” 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. [Note: "Tooltip Text" supports both plain text and HTML-formatted content.]
    2. Select Tooltip Position: Select tooltip position from the following Top, Right, Bottom or Left

2nd Step – Validation

  1. 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.

3rd Step – Advance

  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
  3. Show Confirm Password Control: Enables or displays a field for re-entering the password to confirm it matches the original password input.
    1. Enable Show/Hide Password (Show Eye): Allows users to toggle the visibility of the password field using a "show/hide" eye icon.
      1. Eye Class: Specifies the CSS class for styling the "show/hide" eye icon in the password field.
    2. Show Validation Info: Displays validation information or messages to guide users about input requirements.
    3. Password Minimum Length: Specifies the minimum number of characters required for the password. Password Minimum Length should be more than 3.
    4. Password Maximum Length: Specifies the maximum number of characters required for the password. Password Maximum Length should be more than 5.

Click “Confirm” and “Password” control is configured.

How to use Password control

  1. Begin by creating a blank transaction form.
  2. Add Password control.
  3. Configure all the attributes in design page based on the specified requirements of the form.
  4. Configure all the attributes in validation page based on the specified requirements of the form.
  5. Configure all the attributes in advance page based on the specified requirements of the form.
    1. Turn "Show Confirm Password Control" on to add a second password field, so users can re-enter their password to confirm it matches.
    2. "Enable Show/Hide Password (Show Eye)" adds a small eye icon inside the password field. When users click it, they can toggle between hiding and showing the password they typed.
    3. Use "Eye Class" if you want to customize the style of the eye icon. Just enter the CSS class you want to apply.
    4. "Show Validation Info" when enabled, helpful messages will appear to guide users about the required password format (like length or character rules).
    5. "Password Minimum Length" set the minimum number of characters a user must enter. Make sure this value is more than 3.
    6. "Password Maximum Length" set the maximum number of characters allowed. This must be more than 5.

On this page