Refresh backend UI with external CSS

I try to stay on top of things in ServiceNow world. To make this task easier, I have subscribed to developer articles updates from the community. And yes, it’s worth it. There are couple of gems there that deserve more attention. They inspire me to think outside of the box or they challenge me to verify or explain and understand why they work.

This post is inspired by that article. Author only shows how to change the ui action background color. But after reading it, my mind was like wow, if this is possible, then why I couldn’t change some inputs? Or maybe even load external CSS library? As it turns out, it is not only possible, but pretty simple and non-disturbing to other features of the platform.

Quick and dirty result

What I was able to achieve pretty quickly (about an hour, including research) still requires some work, but it’s cosmetic touches, really:

Everything works as before – the selects, lookups, buttons, … What was updated is just the CSS.

How to?

That’s really simple, just follow the guide from the original article:

Create a UI Macro
Create a UI Formatter using this UI Macro
Add UI Formatter on the form

And that’s it! Now you only have to adjust the content of the UI Macro to whatever you like.

Example

To achieve the result displayed above, I used materialize CSS library. You can choose anything you like, just remember that you have to be able to link it with external URL from your UI Macro with the <link> or <script> tags.

You can see the big difference on the form even after only loading the external CSS and JS files:

In this particular case, there are only select and textarea inputs not yet affected. They both require class updates (out of the box they have form-control class, this has to be replaced). Additionally, specifically in materialize, select inputs have to be initialized after the DOM content is loaded.

So, after implementing the class updates and inputs initialization you will almost get my final result. You may have noticed I also updated the navigation buttons. Doing this is simple once you learn that their id attribute is the same as UI Action’s Action name value.

My final UI Macro looks like that:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></link>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
	<style>
		#formBtn { background-color: orange;}
	</style>
	<script type="text/javascript">
		document.getElementById('create_collab_chat').classList.add('btn-floating');
		document.getElementById('create_collab_chat').classList.add('pulse');
		document.getElementById('create_collab_chat').innerHTML = '<i class="material-icons" style="line-height: unset">chat_bubble_outline</i>';

		document.addEventListener('DOMContentLoaded', function() {
			var selects = document.querySelectorAll('select');
			var textAreas = document.querySelectorAll('textarea');
			var instances = M.FormSelect.init(selects, options);

			selects.forEach(function(sel) {
				sel.classList.remove('form-control');
			});
			textAreas.forEach(function(textarea){
				textarea.classList.remove('form-control');
				textarea.classList.add('materialize-textarea');
			})
		});
	</script>
</j:jelly>

Conclusion

Now you will have no excuse when customer forces you to apply corporate theming across whole instance!