Service Portal

This article is a supplement to the ServiceNow documentation. For full documentation please refer ServiceNow official website

Checkout our NEW Video Channel you can like and subscribe too!

Introduction

Service Portal is an interface for end users to access specific platform components The technology behind the service portal is Angular JS.Service portal is very responsive. We can access service portal from any devices (laptop, desktop, mobile, tablet). At a very high level Service Portal contains a group of pages linked by their page id.

Important to note

- Service portal we have reusable Content-Widgets
- Service Portal homepage can be accessed at to https://<instancename>.service-now.com/sp

Service portal Components

- Portals
- Pages
- Widgets
- Widget Instance

service portal for learnow lab (1).png

Portal URL

`https://<base instance URL>/<sp url suffix>?id=<page id>&<page parameters>`

Elements

- Base Instance URL: unique, secure web address for each instance. The default format is:  https://<instancename>.service-now.com.
- SP url suffix: Suffix established for the Service Portal
- Id: The id of the Page to navigate within the portal frame
- Page parameters: Some pages require additional parameters to lookup a record (table, sys_id)

Portal list view

service portal for learnow lab (2).png

Portal Page

service portal for learnow lab (3).png In the url of the portal we have id.

For example:

https://XXXX.service-now.com/sp?id=sc_category //here sc_category is nothing but a page

Go the service portal Configuration from the Service Now instance service portal for learnow lab (4).png

Click on the Portals service portal for learnow lab (6).png

Search the portal that we want to modify service portal for learnow lab (7).png

Select the Service Portal from the drop down service portal for learnow lab (8).png

Then select the Service Portal service portal for learnow lab (9).png

Then we can update the service portal details service portal for learnow lab (10).png

In this way we can update the portal

Service Portal form field

Title: The text to appear in the browser’s tab

URL suffix: the text string at the end of the instance URL used to access the Portal. Must be unique.

service portal for learnow lab (12).png

In the portal we can see as service portal for learnow lab (13).png

Important predefined pages

Home Page: The default portal home page.Also loads when a link anywhere in the portal is not specified.
  
Knowledge Base: Identify the knowledge base to display on knowledge bar page.
  
404 Page: Page to load when a specified page is not found.

Branding Editor

Use the Branding Editor to change the basic theme and styling of an existing portal to make it fit our own needs.

Branding for portal: Logo And Background Image

Left Navigation Bar > Service Portal > Service Portal Configuration
Click Branding Editor
Choose your logo and background image

UI Customizations

HOME PAGE SEARCH TEXT

Requirement is to add a slight white opacity background and some drop shadow to make the text stand out. Sometimes it makes sense to add some border radius to the search box too.

ADD CSS PROPERTIES

We can create a CSS stylesheet for a entire site. However if we are just altering one page, this quick method works.

Ctrl-Right click the Service Portal page
Select “Page in Designer”
In Page Designer, select the “Page” button in top-right corner
Add Page Specific CSS

Here is the CSS

/* Home Page Search Opacity Background */
#homepage-search > div {
    background-color: rgba(237,241,242, 0.5);
    border-radius: 8px;
}

/* Home Page Search Text Drop Shadow */
#homepage-search {
    text-shadow: -2px 2px 8px #03244d;
}

/* Search Box Width */
#homepage-search {
  padding: 50px 0px 50px 0px !important;
  margin: 20px 0px 25px 0px;
}

TRANSPARENT MENU BAR

Another cool idea is make the menu bar transparent. CSS can be like below

/* Transparent Menu Bar */
.navbar-inverse.navbar {
    background-color: transparent;
    border-bottom: 0px;
    position: absolute;
    width: 99%;
    z-index: 200;
}
/* Menu Item Background */
#sp-nav-bar {
    background-color: rgba(46, 46, 46, .80);
    border-radius: 0 0 0 8px;
    padding-right: 8px;
    margin-right: 0 !important;
}
div.ng-scope.hidden-xs.cbe98a8d2cb20020000f8d856634c9c63 {
    margin-top: -70px;
  	padding-top:150px;
}
/* Logo Background */
div.navbar-header {
  background-color: rgba(46, 46, 46, .80);
  border-radius: 0 0 8px 0;
}

