AllAnnouncementsApps & WidgetsCMSDesign & ThemesDocumentationEmployee CenterNow ExperienceTips & TricksTutorialsUncategorizedVideos

The New Service Portal

For those of you who didn't see Fred Luddy's keynote at Knowledge 15, you missed the demo of the new Service Portal. Although it is not necessarily a direct replacement for CMS, it does address a lot of the major issues of the current CMS and introduces several new features, such as: responsive service catalog & knowledge no iframes no prototype.js built with Bootstrap & Angular.js simple drag-n-drop interface customizable widgets realtime chat For a sneak peak of what's to come, watch Fred's keynote on the community: https://community.servicenow.com/community/knowledge-user-conference/knowledge15/highlights/keynote-day-2

UI Pages without all the extra platform HTML

If you create a empty UI pages you will notice that without anything on the page, the platform has already loaded in a ton of platform code including JavaScript (js_includes), CSS (css_includes), as well as quite a bit of HTML. If you are looking to build a page that includes jQuery, Angular, Bootstrap, or other JavaScript or CSS library, chances are you will run into a conflict. The following trick was originally brought to my attention by Will Leingang, who recently wrote a blog post about it. However because I think this is a very important trick to know, I am going to post it as well. The solution is to append "?sysparm_direct=true" to the end of the URL (after .do). Before: After: This method technically also works for CMS pages, however because CMS pages also load some additional javascript files to the page, if you remove the framework template you will get several JavaScript errors. There are some ways around this as well but require overloading some platform files, so that will be beyond the scope of this blog post.

Using UI Pages in a CMS Site without iFrames

This may not seem so exciting at first, but once you realize the potential of this technique the results can be pretty powerful. It's no secret that a lot of content in ServiceNow's ESS Portal lives inside iframes. I don't want to get into why iframes suck or why having UI Pages and forms from the main interface showing in CMS is not ideal... so I'll just assume you've used it enough to understand why it's a problem. This is far from a complete solution, but it highlights one technique that could be used to get rid of those pesky iframes as it pertains to UI Pages. One of the challenges is that UI Pages usually need to live in both the CMS and the main interface. So the trick is to figure out how to distinguish between the two. The answer to that is in the URL that is used. If you visit: [instance]/kb_home.do it's loading the UI page as normal. However if you insert "ess/" in front of the ui page name ([instance]/ess/kb_home.do), it will also load in the style sheets from that CMS site. The "ess" refers to the "url_suffix" field on the site. It will also populate a new variable called $[current_site], which really is the GlideRecord of the site record based on the url_suffix. What this allows us to do is distinguish between different sites and the main UI. Consider the following code: [crayon-69cfe49d56366062294325/] In this example, if we had a header defined in a UI Macro included on our site, we could now also include that header (or footer, or custom markup) on any UI page when used with our site. This essentially removes the need for using iframes. Now it also opens up another can of worms, such as: instance upgrades, and modifying OOB records. However in my personal experimenting I have been able to use this method to bring the full service catalog and knowledge base into a CMS site, without using any iframes, and without causing upgrade issues. It does take some tinkering, but it's doable with a little bit of work. To start I would definitely suggest cloning the UI pages and experimenting with the copy. With this method we're really just styling UI pages to look like a CMS site, there are many other ways of doing it and I've experimented with several with great results. However this method is fairly quick to get you started. I'd love to hear your feedback, and let me know if you have any questions.