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>