Password input component
The password input component lets you add a form field that uses the correct input type for secure data entry in Boomi Flow. The same component also serves as the encrypted input, so you can capture sensitive values, such as passwords or other confidential data, without displaying the entered characters on screen.
Add Password Input components into a page to capture user input and data in a Flow. This input can then be used in any way required, such as to trigger further events in the Flow, determine the path of the Flow, or simply to capture user data.
General settings
Configure the general settings for the component.
| Setting | Description |
|---|---|
| Name | Enter a name for the Password Input component. |
| Label | Enter a label for the Password Input component. The label is displayed above the component by default. Do not enter a label if you do not require this text to be shown. |
| Editable | Select this option to allow users to interact with and edit the field. Deselect to make the field read-only. |
| Autocomplete Tokens | Specify how the browser should suggest saved information to expedite form filling. The value can be set to "on" to enable standard autocomplete, "off" to disable it for this field, or a space-separated list of tokens (such as name or email) to guide the browser on the specific type of information to suggest. |
| Placeholder text | Enter a short hint to display in the field, such as an example of the expected value or format. |
| Help information about this component | Display help text directly below the component, for example to provide further information on how to use the component. |
State
-
Select the value that you wish to save the user input data into.
-
Save the component state into: Click Select or create a new value to select an existing value or create a new value.
The type of value selected in this field must be Password or Encrypted for this component to capture and mask the entered characters. Refer to Value content kinds for more information.
Validation
Add client-side page validation to the component. You cannot add validation if you are saving state data into a boolean or object value.
- Click Add Validation.
- Select the validation Type.
- Enter a valid Value for the validation type.
- Enter a feedback Message to show to the user if the validation criteria is not met.
- Click Update to add the validation item.
| Setting | Description |
|---|---|
| Required | Specify if the component requires user input before the next step in the Flow can be navigated to. For example, a user must complete the input for this field before they are allowed to progress in the Flow. 1. Switch on the toggle to set the component as requiring input from a user before they can progress in the Flow, such as to the next page for example. A red asterisk is displayed next to the field name to indicate it is required. 2. Switch off the toggle to allow a user to progress in the Flow even if they have not entered any input into the component, for example if the field is optional. |
| Type | Select the type of validation to apply to the component. 1. Minimum number: A user must enter more than this value into the field. 2. Maximum number: A user is unable to enter more than this value into the field. 3. Regular expression pattern: Apply Regular Expression (Regex) validation to the component. |
| Value | Enter the validation criteria. 1. Minimum number: Enter a minimum number or character limit for the component. 2. Maximum number: Enter a maximum number or character limit for the component. 3. Regular expression pattern: Enter a valid Regular Expression (Regex) to validate the component. |
| Message | Enter a message to show to the user if the validation criteria is not met. For example, if the user has entered a value that exceeds the Maximum number value you have set. |
Styles
Apply additional CSS styling to the component.
Enter space-delimited CSS classes or selectors in the CSS Classes field. When you run the Flow, these classes are appended to the main component class.
