Make Better Looking Dashboards with Content Blocks

[Adam Stout]

The discussion below is intended for any person building Dashboards.   No JavaScript or Performance Analytics experience is required.   A working knowledge of HTML is useful but not required.

Introduction

We often focus on getting important data to be displayed on a dashboard.   Of course, this is important but sometimes we need more than just Reports and Performance Analytics Widgets.   In this discussion, we will look at one of the many tools you have access to as part of the NOW Platform, Content Blocks, to improve the aesthetics and usability of your dashboards.

To create and modify Content Blocks, you will need the content_admin or admin role.

Here are a few things we will cover:

Use Case	Example
Section Headers On an Executive Dashboard with many different widgets, it is sometimes difficult to group related widgets together.   This can be addressed with Section Headers.
Dashboard Footer What should a user do if they have a question?   Add a standard footer with some quick links to request help via your Service Catalog.
In-Line Help When first deploying Performance Analytics users may be a little overwhelmed by all the information they can now see.   Adding some in-line help can help your user get familiar with how they can interact with what they are seeing and provide some more explanation of what they are seeing.
List of Links Drive users to take action by adding some links to commonly used items.   These can be internal or external to the instance.
Adding a KB Article Provide in-depth explanations of the indicators and the process behind them via Knowledge articles embedded in the Dashboard.

For the best user experience, be sure your content blocks are "responsive" [https://en.wikipedia.org/wiki/Responsive_web_design] and should be tested for export to PDF (especially the ones which will pull in resources external to the platform).

Use Case Walkthrough

Use Case: Section Headers

Adding Sections Headers gives a little more formatting to your dashboard and can be a nice way to help new users transition from consuming their data in slide decks to consuming it in ServiceNow.

1) Create a new *New Static HTML content block on your dashboard and click Click here to edit the new Content Block.

2) Use the WYSIWYG editor to create your header.

You can include images from the image library on your instance or you can attach the image to the content block itself which is useful to keep the block self-contained.   Try just cutting and pasting an image into the WYSIWG editor.   Here is more information on adding images to your Content Blocks.

If the editor adds extra spaces or "<p>" tags, you can edit the HTML directly via the "<>" icon or in the list view.

Here is an example of the HTML in this example:

<div style="text-align: center; width: 100%;"><img style="align: baseline;" src="/sys_attachment.do?sys_id=b9836d32db426a0066d8f4bbaf96199e"

alt="" width="595" height="90" align="baseline" /></div>

3) Click Submit and repeat the procedure for all the headers you need.   You could end up with a dashboard like this:

Use Case: Dashboard Footer

1) Create a new Static HTML content block on your dashboard and click Click here to edit the new Content Block.

2) Use the WYSIWYG editor to create your footer:

Here is the HTML for this example:

<p style="text-align: right;">
<span style="text-align: right;"><img src="/sys_attachment.do?sys_id=3911bf7813c8db0005ef54c32244b05b" />Questions about this dashboard? Contact </span><a style="text-align: right;" title="Operational Analytics" href="/com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=96c7fdc167132200e9b7808bd485ef49"
target="_blank">Operational Analytics</a></p>

3) Click Submit and we should be sent back to the dashboard with the Dashboard Footer now displayed like this:

Use Case: In-Line Help

1) Create a new Static HTML content block on your dashboard and click Click here to edit the new Content Block.

2) Use the WYSIWYG editor to create a small block of help for your users:

3) Click Submit and we should be sent back to the dashboard with the in-line help now displayed like this:

Use Case: List of Links

1) Create a new Static HTML content block on your dashboard and click Click here to edit the new Content Block.

2) Use the WYSIWYG editor to create a bulleted list of links you want to include:

3) Click Submit and we should be sent back to the dashboard with the links now displayed like this:

 

Use Case: Adding a KB Article

Some dashboards contain data that require a deeper explanation than just the report titles and series labels.     In these cases, I like to add a separate tab with a User Guide or F.A.Q. that includes a Knowledge Article.

1) Create a new *New Detail content block on the new and empty tab of your dashboard

2) Once the new block has been added, click on the link to Click here:

3) On the Detailed Content form, Name the Content Block (which will be displayed as the widget name on the Dashboard) and select the KB Article you want to include by browsing the Model document:

4) Click Submit and we should be redirected to the Dashboard that now looks like this:

This example works for non-versioned KB articles if you have KB Versioning enabled, see how to accomplish the same use case with a Scripted Detail Content Block here.

Conclusion

Dashboards are not limited to just Reports and Performance Analytics.   Dashboards are part of the NOW Platform and can include anything we have in the Platform.   Not just Static HTML and Knowledge Articles but Service Catalog Items and Custom UI pages as well.

Your Dashboards can't just display data, they must drive action.   Use all the tools at your disposal to make that happen.