Introduction
The Password Field is standard HTML Input to capture user input, but disguise each character with an asterisk (*) instead of displaying the entered digits. They offer a user on-screen privacy while he or she is entering a password.
Get Started
The easiest way to see how the Password Field works is to create a new app. Here are the steps:
- Start the Joget Server and open the App Center.
- Log in as admin and click on the Design New App button. (see Figure 1)
Figure 1 - Fill up the App Details as follows and click Save (see Figure 2):
- App ID: tutorial
- App Name: Tutorial
Figure 2 - You will be directed to the Design App. Click on the Create New Form button and fill up the Form Details as follows (see Figure 3):
- Form ID: passwordField
- Form Name: Password Field
- Table Name: tutorial
Figure 3 - Click on Save and you will be directed to the Form Builder.
- Drag and drop a Password Field element on to the canvas.
- Click on Preview , key in any value in the Password field and it will be automatically masked (see Figure 4).
Figure 4
Password Field Properties
Edit Password Field
| Name | Description |
| ID | Element ID (By declaring as "password", a corresponding database table column "c_password" will be created) Please see Form Element for more information about defining the ID and list of reserved IDs. |
| Label | Element Label to be displayed to the end-user. |
Advanced Options
Data
| Name | Description |
|---|---|
| Value | Default Value when there's no existing value found. A hash variable is accepted here. For example, you may key the following #currentUser.firstName# #currentUser.lastName# to pre-populate the field with currently logged in user's name. |
| Max Length | Maximum character length allowed. |
| Validator | Attach a Validator plugin to validate the input value. When will validation takes place? Validation will take place whenever a form is submitted except when it is submitted as "Save as Draft". |
UI
| Name | Description |
|---|---|
| Size | Width of the element. |
| Readonly | Determines if the element is editable. |
| Display field as Label when readonly? | Displays the value of the element as plain text when an element is set to "Readonly". |