ServiceNow has done a good job in creating a nice-looking customer service portal in recent releases. Although there are still some frustrating API limitations, overall it’s a nice improvement and is a good choice if you’re looking to roll out a customer service portal in ServiceNow. Depending on your organization, you may not be ready to roll this out…or just wish you could replicate some of that nice-looking interface in the standard back-end where you get a more fully-featured experience. In this post I’ll show you how you can accomplish this with a couple of homepage widgets with Service Portal styling!
The first example is the full set of blocks on the Service Portal homepage as shown in this screenshot.
This can be replicated by taking the following steps…
1) Create a new UI page with the following settings
Name: welcome_to_servicenow
HTML
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style type="text/css">
.homepage-quicklinks {
background-color: #ffffff;
font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.text-info {
color: #31708f;
}
a.text-info:hover, a.text-info:focus {
color: #245269;
}
.text-success {
color: #5cb85c;
}
a.text-success:hover, a.text-success:focus {
color: #449d44;
}
.text-warning {
color: #f0ad4e;
}
a.text-warning:hover, a.text-warning:focus {
color: #ec971f;
}
.text-danger {
color: #d9534f;
}
a.text-danger:hover, a.text-danger:focus {
color: #c9302c;
}
.text-muted {
color: #979797;
}
a.circle_icon {
display: block;
padding: 20px 0px 20px 70px;
position: relative;
}
a.circle_icon .fa {
position: absolute;
left: 0px;
top: 10px;
}
a.circle_icon h3 {
font-weight: 300 !important;
padding: 0;
margin: 0 0 10px 0;
}
a:hover {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
</style>
<h1 style="color:#717171;font-size:3em;text-align:center">Welcome to ServiceNow!</h1>
<div class="homepage-quicklinks" style="background-size: initial; background-position: center center;">
<div>
<div class="row">
<div class="col-sm-6 col-md-3">
<span>
<div>
<div>
<a class="circle_icon text-info" target="" href="catalog_home.do?sysparm_view=catalog_default">
<span class="fa fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-shopping-basket fa-stack-1x fa-inverse"></i>
</span>
<h3>Order Something</h3>
<span class="text-muted">Browse the catalog for services and items you need</span>
</a>
</div>
</div>
</span>
</div>
<div class="col-sm-6 col-md-3">
<span>
<div>
<div>
<a class="circle_icon text-success" target="" href="kb_home.do">
<span class="fa fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-book fa-stack-1x fa-inverse"></i>
</span>
<h3>Knowledge Base</h3>
<span class="text-muted">Browse and search for articles, rate or submit feedback</span>
</a>
</div>
</div>
</span>
</div>
<div class="col-sm-6 col-md-3">
<span>
<div>
<div>
<a class="circle_icon text-warning" target="" href="com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=3f1dd0320a0a0b99000a53f7604a2ef9">
<span class="fa fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-fire fa-stack-1x fa-inverse"></i>
</span>
<h3>Report an Issue</h3>
<span class="text-muted">Contact support to make a request, or report a problem</span>
</a>
</div>
</div>
</span>
</div>
<div class="col-sm-6 col-md-3">
<span>
<div>
<div>
<a class="circle_icon text-danger" target="" href="#" onclick="popupOpenStandard('$chat_support.do?queueID=63470d1e6fbe460055b51665bd3ee421')">
<span class="fa fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-comments-o fa-stack-1x fa-inverse"></i>
</span>
<h3>Live Chat</h3>
<span class="text-muted">Start a chat conversation with customer service agents</span>
</a>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
2) Create (or edit if you’ve already go one) a widget record
The widget record is what will allow you to add the widget to a ServiceNow homepage. The following example could be used in your system. You can add multiple widgets to the script of any widget record. The key is to include your widget UI page by referencing it in the widget ‘Script’ field. You can access widget records by navigating to ‘System UI -> Widgets’.
Name: Custom Widgets
Renderer type: JavaScript
Script:
return {
'Welcome to ServiceNow!' : { 'name' : 'welcome_to_servicenow'},
'EXAMPLE LINE 2' : { 'name' : 'other_ui_page_name_here'},
};
}
function render() {
var name = renderer.getPreferences().get("name");
var gf = new GlideForm(renderer.getGC(), name, 0);
gf.setDirect(true);
gf.setRenderProperties(renderer.getRenderProperties());
return gf.getRenderedPage();
}
function getEditLink() {
if (!gs.hasRole('admin'))
return '';
return "sys_ui_page.do?sysparm_query=name=" + renderer.getPreferences().get("name");
}
3) Add the widget to your homepage
Once you’ve created your widget you should be able to navigate to your homepage and select and add the widget in the same way you’ve added other widgets in the past.
Including a single-block widget
You may also want to do the same thing with only one block of the widget. For example, maybe you want a standalone chat widget for the Service Portal that you can use from a homepage. The process there is the same; just a different UI page.
Name: service_portal_chat
HTML
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style type="text/css">
.homepage-quicklinks {
background-color: #ffffff;
font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.text-info {
color: #31708f;
}
a.text-info:hover, a.text-info:focus {
color: #245269;
}
.text-success {
color: #5cb85c;
}
a.text-success:hover, a.text-success:focus {
color: #449d44;
}
.text-warning {
color: #f0ad4e;
}
a.text-warning:hover, a.text-warning:focus {
color: #ec971f;
}
.text-danger {
color: #d9534f;
}
a.text-danger:hover, a.text-danger:focus {
color: #c9302c;
}
.text-muted {
color: #979797;
}
a.circle_icon {
display: block;
padding: 20px 0px 20px 70px;
position: relative;
}
a.circle_icon .fa {
position: absolute;
left: 0px;
top: 10px;
}
a.circle_icon h3 {
font-weight: 300 !important;
padding: 0;
margin: 0 0 10px 0;
}
a:hover {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
</style>
<div class="homepage-quicklinks" style="background-size: initial; background-position: center center;">
<div>
<div class="row">
<div class="col-lg-6">
<span>
<div>
<div>
<a class="circle_icon text-danger" target="" href="#" onclick="popupOpenStandard('$chat_support.do?queueID=63470d1e6fbe460055b51665bd3ee421')">
<span class="fa fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-comments-o fa-stack-1x fa-inverse"></i>
</span>
<h3>Live Chat</h3>
<span class="text-muted">Start a chat conversation with customer service agents</span>
</a>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
Hi Mark, another great article. What are these “frustrating API limitations” you mention? Cheers – Dan
Thanks Dan! There are quite a few community threads detailing these frustrations. I think over time it will get better but it’s pretty limited compared to what we’re used to as far as the traditional client scripting environment goes. Here’s a good post outlining some of it.
https://community.servicenow.com/thread/232934
Wonderful. I implemented this in my instance. Thank you for such a useful post