MENU ITEMS - TOP MENU ADJUSTMENTS

Go to Left Navigation Bar > Service Portal > Menus
Click the one with SP Header Menu as the title
Deactivate the System Status Menu (Unless you are implementing Outage Management too)
I like to change the “Requests” menu to “Open Tickets”.
Add a Closed Tickets Menu item. Read this article: Closed Tickets Menu Item

TURN OFF CART AND WISHLIST

The cart and wishlist adds confusion. So turn it off most of the time.

Go to Left Navigation Bar > Service Portal > Menus
Click the one with SP Header Menu as the title
Adjust the Additional Options, JSON Format

{
	"enable_cart": {
		"displayValue": "false",
		"value": false
	},
      "enable_wishlist": {
        "displayValue": "false",
          "value": false
      }
}

Search source

Configure a basic search source to query data from an instance table or configure an advanced data fetch script to query data across multiple tables and data sources, or to pull data from anywhere on the web. service portal for learnow lab (16).png

Click on the search Sources and we can see all the search sources service portal for learnow lab (17).png

Also we can get search sources from the portal service portal for learnow lab (18).png

In the platform UI, navigate to Service Portal > Portals and select the portal we want to add search sources to.

From the Search Sources related list, click New to add a search source.

Define the fields on the Search Source form.

service portal for learnow lab (19).png

Configure Typeahead settings to allow search results to populate the search field based on user input.

Pages

Page is a place holder for all widgets. We can add the widgets in the pages then we can see the widgets in the service portal.A page is a collection of bootstrap containers rows and columns that contain widgets built using the Service Portal Designer.

Pages are referenced to other pages using their page id. One page can be used on multiple portals.we can reuse the page

Under the service portal we have pages service portal for learnow lab (21).png

Set up the page layout Use the Service Portal Designer to customize each page in your portal. Use the layout columns to define the structure of your page and the location of your widgets. Drag each container and row onto the pages. Drag widgets into corresponding rows.

Create a new page

Navigate to
```
Service Portal > Service Portal Configuration.
```
1. Click Designer.Switch to the portal you want to design pages for by selecting the portal name in the header.
2. From the Service Portal Designer, select a page to customize or click Add a new page.
3. Under Layouts, select Container and drag it onto the page.
4. Drag one of the other layouts and drop it in the container.
5. Use the filter to search for a widget, then drag the widget to the layout.
6. (Optional) Edit page properties
- Click Edit Page Properties.The page record from the Pages table [sp_page] opens.
- Edit the form
  1. Navigate from home page widget to a page
  2. First, we need to create the page where we want to navigate to.
  3. Open the homepage in designer.We need to need to add “Icon link” widget in the homepage.
  4. Click the edit button and add page created in step 1

CUSTOM FONT

SERVICE PORTAL - GOOGLE FONTS

Go to google fonts Go to Google Fonts
Select a font and url,select a font we want to use, after we select it, copy the url
Select theme
- Login into ServiceNow as an admin
- Go to ServiceNow > Portals
- Select your portal, usually the portal with URL suffix of sp
- Open your theme, usually “Stock
Add CSS include for CSS file url
- On the Theme Form, at the bottom click the CSS Includes Related List
- Click New
  - Name: your font name
  - Select Source: URL
  - Add your google Font URL like: Lobster
  - Order: 10
Right Click the header and select Save
Add CSS include and stylesheet
1. Go back to your Theme
2. Add a new CSS Include.
  - Name: Custom CSS
  - Source: Stylesheet
  - Order: 50
