How to Brand OOB Password Reset and Password Enrollment UI Pages

[debmcdaniel]

We are about to deploy ServiceNow Password Reset and Password Change for Active Directory.

Is there a way to brand the UI pages associated with these applications? As they are today OOB, there is no corporate logo or any other identifying details - just a link to a "generic" web page.

To a self-service user, the password enrollment page and password reset page might appear as phishing pages (with no corporate branding). I know as an end-user I certainly would not be inclined to enroll or reset my password from what appears to be a very non-descriptive "generic" web page.

I've read where others in the community asked questions about branding using an iFrame since the pages are locked down. Unfortunately there were no answers provided. If someone knows how to brand using Bootstrap, I'm open to this idea as well.

Any suggestions/tips/hints/tricks?

Thanks in advance,

Deb

[anurag92]

Is this what you are looking for?

[debmcdaniel]

Not really. We know how to change the information on the page itself.

What we are looking to do is to add our company logo to the page and to brand it based on our corporate branding standards. Does that clarify?

[Carl Murray · Accepted solution]

Deb,

We had the same question, so we went to the HI portal and asked as well. After several back an forth items, here is how we accomplished it:

Under UI Pages, you will want to copy the information and code from inside the $pwd_reset pages. Then start a new page and paste it in. Do not do an Insert and Stay with $pwd_reset, as it copies the Protection Policy as well.

Then in the HTML code, there is this line:

<!-- ACTUAL PAGE STARTS HERE -->

Right after this line, we inserted the following code: (this is using our branding practices)

<table width="100%" style="background-color:%yourcolor%;">

<tr>

  <td width="10%"><img src="%yourlogo%"></img>

</td>

<td width="50%"><font face="Segoe UI" size="5" color="#FFFFFF"><b>Password Manager</b></font>

</td>

<td width="25%"><A HREF="%serviceportallink%"><img src="%homeicon%" border="0" height="30" width="30" style="position:absolute; float:right; right:15px; top:80px; z-index:2;"></img></A>

</td>

</tr>

</table>

Within the code, it also changes from $pwd_reset to $pwd_verify, then to $pwd_new.

When we created each of our new pages, we had to go back into the client script area and update the code so it would go to the newer form. Example:

function PwdAjaxIdentityParse(response) {

  //Let's handle security

  handleSecurityFrom(response);

  var answer = response.responseXML.documentElement.getAttribute("answer");

  if (answer == "ok") {

  wasSubmitted = false;

  submitWithOK('$pwd_verify.do'); ---> change to $pwd_verify_custom.do instead

  }

  else if (answer == "block") {

  wasSubmitted = false;

  submitWithBlock('$pwd_error.do',answer);

Then you will also want to update the Client Script URL Suffix onChange so it can update you password processes:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {

  // Update the public url if the url suffix changes:

  if (newValue == 'default') {

  g_form.setValue('public_url', '/$pwd_reset_custom.do');

  } else {

  g_form.setValue('public_url', '/$pwd_reset_custom.do?sysparm_url=' + newValue);

  }

}

This will allow the branding to be done throughout the pages. It is tedious, but ends up working in the end.

Thanks,

Carl

[debmcdaniel]

Carl, thank you so much. Yes this works and it is a very tedious process! It's ashamed ServiceNow hasn't addressed this need. Yes, HI was of no help with this

I was thinking about this and was wondering will this customization hold up over time? Have you done a patch update or an upgrade yet With these customizations in place. If so, how did this customization work out?