ServicePortal tips and tricks

ServicePortal tips and tricks

What is the ServicePortal?

The Service Portal is now 6 versions in with Madrid and 7 versions with New York and has been introduced into many other parts of ServiceNow: Original Release Notes (Helsinki).

Service Portal introduced mobile first design leveraging Twitter Bootstrap and Angular.js (1.5 Series). The new system relies on Angular to deliver a "single-page" application and a framework for editing the page layout, menu, and content blocks (widgets).

One of the main benefits of the Service Portal is removing the dependency on Jelly for server side scripting, and the introduction of modular components (widgets) with isolated/independent functionality (scope).

Technical Details

For those that are interested in the technical details, they are listed below. It will be interesting to see where ServiceNow takes future versions of the Service Portal. Angular was built and backed by Google as a Javascript responsive framework and introduced new concepts like two-way data binding. Two-way data binding makes it much quicker and easier to create things like data driven tables that react to the linked Javascript data set.

Since Angular's release, it has gone through major revisions and 2.0 introduced a completely different breaking change.

1. Angular Version: 1.5.11

ae1a57_77a4d44f99504b87ae6c8aa0b53207b4_mv2

2. Bootstrap Version: 3.3.7

Differences from Core Platform

The core platform of ServiceNow and the older Content Management System use Jelly, which is a server side pre-processing engine. It's probably easiest to refer to the ServiceNow documentation around this topic: Content Management and the Apache Jelly engine

To summarize though, it uses XML, HTML, embedded blocks of Javascript, and two phases of processing. ServiceNow extended the Apache Jelly functionality to accomplish everything they needed it to do.

Before the Service Portal:

ae1a57_d429faacfd0a471484e50deadd5db89f_mv2

It's very powerful, but can be confusing and difficult to debug. This is still the technology used if you want to create a UI Page (custom page) in the core platform.

Benefits of Service Portal

The ServicePortal introduces a more robust framework for building custom pages and functionality.

  1. Fully contained data handling model and clean editor interface for customization.
  2. The Server code section gives you access to standard GlideRecord queries.
  3. The Client Script gives the ability to trigger updates which re-run the server code with the given inputs. This can update records, refresh the data set, or nearly an unlimited array of choices.
  4. Widget Cloning
  5. Core system prior to scoped applications allowed modification to existing records and any "cloning" was manual, and up to the Administrator.
  6. Widget cloning allows a persistent reference back to the "OOB" (Out-of-box) version. You can always go back and see the original functionality.
  7. Cleaner layout editor through the Page Designer with a simple Bootstrap container and grid system.
  8. Live preview theme changes allowing you to easily set your primary, secondary and supporting colors as well as your logo and banner image (if desired).

Branding, Design, and Layout

One of the first steps with setting up your Service Portal is applying your branding, colors and design. You may also choose to adjust the page layouts.

Branding Editor

To access the branding editor, go to the "Service Portal" menu and click on "Service Portal Configuration". This opens up the configuration application and a home screen with tiled options. Click on the "Branding Editor" to begin.

ae1a57_fcdcd6c8bce441869f518114815c1177_mv2

From within the branding editor you can adjust the basics including company logo, banner image, title text and primary/secondary theme colors.

ae1a57_2b48e8d9f56042709435490aa9a841d0_mv2

Page Designer

The Page Designer allows you to adjust the containers (content areas). You can easily add a 12 column section (full width) or a multiple column layout:

ae1a57_0a2ba923cfa74c9ca0f038c4f28ce698_mv2

Functional Changes & Menu

From the portal definition record, you can see specify things like the homepage for this portal, and the Header, Footer and Menu:

ae1a57_784b896914644499aa6240256dca9226_mv2

If you go into the "Main menu" record, which in our case is a copy of the stock menu, you can see all the related navigational items that are displayed at the top of your portal.

Easily disable particular menu items you're not ready to use by setting the "Menu Item" to inactive. Or go into the menu item to adjust the menu behavior or add/remove sub-menu items.

ae1a57_b8c5b47aa6e34630ae015a4469d79114_mv2

This really just scratches the surface of what you can do in the Service Portal. Many of the new applications within ServiceNow are based on or utilize the Service Portal technology.