Making a UI Page without using the framework page template

[will_leingang]

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:

• 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:

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.

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!

[nathanfirth]

Will... this is friggin AMAZING!!! You seriously just made my day

By the way did you see my latest tutorial on custom navigation using Bootstrap: Custom Navigation Content Blocks with Twitter Bootstrap - ServiceNow Content Management - ServiceNow...

[James_Neale]

This is great!

I just wish I knew this stuff sooner.

For me, the main issue is with the heavily out of box customised style sheets which makes developing with Bootstrap kinda difficult. All I do to get around this is create a UI Macro, stick something like this code in it and then include it whenever I need it. It basically just gets rid of all the ServiceNow stylesheets and adds my own ones.

<script type="text/javascript">

      // Remove all ServiceNow Style Sheets and replace with our own

      $$('link[type="text/css"]').each(function(el) { el.parentNode.removeChild(el); });

      var head = $$('head')[0];

      // using the SN icons is handy

      head.insert('<link type="text/css" rel="stylesheet" id="retina_icons" href="/styles/retina_icons/retina_icons.css" />');

      // head.insert bootstrap, kendo etc

</script>

I put a post on my blog about it... Custom UI Page/CMS Styles | ServiceNow Developer

[kin-corn-karn]

Great stuff James, thanks for adding.   I've seen people recommend this in the past, but seeing it as a simple UI Macro helps.

I think a lot of people doing this type of work are now relying on Processors to feed "clean" html to users without the script includes or default style, but it's nice to have something that can be dropped into a form as well.

Have anything similar to drop PrototypeJS easily without breaking anything/much? (I assume you've wrestled with it as well if you're using Bootstrap in SNow).  

Also, (I know, I could just do this myself) how ugly do the normal pages look if you drop the default styles and just inject bootstrap.css?

[mathew2000]

Hi Will, sounds interesting  

will you be having second blog post with come codes so that I can try this out

Thank you

Matt

[MarosT896198693]

Hello Nathan,

any way you could perhaps demonstrate how to use processors for rendering UI macros and hooking them up with CMS sites/pages ?

thanks a lot

Maros

[James_Neale]

Sorry for the delayed response here. Glad it was helpful.

I haven't ever had the need to drop PrototypeJS and I wouldn't recommend it as a whole load of stuff is reliant on it, though obviously less and less. I wouldn't be surprised if it's on the way out.

Old UI is not compatible with Bootstrap, and even in the Fuji release it's a, shall we say, customised version of Bootstrap which has some core things changed. This is the main reason I came up with that script above, so I could inject a clean version.

[BenPhillipsSNC]

Thank you Will Leingang!!!!

This works perfectly for Angular directive templates!! Was really scratching my head on how to inject pure HTML. This works! Just make each one a UI page and set templateUrl to yourpage.do?sysparm_direct=true and voila.

- Ben

[chasingtheflow]

You can also make your directives UI Macros instead of UI Pages (with the benefit that they cannot be reached directly via url) by setting the templateURl to 'angular.do?sysparm_type=get_partial&name=your_ui_macro_name_here'.

[Akhil Vinay Ma1]

Thanks Will,

I Learned a new one., But it is not working on incident form when i tried like this "incident.do?sysparm_direct=true"

[Billy Matthews1]

There's also a flag on the UI Page record itself for Direct. If you turn that flag on then you get this functionality all the time and you do not need to use a URL parameter to turn it on / clutter up the URL.