Widgets Archives - ServiceNow Guru

Service Portal-style Homepage Widgets

Mark Stanger — Thu, 27 Apr 2017 18:13:43 +0000

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

 
Welcome to ServiceNow!










Order Something
Browse the catalog for services and items you need



 









Knowledge Base
Browse and search for articles, rate or submit feedback



 









Report an Issue
Contact support to make a request, or report a problem



 









Live Chat
Start a chat conversation with customer service agents

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

 










Live Chat
Start a chat conversation with customer service agents

The post Service Portal-style Homepage Widgets appeared first on ServiceNow Guru.

Creating a Live Feed Homepage Widget

Mark Stanger — Mon, 17 Oct 2011 14:47:40 +0000

ServiceNow Live Feed is a great new functionality that provides a place to post and share content in a ServiceNow instance. This content forms a searchable knowledge source for sharing information within an organization. I’ve had a request recently to make this feature accessible from a user homepage. This article explains how you can easily create a Live Feed homepage widget.

The first thing you’ll need to do is make sure that you’ve got the live feed plugin enabled in your instance. Once you’ve done that, just follow the steps below…

1Create a UI page containing the live feed in an iFrame

‘render_gadget_livefeed’ UI page
Name: render_gadget_livefeed
HTML:

2Follow the instructions here to add your UI page to a widget, and add your widget to a homepage.

Want more? This same idea can be applied to bring ServiceNow Chat functionality to user homepages. Click here to see how!

The post Creating a Live Feed Homepage Widget appeared first on ServiceNow Guru.

Adding ESS Chat Capability to a Standard Homepage

Mark Stanger — Thu, 15 Sep 2011 16:02:28 +0000

If you’re reading this you’ve probably already seen the chat capability that ServiceNow provides. This is a great feature but it’s only currently available if you deploy the ServiceNow content management system (CMS) along with it. I recently worked with a co-worker, Greg Willis, to develop a way to add end-user Help Desk chat capability to a standard homepage. This article explains how you can do it too!

The basic concept behind this is to leverage a CMS site page with a chat link inside of the standard frameset on a homepage. This is accomplished by setting up the CMS site, page and content, and then putting that page inside of an iframe widget on a homepage. Here are the step-by-step instructions.

1) Install the Content Management and Chat Plugins

This solution doesn’t change the fact that end-user chat capability is only supported by the CMS plugin. You don’t have to set up a full-fledged CMS site, but you will need to install the plugin. Here’s the CMS wiki link for more information. You’ll also need to make sure you have the chat plugin installed.

2) Set up a new ‘Site’ record

This tutorial assumes that you don’t want to use a full CMS implementation. In order to get the chat functionality we need, you can set up a basic CMS site with a single page. Navigate to ‘Content Management->Sites’ and create a new site record. You only need to fill in the following information…
Name: Standalone Chat
Suffix: chat

IMPORTANT!!! You’ll need to come back to your site record after completing step 3 below to fill in the ‘Home page’ value for your site!

3) Create a new page for your chat site

The page is what will actually display the chat widget. The important thing here is to choose a layout that will look good in the widget we’ll create later and to make sure to associate the page to the site you created in step 2. Here are the page settings you should use based on the input from step 2 above.
Name: Chat page
URL suffix: chat
Layout: CMS 1 Column
Content site: Standalone Chat

IMPORTANT!!! Once you’ve created this page you should go back to the site record created in step 2 and set this page as the ‘Home page’ value in your site record!

4) Add a new Dynamic Content block to your page

From your new page, click the ‘Edit Page’ link at the bottom of the form. Once in the edit view, click the ‘Add content’ link and add a New Dynamic Content block as shown here…

Your Dynamic Content block should be configured with the following settings…

‘Chat’ Dynamic Content block

The code here is set up to use the out-of-box chat queue for end users. If you need to change this to a different chat queue, you’ll need to replace the sys_id in line 3 below with the sys_id of your chat queue.

Name: Chat
Dynamic content:








Help Desk Chat

If you’re running an instance with pre-October 2011 release code, you may receive an error when clicking your chat button. If so, you’ll need to change the ‘onclick’ portion of the script above to look like this instead…

CustomEvent.fire(LiveEvents.WINDOW_JOIN_QUEUE_QUERY, 'c54f0abf0a0a0b452db84664f409c79c', 'Help Desk Chat'); return false;

This changes with the October 2011 release so you’ll need to change to the syntax in the code block above when upgrading to October 2011 or later. See this wiki article for more details.

5) Create a UI page with an iframe for your chat page

This is really the key to the entire solution. As I’ve explained above, the ESS chat queue only works in the CMS setup. That’s why we’ve gone through all of the trouble of steps 1-4 :). Now we just need to put our CMS page in an iframe so that we can view it on a regular homepage. You can do this with a simple UI page created by navigating to ‘System UI->UI pages’, but if you want it to work in a homepage widget this step needs to be followed exactly.

‘render_gadget_standalonechat’ UI page
Name: render_gadget_standalonechat
HTML:

There are 3 important parts of this UI page. The first is the name. Because we want this to be included as a homepage widget, we need to name our UI page starting with ‘render_gadget_’. Second is the ‘src’ value from the iframe tag. This points to the suffix name of the CMS site set up in step 2 above. The third important piece is the height of the iframe. You can adjust this to meet your specific needs, but I’ve found that it should be no less than 320 pixels if you want it to look right.

6) Create or modify a Widget record

This step is only necessary if you want to display the chat button on a homepage. I’ve explained how to set up a widget and a UI page like this before so I’ll link to that solution for the instructions. Just follow the part about the widget, not the UI page there.
https://servicenowguru.com/system-ui/creating-knowledge-search-homepage-widget/

7) Add the widget to a homepage

Once youâ€™ve set up your UI page and Widget record correctly you can open up a homepage and click the â€˜Add contentâ€™ link in the top-left corner of the page. Youâ€™ll see your widget category name followed by the name of your widget in the second box to add to a homepage.

If you’ve followed the steps above correctly, you should have a working chat link on your homepage that looks like this…

Because the entire chat functionality is part of a dynamic content block, you can change the look of the button any way you like by modifying that HTML. Here’s a quick example I came up with to change the icon and the text a bit.

Want more? This same idea can be applied to the Live Feed to bring ServiceNow Live Feed functionality to user homepages. Click here to see how!

The post Adding ESS Chat Capability to a Standard Homepage appeared first on ServiceNow Guru.

Creating a Knowledge Search Homepage Widget

Mark Stanger — Mon, 06 Jun 2011 13:57:21 +0000

A couple of weeks ago at Knowledge11 I presented a session on Advanced Incident Management. One of the topics discussed there was to help your users help themselves by finding solutions in a knowledge base. A simple way to make this more of a focus for your end users is to add a ‘Knowledge Search’ widget to the top of their homepage.
Even if you already have this functionality in your instance, this should serve as a good tutorial on adding any new custom homepage widget to your ServiceNow instance.

The first step in creating a widget is to create the UI page to display the widget content. I’m not going to go into the complexities of UI page scripting here, but a UI page to add a knowledge search widget should look like this…

Note the ‘render_gadget_’ naming convention of the UI page! While it’s not an absolute necessity, you’ll want to follow this convention for any widget UI pages. You’ll definitely want to follow this convention if you want this example to work in your instance or if you want to add this to any of your out-of-box widget categories.

‘render_gadget_kbsearch’ UI Page
Name: render_gadget_kbsearch
Description: KB Search widget
HTML:

Next, you’ll need to reference this UI page in a ‘Widget’ record in order to enable users (and you as an administrator) to add it to a homepage. Widgets can be found by navigating to ‘System UI -> Widgets’ and they control the options that people see when they click the ‘Add content’ link on a homepage. There are several out-of-box widgets, but I like to set up a new widget for any instance that I work on called ‘Custom Widgets’ so that I don’t have to modify any out-of-box code. If you’ve got a ‘Custom Widgets’ widget in your system then you’re okay to modify that or create a new one if you choose.

As you might expect, the widget needs to follow a very specific pattern if it is to work correctly. I always use the same pattern that is used for the out-of-box widgets to keep things more standard and simple. It really requires only a couple of things. First, your UI page MUST be named with a ‘render_gadget_’ prefix (notice how I’ve named the ‘render_gadget_kbsearch’ UI page above). Second, you need to modify the ‘sections’ function below to include a line telling the script what the label of the widget will be, and the name of the UI page…minus the ‘render_gadget_’ part. The part of the script below that displays the KB search looks like this…’Knowledge Search’ : { ‘type’ : ‘kbsearch’ }.

Chances are that you’ll have more than one item to include in your widget at some point. You can do this by comma-separating the lines included in the ‘sections’ function below like this…

function sections() {
   return {
      'Priority 1 Incidents' : { 'type' : 'pri1incidents' },
      'Priority 1 Problems' : { 'type' : 'pri1problems' },
      'Emergency Changes' : { 'type' : 'emergencyChanges' },
      'Knowledge Search' : { 'type' : 'kbsearch' }
   };
}

‘Custom Widgets’ Widget
Name: Custom Widgets
Renderer Type: Javascript
Script:

function sections() {
   return {
      'Knowledge Search' : { 'type' : 'kbsearch' }
   };
}

function render() {
   var type = renderer.getPreferences().get("type");
   var gf = new GlideForm(renderer.getGC(), "render_gadget_" + type, 0);
   gf.setDirect(true);
   gf.setRenderProperties(renderer.getRenderProperties());
   return gf.getRenderedPage();
}

function getEditLink() {
   return "sys_ui_page.do?sysparm_query=name=render_gadget_" + renderer.getPreferences().get("type");
}

Once you’ve set up your UI page and Widget record correctly you can open up a homepage and click the ‘Add content’ link in the top-left corner of the page. You’ll see your widget category name, ‘Custom Widgets’ in the first box, followed by the name of your ‘Knowledge Search’ widget in the second box to add to a homepage.

The post Creating a Knowledge Search Homepage Widget appeared first on ServiceNow Guru.