3. Right Click the header and select Save
4. Click the Magnifying glass on the stylesheet field
5. Click New
6. Give it a name, like “myCustom.css” or something more creative
7. Click Submit
Add CSS
1. Click the “info” button next to the stylesheet you created
2. Adjust the CSS and click save

BELOW IS SOME EXAMPLE CSS

  
  /* Change Homepage Header Font */
  #homepage-search > div > h1 {
    font-family: 'Lobster', sans-serif;
    font-weight: 400;
  }
  /* Change H2 Font */
  h2 {
    font-family: 'Lobster', sans-serif !important;
    font-weight: 400;
  }
  /* Change H3 Font */
  h3 {
    font-family: 'Lobster', sans-serif;
    font-weight: 400;
  }

SERVICE PORTAL: CUSTOM FONTS

Download font

 -TrueType | .ttf
 -OpenType | .otf
 -The Web Open Font Format | .woff
 -The Web Open Font Format | .woff2
 -SVG | .svg
 -Embedded OpenType Fonts | .eot

Once we have the font we want downloaded, we upload it to ServiceNow.

Upload fonts to ServiceNow
- Left Navigator Bar > Service Portal > Portals
- Click your Portal
- Click the information button next to the Theme Field. You are now looking the the Theme
- Click the paperclip attachment button
- Add your font
Note the attachment sys id
- For the attachment you just added. Click the [view] button next to it.
- Copy the sys_id in the URL
- Save the sys_id address to notepad or use your powerful mind to store it We will need this in the next step 6.
Add CSS include
- On the Theme Form, at the bottom click the CSS Includes Related List
- Click New
- Give it a name, like “Custom CSS” or something more creative
- Right Click the header and select Save
Add stylesheet
- From the CSS Include you created
- Click the Magnifying glass on the stylesheet field
- Click New
- Give it a name, like “Custom CSS” or something more creative
- Click Submit
```
  To recap at this point, we have created this stuff:
      * Font Attachment
      * CSS Include
      * Stylesheet
```
Add CSS
- Click the “info” button next to the stylesheet you created
- Adjust the CSS and click save

Below is some example css

We can name the font-face whatever you like. Personally, We name them the same as the font name.
We will need to change the font-face url with the Attachment sys_id from Step 3

@font-face {
   font-family:'savatage';
   src: url('/sys_attachment.do?sys_id=8ccbd5c04f620300f6c101f18110c716');
   font-weight: normal;
   font-style: normal;
}
/* Change Homepage Header Font */
#homepage-search > div > h1 {
  font-family:'savatage';
}
/* Change H2 Font */
div.panel-heading > h2 {
  font-family:'savatage';
}
/* Change H3 Font */
h3 {
  font-family:'savatage';
}

Sometimes you need to clear your cache (cache.do) to see your changes take effect

If the font wants to "download" instead of work, you may need to adjust the read ACL for sp_css and sp_theme to allow all users to see that.  Just add the role: public to those acls.

https://<YOUR INSTANCE>.service-now.com/sys_security_acl_list.do?sysparm_query=name%3Dsp_theme%5EORname%3Dsp_css%5Eoperation%3Dread

If you have trouble with the font wanting to download to the user's computer. Encode the font to base64 (there is helper software to do that on the internet), and add to the stylesheet.

Bootstrap colours Add some site colours
- Go to Service Portal > Service Portal Configuration
- Click Branding Editor
- Adjust Colors
Icon links Adjust the Icon Links, the links in the middle of the form
- Remove the Community Link
- Adjust the bootstrap colors, CTRL-Right Click, Instance Options
- Adjust the Templates, CTRL-Right Click, Template: Color Box
Bottom content Adjust the bottom content of the home page by using the Page Designer

VIRTUAL AGENT

Depending on licensing, you can install the virtual agent.

Install Plugin, Virtual Agent Portal Widgets
Page Designer > Add Virtual Agent Service Portal Widget
Read how to add an informational bubble next to the virtual agent: Virtual Agent Info Bubble

Content

YouTube Videos