Service Portal-style Homepage Widgets

//Service Portal-style Homepage Widgets

Service Portal-style Homepage Widgets

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

‘welcome_to_servicenow’ UI Page
Name: welcome_to_servicenow
HTML

<!-- Contains the HTML and CSS necessary for all styling and layout. Feel free to modify if need be. -->
<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’.

‘welcome_to_servicenow’ Widget
Name: Custom Widgets
Renderer type: JavaScript
Script:

function sections() {
    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.

‘service_portal_chat’ UI Page
Name: service_portal_chat
HTML

<!-- Contains the HTML and CSS necessary for all styling and layout. Feel free to modify if need be. -->
<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>
By | 2018-07-09T14:59:51+00:00 April 27th, 2017|Categories: System UI|Tags: , , |3 Comments

About the Author:

Mark has worked in the IT industry since 2002 and with ServiceNow since 2007. He is the founder and creator of SN | Guru and the co-founder of Crossfuze, one of the worlds leading ServiceNow consulting partners. Prior to co-founding Crossfuze, he worked for ServiceNow as a Senior Architect on the Professional Services team. He has personally led dozens of successful implementations encompassing every part of the ServiceNow platform. He is also responsible for designing and developing groundbreaking ServiceNow solutions and best practices in the form of various applications, turnkey solutions, and integrations during his tenure at ServiceNow, Crossfuze and, of course, SN | Guru. These solutions are used today by ServiceNow administrators and consultants alike in hundreds of ServiceNow instances around the world!

3 Comments

  1. Dan May 1, 2017 at 5:40 pm - Reply

    Hi Mark, another great article. What are these “frustrating API limitations” you mention? Cheers – Dan

    • Mark Stanger May 1, 2017 at 5:54 pm - Reply

      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

  2. Shibinmon Joseph September 11, 2017 at 3:51 am - Reply

    Wonderful. I implemented this in my instance. Thank you for such a useful post

Leave A Comment