How To Add A “Show Password” Option In UI Builder

It is quite common in UIs to include an “eye” icon right next to the password input field (which has masked input by default) to display the entered password. This recipe describes how to implement it in UI Builder.

As passwords become more complicated – and more prevalent – for security purposes, it’s easier for typos and errors to occur. Giving your users the option to view what they’ve typed can help alleviate this common irritation.

Fortunately, implementing a “show password” option without code is very simple in UI Builder!

To start, add an input component and icon component. For this demo, we will give the input component the Id testInput. Set the input type to Password. We will also select the “eye” icon.

Next, implement the onlick event for the “eye” icon. The testInput component is the password input field. Below is the Codeless code, which we explain further later in this article.

View a live demo.

Let’s walk through what the above code block is doing, in plain English.

1. Set the property stored in Page Data (only applicable to this page) called isPasswordVisible.
   1. If the property does not exist, it will be created automatically with a value of null, treated like false in the next step
   2. The not block checks the property value; if the value is false, the not block changes the value of isPasswordVisible to true, and vice versa
2. Set the property type of the component testInput based on the following test:
   1. First, check the value of isPasswordVisible
   2. If the value is true, then the type property (which we set to password using the component dropdown) changes to input
   3. If the value is false, then the type property changes to password

That’s all there is to it! Be sure to check out all of our UI Builder recipes.

Happy Codeless Building!