Error message formatting issue with Catalog Items in Employee Center

[mah1]

I originally posted this question in the Developers forum but didn't really get an answer so I am re-posting it here.

Washington DC Patch 4

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

For example, we have a catalog item 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 validation error message is displayed as follows:

If the form is instead opened from Employee Center and an invalid phone number is entered, the validation error message is displayed as follows:

The formatting of the error message is different.

However, if a message is informational (i.e., displayed with 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!

[Kristen Ankeny]

Are you using showFieldMsg? If so, maybe try showErrorBox to see if that resolves the issue?

[mah1]

For the example I provided with the phone number, that is built into ServiceNow's catalog validation so I'm not sure what they use to display the validation error message. But, for another field where we are using javascript to validate the user input both showFieldMsg and showErrorBox display the same behavior from Employee Center; that is, the formatting which indicates an error is stripped off.

Thank you for the suggestion though.

[James Chun · Accepted solution]

Hi @mah1,

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:

Cheers