Protected Field Component

Overview

The Protected Field component masks data entered in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. Masking is useful when your end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. needs to enter sensitive information like a Social Security or account number, and they don't want the information to be visibly seen.

Consider using a Protected Field component for the following reasons:

  • Protect the field from being viewed in real-time by someone other than your end-user. Using a Protected Field helps prevent "shoulder surfing". Shoulder surfing is when someone watches the end-user's screen to collect information.

  • Don't want or need to store sensitive data in the database. The Protected Field component doesn't have a Store Data in Database setting.

A Protected Field component works much like a Text Field or Number component would. The main difference is that values entered in a Protected Field don't display in the field. Instead, the field shows a substitute character, such as asterisks or dots. The Protected Field component doesn't offer built-in encryption or other security features. It only masks the end-user's input in Express View. Therefore, the Protected Field component isn't a good option for storing passwords.

You'll find the component under the Secondary Fields group to the left of the Module Builder:

What You'll Learn

After completing this article, you’ll know when to use a Protected Field component and how to configure its settings.

About the Configuration Window

General

A static image displaying the Protected Field configuration window.

Setting Description

Property ID

A Property ID is the unique field ID used by Unqork to track and link components in your module.

The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. calls.

Property IDs must use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation.

Notes Note-Icon

Select this tab to display the component's Notes area. You can use notes to keep your teammates informed.

The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component.

Display Icon Display

Select this tab to manage your component's display settings.

Validation Icon Validation

Select this tab to manage your component's validation settings.

Advanced Icon Advanced

Select this tab to manage your component's advanced settings.

Permissions Icon Permissions

Select this tab to see the RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. settings of the component.

Field Tag Icon Field Tags

Assign components one-word labels to help organize, identify, and group the components in your application.

Consider an example from the API Specification Snippet: Field Tags are applied to Hidden components in the panelRequest and panelResponse Panel components. The Field Tags identify the data type of parameters included in the API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. request and response. The API Docs Dashboard tool populates with information about each parameter’s data type, identified by the Field Tag.

Field Tags act as a type of Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component.

For example, add the Field Tag tagForDecision to multiple components in your module. Open the Inputs table of a Decisions component and reference the tagForDecision Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the tagForDecision Field Tag.

Save your Field Tags by pressing Enter (Return) or adding a comma after each entry.

Shortcuts Icon Shortcuts

Select this tab to open the list of supported keyboard shortcuts you can use in the component settings modal. Keyboard shortcuts include:

  • Cmd + S (Mac) / Ctrl + S (PC): Save and close the component settings modal.

  • Cmd + G (Mac) / Ctrl + G (PC): Opens a search window to find specific fields and settings in the component settings modal.

  • Tab: Tab to the next field or setting in the component settings modal. This keyboard shortcut tabs left to right and top to bottom.

  • Shift + Tab: Tab to the previous field or setting in the component settings modal. The keyboard shortcut tabs from right to left and bottom to top.

  • Enter (Return): When tabbing to a Tooltip Icon (tooltip), press Enter (Return) to display the field or setting tooltip. Press Enter (Return) again to hide the tooltip.

Additional keyboard shortcuts:

  • Drop-down menus: When you Tab to a settings drop-down, use the keyboard's Up-Arrow Icon (up)/ Down-Arrow icon (down) arrows to make a selection. Then, press Enter (Return) to confirm the selection.

Documentation Icon Documentation

Select this tab to access the component documentation in Unqork's In-Product Help.

Cancel

Click this button to undo any unsaved configuration changes and return to the Module Builder canvas.

Save & Close

Click this button to save all setting  configuration changes and return to the Module Builder canvas.

Display Panel

A static image dispaying the Protected Field component's Display settings.
(click to expand image)

Field Text

Setting Description

Label Text

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Placeholder Text

A short prompt telling end-users the expected value of an input field. For example: Enter your Social Security Number. Placeholder Text displays inside the input field until the end-user begins an entry.

Prefix

Alphanumeric characters append to the start of the value entered in the field. If called by another component, the prefix stores with the value.

Suffix

Alphanumeric characters that append to the end of the value entered in the field. If called by another component, the suffix stores with the value.

Contextual Help

Setting Description

Tooltip

A quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line.

Default State Options

Setting Description

Disable User Input

When set to  (ON), end-users cannot interact with or edit the Express View's input field or element. When end-users hover over the field, their cursor changes to alert them to the status change.

By default, the Disable User Input toggle is set to (OFF).

Hide Field

Shows or hides the component from view. Setting the Hide Field toggle to  (ON) hides the component in Express View. Setting the toggle to (OFF) shows the component. The component is always visible in the Module Builder.

By default, the Hide Field toggle is set to (OFF).

Validation Panel

A static image dispaying the Protected Field component's Validation settings.
(click to expand image)

Input Required

Setting Description

Required

When set to  (ON), the end-user must enter a value in the component's visible fields. Set the toggle to (OFF) when an entry is optional.

By default, the Required toggle is set to (OFF).
Error Message

A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field.

Advanced Panel

A static image dispaying the Protected Field component's Advanced settings.
(click to expand image)

Additional Validation Options

Setting Description
Min Length

Sets the minimum number of characters that an end-user must enter for valid input.

Min Length Error Message

A custom error message that displays below the input field. The error message displays when the entry doesn't meet the minimum character length rule.
Max Length

Sets the maximum number of characters that an end-user must enter for valid input.

Max Length Error Message

A custom error message that displays below the input field. The error message displays when the entry doesn't meet the maximum character length rule.

Additional Styling

Setting Description

Custom CSS Class

Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules.

Updated CSS styling applies to all components that reference this custom class name.

Adding a Protected Field Component

Let's add and configure a Protected Field component for collecting an account number. You'll use validation settings to ensure the account number is exactly 10 characters long. These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop a Protected Field icon Protected Field component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter accountNumber.
3. In the Label Text field, enter Enter Account Number.
4. In the Min Length and Max Length fields, enter 10.
5. From the Protected Field component configuration window, click the Advanced Icon Advanced tab.
6. In the Min Length Error Message and Max Length Error Message fields, enter Account number must be 10 digits long..

A static image displaying the Protected Field component's Advanced settings. The Min & Max Length fields, and the Min Length & Max Length Error message fields are highlighted.

7. Click Save & Close.
8. Save your module.

Preview your module in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. You'll see the following functionality:

Structure of a Protected Field Component's Data

A Protected Field component stores its data as key/value pair. The value is stored as a string data type.

A static image displaying the Developer Console view, the Submission Data displays the Protected Field component as a key-value pair.

Resources