Skip navigation

Developer Community

1 Post authored by: Will Leingang Employee

I recently found the need to create a fully custom UI page, that didn't involve using the framework page template. The user interface had to be dynamic and easy to identify problems, tasks and source code changes that we need to prioritize.

 

I put together a tree map visualization for our team that gives us an easy way to see:

Screen Shot 2015-01-22 at 1.42.43 PM.png

  • Source Code changes
  • Closed Problems
  • Open Incident Tasks

 

I put it up on a TV we have hanging over our team area at ServiceNow and it constantly refreshes with the latest changes so we always know how old something is and what category it is under. It looks really cool if I do say so myself.

 

I modeled the UI page after newsmap.jp . The size and color of the boxes represents the category and age of each item.

 

Let me know if this is something you are interested in getting more information on! Maybe I'll detail the project in another blog post and include the source code.

 

Making a UI page without using a framework page template

 

Before I even started to build the user interface, I knew I didn't want all of the platform html, javascript, and CSS wrapping that came with using the regular framework page template. I wanted this to be a very customized UI. In fact, I wanted total control over everything in the page source.

 

The Glide platform wraps every UI page in a standard html_page template which gives you everything from basic CSS to UI scripts. You can see that here:

 

UI page framework template servicenow.jpg

 

The key to building it on your own: ?sysparm_direct=true

 

To make a UI page without that page template you can add ?sysparm_direct=true when you request your UI page. In this case: instance.service-now.com/my_ui_page.do?sysparm_direct=true.

 

UI PAGE script custom.jpg

 

Easy enough yes? Let me know with a comment if you would like me to post a second blog to follow up with this that includes the source code!

Filter Blog

By date: By tag: