ServiceNow: Creating a news ticker widget for Service Portal

This article describes how to create a simple horizontal scrolling marquee (news ticker) widget using CSS in the ServiceNow Service Portal. This solution implements the Pure CSS Ticker (Horizontal) into a widget for use in the Service Portal. The widget will display a text message scrolling from right to left and repeating infinitely.

Create a new widget

  1. Navigate to Service Portal > Service Portal Configuration and select Widget Editor.

  2. Click Create a new widget.

  3. Enter a Widget Name such as News Ticker (Horizontal). The Widget ID will auto-populate, although we won’t be using the ID for this simple widget.

    create new widget

  4. Click Submit

HTML

The HTML will be fairly simple, consisting of a couple of wrapper <div> elements and another <div> for the ticker itself.

<div class="marquee">
  <div class="ticker-wrap" ng-if="data.tickerText.length > 0" style="background-color: {{data.backgroundColor}};">
    <div class="ticker">
      <div class="ticker__item" style="color: {{data.fontColor}};">{{data.tickerText}}</div>
    </div>
  </div>
</div>

A few things to note here:

  • The ticker-wrap div is conditionally displayed when there is some text to display. The ticker text is stored as an instance option data.tickerText.
  • The font color is customizable via another instance option available via data.fontColor
  • The ticker background color is customizable via another instance option available via data.backgroundColor

These instance options will be defined shortly.

Client script

The client script does not require any changes, but make sure to keep the default script:

function() {
	/* widget controller */
	var c = this;
}

CSS

The CSS is mostly a copy/paste from the Pure CSS Ticker (Horizontal) with a few small changes. The key changes are:

  • Added CSS for the marquee class to set the min-height to 5px
  • Modified ticker-wrap class from fixed to relative positioning
* { box-sizing: border-box; }
$duration: 30s;

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.marquee {
  width: 100%;
  overflow: hidden;
  min-height: 5px;
}
.ticker-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 4rem;
  background-color: rgba(#000, 0.9); 
  padding-left: 100%;
  box-sizing: content-box;

  .ticker {
    display: inline-block;
    height: 4rem;
    line-height: 4rem;  
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;

    -webkit-animation-iteration-count: infinite; 
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
   -webkit-animation-name: ticker;
           animation-name: ticker;
    -webkit-animation-duration: $duration;
            animation-duration: $duration;

    &__item {
      display: inline-block;
      padding: 0 2rem;
      font-size: 2rem;
      color: white;   
    }
  }
}

Instance options

Define some instance options to store the ticker text, font color, and background color.

  1. From the menu select Edit option schema

    menu edit option schema

  2. Click the + button to add a new option

    add new schema option

  3. Set the Label as “Ticker Text”

    The Name field will auto-populate as ticker_text

    The Type should be left as type string

    ticker text option

  4. Repeat these steps to create another option for the ticker font color:

    • Label: Font Color
    • Name: font_color
    • Type: string
  5. And a third option for the ticker background color:

    • Label: Background Color
    • Name: background_color
    • Type: string
  6. Click Save to save the options

Server Script

In the Server Script all that we need is to copy the options into the data object and ensure they have a default value:

(function() {
  /* populate the 'data' object */
	data.tickerText = options.ticker_text || "";
	data.fontColor = options.font_color || "#ffffff";
	data.backgroundColor = options.background_color || "#000000";
})();

Save the widget.

Add Widget to Portal Page

I’ve added the widget to the index page within a container and single column row (12):

add widget to page

You may notice that when viewing the page, the ticker doesn’t expand to fill the entire width of the page:

widget not full width

Make the widget expand to fill page width

To make the ticker expand the entire page width, edit the container holding the widget:

container edit

Change the Width from “Fixed” to Fluid.

container width property

The ticker will still have a small amount of white space on either side. This is due to the default styling on the column class .col-md-12:

padding-left: 8px;
padding-right: 7px;

One method to fix this is to add a CSS class name to the column holding the widget, and then override the default css.

In the Page Designer, select the column containing the widget and then click the Edit button:

edit column

Give the column a CSS class such as tickerCol and click Save.

column class name

Now you need to add the CSS to the Theme. Navigate to Service Portal > Themes and select the relevant Theme for your Service Portal, for example Stock.

Scroll down to the CSS Include related list and view the related Style Sheet. If there is no style sheet you will need to create one.

Add the following CSS:

.tickerCol {
  padding-left: 0px !important;
  padding-right: 0px !important;
  min-height: 10px;
}

Refresh the portal and the ticker widget should now be the full page width:

ticker widget

Modify widget instance options

To modify the widget instance options, Ctrl + right click anywhere on the widget and select Instance options

widget instance options menu

Here you can edit the instance options for the ticker text, font color, and background color. The font color and background color can be set to any Hex or CSS color value:

edit instance options

ticker widget with different options