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.
Let’s walk through what the above code block is doing, in plain English.
null, treated like
falsein the next step
notblock checks the property value; if the value is
notblock changes the value of
true, and vice versa
typeof the component
testInputbased on the following test:
true, then the
typeproperty (which we set to
passwordusing the component dropdown) changes to
false, then the
typeproperty changes to
That’s all there is to it! Be sure to check out all of our UI Builder recipes.
Happy Codeless Building!