Catalog Request Form - Password (Masked) Variable Field Blinking Issue

[Vidya20]

When we have a Password (Masked) Variable on the Request Catalog Form along with other Drop down fields on it, the Password field gets automatically filled and drop down fields starts blinking on the form. This issue is not only with the Servicenow Catalog Variable Password(Masked) field, we also get the same problem when we use the Html Password field via Macro Variable.

This issue can be solved with the Browser settings by disabling the auto-save password option. https://www.computerhope.com/issues/ch001377.htm

 But in many cases, this cannot be done for all users as some users would prefer to save passwords on the browser and they don't want to fill in the password each time they login.

Workaround Solution for this Issue:

We can use an alternative approach to get the Password field functionality by using a combination of Single Line of Text & Macro field (Widget) on the Catalog Form.

Follow the Steps below to achieve the same,

1. Add a Variable with Single Line of Text field type named 'u_hidden_password' (This is the field to store the Password Text and this field should be made hidden for the form)
2. Add a Variable with Macro with Label field type named 'u_mimic_password' (This field behaves as Password field on the form). Under Type Specification, add the Widget which will be created in the next step.
3. Create a Service Portal Widget which will be used in the Macro Variable of the Catalog Item as an alternative Password field.

Body Html Template:
<input class="form-control" type="text" ng-model="passwordtext" ng-focus="focusIn()" ng-blur="focusOut()"> 
Client Controller: 
function($scope, $window) {
/* widget controller */
 $scope.focusIn = function(){
   var str = $scope.page.g_form.getValue('u_hidden_password');
   $scope.passwordtext = str;
   $scope.page.g_form.setValue('u_mimic_password', str);
 }
 $scope.focusOut = function(){
   var str = $scope.passwordtext;
   $scope.page.g_form.setValue('u_hidden_password', $scope.passwordtext);
   var replacedstr = str.replace(/./g, "*");
   $scope.passwordtext = replacedstr;
   $scope.page.g_form.setValue('u_mimic_password', $scope.passwordtext);
 }
}

 That's it!!!

You have a mimicking Password field on your Request Form. When you enter text on the password field and focus out of the that field, the string characters gets converted into "*" and when you focus in on the same field, the entered string text will be displayed back allowing you to modify the password. And this password field value will be stored in a Single Line of Text field which will be hidden on the form and can be used as required at the backend.

Keep exploring!!

[Martyna Batko1]

Brilliant work Vidia, kudos! I've encountered the same problem - masked field breaks the form and we can't expect users to stop using password vaults etc. I've found a similar-ish solution without the macro: https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0681163

[Vidya20]

Good to know that Martyna. Thanks for sharing the solution.