1107
Views
11
Comments
Solved
Show/Hide Input Field (Password)
Application Type
Traditional Web

Hi,

I wanted to create an input field which is I will use for the password wherein the user can toggle if he/she wants to hide or show the password.


I tried the Input Password but I don't know how can I make it to show the input value.

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Ruru,

For the mentioned use case, use the TogglePassword server action, defined in the OutSystemsUIWeb module as shown below.

and also set the Password Input type as password


See this sample app Toggle Password

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

TWALabTogglePassword.oml
2024-02-23 00-37-54
Ruru

Thank you so much Benjith, this is also helpful!

2021-03-18 21-03-15
Benjith Sam
 
MVP

You're most welcome, Ruru.

Glad to help you :)


Kind regards,

Benjith Sam

2021-11-18 18-03-41
AJ.
Solution

Hello @Ruru 

You can give the 'Toggle Show Password' forge component a try.

There's another forge component that does the same thing - 'Toggle Password'

Regards,

AJ

2024-02-23 00-37-54
Ruru

Thanks Aj, I'll try that one.

2024-02-23 00-37-54
Ruru

am i doing it right?

2021-09-21 09-26-31
Aadhavan Shanmugam
Solution

Hi Ruru,

You can use below java script in to onclick action to toggle between hidden password and text password.

You can refer below solved solutions

https://www.outsystems.com/forums/discussion/46293/toggle-the-2nd-password-field/

https://www.outsystems.com/forums/discussion/36951/toggle-password/

Good luck!!

Thanks, Aadhavan S

2024-02-23 00-37-54
Ruru

Hi Asdhavan, I'm using traditional. I can't seem to find where can I put the js script.

2021-09-21 09-26-31
Aadhavan Shanmugam

Hi Ruru, 

You can run javascript in traditional web application also if you don't want to integrate with any forge components..

Refer how to run javascript in traditional web application

https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Web_Application_Using_JavaScript/Define_and_Run_JavaScript_Code

Thanks, Aadhavan S


2024-02-23 00-37-54
Ruru

Hi Aadhavan this is so helpful!


Thank you very much!

2021-11-18 18-03-41
AJ.
Solution

Hello @Ruru 

You can give the 'Toggle Show Password' forge component a try.

There's another forge component that does the same thing - 'Toggle Password'

Regards,

AJ

2024-02-23 00-37-54
Ruru

Thanks Aj, I'll try that one.

2024-02-23 00-37-54
Ruru

am i doing it right?

2021-09-21 09-26-31
Aadhavan Shanmugam
Solution

Hi Ruru,

You can use below java script in to onclick action to toggle between hidden password and text password.

You can refer below solved solutions

https://www.outsystems.com/forums/discussion/46293/toggle-the-2nd-password-field/

https://www.outsystems.com/forums/discussion/36951/toggle-password/

Good luck!!

Thanks, Aadhavan S

2024-02-23 00-37-54
Ruru

Hi Asdhavan, I'm using traditional. I can't seem to find where can I put the js script.

2021-09-21 09-26-31
Aadhavan Shanmugam

Hi Ruru, 

You can run javascript in traditional web application also if you don't want to integrate with any forge components..

Refer how to run javascript in traditional web application

https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Web_Application_Using_JavaScript/Define_and_Run_JavaScript_Code

Thanks, Aadhavan S


2024-02-23 00-37-54
Ruru

Hi Aadhavan this is so helpful!


Thank you very much!

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Ruru,

For the mentioned use case, use the TogglePassword server action, defined in the OutSystemsUIWeb module as shown below.

and also set the Password Input type as password


See this sample app Toggle Password

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

TWALabTogglePassword.oml
2024-02-23 00-37-54
Ruru

Thank you so much Benjith, this is also helpful!

2021-03-18 21-03-15
Benjith Sam
 
MVP

You're most welcome, Ruru.

Glad to help you :)


Kind regards,

Benjith Sam

2022-07-13 15-07-44
Eduardo Hunhoff


Hello,I had the same problem, you can use this JavaScript in reactive, mobile and web applications 


var inputPassword = document.getElementById($parameters.Input);

var typeInputPassword = inputPassword.type;if(typeInputPassword === 'password')

   inputPassword.setAttribute('type', 'text');

}

else{    

inputPassword.setAttribute('type', 'password');

}

You will need to pass an input parameter in JavaScript, which will be the password Input Id


Kind regards, 

Eduardo Hunhoff

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.