Service Catalog from Employee Center message formatting

[mah1]

Washington DC Patch 4

We currently have several service catalogs that are available from Employee Center.  There seems to be an issue when a validation error message is displayed when the service catalog is accessed from Employee Center.

For example, we have a service catalog form with a field for mobile phone number. The type for this field is single line text with type specification validationregex as phone number.

If the form is opened from the service catalog and an invalid phone number is entered, the following is displayed:

If the form is instead opened from Employee Center and an invalid phone number is entered, the following is displayed:

The formatting of the error message is different.

However, if a message was displayed as informational (i.e., blue background) it is displayed the same in both Service Catalog and Employee Center. The formatting of messages only appears to differ for "error" messages.

Is there anything we can do to have these error messages display the same in Employee Center as they do in Service Catalog?

Thank you!

[AshishKM]

Hi @mah1 , 

Please share the code which is checking this phone format. If it's client script, share the full page.

-Thanks,
AshishKM

[mah1]

Thank you... There is no client script here. This validation is built into ServiceNow.

The mobile phone number question on the catalog item is type Single Line Text. The Validation Regex on the Type Specification tab is set to Phone Number:

Following is the regulation expression definition:

The user input is validated using the above regular expression and validation message.

[mah1 · Accepted solution]

I also posted this question in the Employee Center forum and received the following from @James Chun which resolved my issue:

I believe the difference is from the Polaris theme being applied on the backend (or the Service Catalog) and not in the Portal (ESC).

You can apply some custom CSS to make the UX consistent across the channels.

Note that the below is just an example and not a solution.

.bg-danger{
  background-color: rgb(248, 200, 205);
    border-radius: 4px;
    font-size: 14px;
    font-style: normal;
}

Outcome: