Password Field

Introduction

The Password Field in Joget is a standard HTML input element designed to capture user input securely by disguising each character with an asterisk (*). This feature provides on-screen privacy for users when entering their passwords.

How does it work?

To see how the Password Field works, follow these steps:

1. Open up a form in the Form Builder.
2. Drag and drop a Password Field element onto the canvas.
3. Click the Password Field to open the Configure Password Field properties.
4. Fill up the following fields:
   • Label: Password
   • ID: password
5. Click Apply Change and Save the changes on the Form Builder.
   
6. Click Preview, key in any value in the Password field, and it will be automatically masked. 
   

Configure Password Field

Configuring the Password Field involves setting its label, ID, and advanced options such as default values, maximum length, validators, and UI options.

Fields to configure:

• Label: The element label to be displayed to the end-user. It's a mandatory field, and you can add Font Awesome Icons to your menu labels
• ID: The element ID. By declaring it as password, a corresponding database table column c_password will be created. See Form Element for more information about defining the ID and a list of reserved IDs.
• Suggestion: The Form Builder suggests an ID for an element based on the Label you have entered. Clicking on Accept will overwrite the value in ID with the suggested value.
• Icon Position: Select where to position the selected icon. This option is available only when an icon is selected in the Label property. Options include:
  • Before Input (Default)
  • In Label Only

Advanced options

Advanced options provide additional data handling, validation, and UI customization settings.

Data

The Data section for the Password Field in Joget allows you to define default values, maximum lengths, and validators to ensure secure and validated user input. This includes setting default values using hash variables, specifying maximum input lengths, and attaching validation plugins to ensure data integrity.

Fields to configure:

• Value: Default value when no existing value is found. A hash variable is accepted here. For example, you may key in #currentUser.firstName# #currentUser.lastName# to pre-populate the field with the currently logged-in user's name.
• Max Length: Maximum character length allowed.
• Validator: Attach a Form Validator plugin to validate the input value. Validation will occur whenever a form is submitted except when submitted as Save as Draft.

UI

The UI section allows you to customize the appearance and behavior of the Password Field in the Joget form builder. This includes setting the element's size, making it readonly, and determining how the field should display when in readonly mode.

Fields to configure:

• Size: Width of the element.
• Enable Strength Checker: Displays the strength checker to evaluate the password input's strength.
• Write Permission: Blank by default. This field in Joget DX 9.1.0 replaces the Readonly checkbox in 9.0.x
  • Readonly: A new field mode that makes fields non-interactable by the user, but their value can be saved into the database.
  • Disabled: Makes the field non-interactable by the user, and its value cannot be saved in the database. This is the Readonly checkbox function in Joget DX 9.0.5 or older.
• Display Field as Label When Readonly and Disabled?: Displays the element's value as plain text when set to Readonly or Disabled.
  Note
  This field is called Display field as Label when readonly? in Joget 9.0.x or earlier.
• Enable Password Visibility Toggle: Enables the option to allow users to preview the password they key in.
  New Feature
  The Enable Password Visibility Toggle field is only available in Joget DX 9.1 and above.

  Note
  When enabled, you can see an 'Eye' icon will be available to toggle on and off to reveal the password.

  1. In a form with a password field, click on the “eye” icon to preview the password

  

  2. Click it again to hide the password

  

  For security reasons, the actual password entered in the form previously will not be retrieved when viewing an existing form. Therefore, the visibility toggle will not show unless the user enters a new password.
  

  

Related Links

• Protect Sensitive Data