Configuring Service Portal on ServiceNow for Enhanced User Experiences

ServiceNow Service Portal Roles to Improve User Experience

Introduction to Enterprise Self Service Portal:

End users are not interested in understanding the tool. They need a wonderful-looking, automated, easy-to-use and as-user-friendly-as-possible way to interact with any system. ServiceNow as a Platform allows developers to develop a rich and enhanced user experience for its users on the ServiceNow Platform.

The feature is called Service Portal. ServiceNow provides a default Service Portals for almost all popular applications like Customer Service Management, IT Service Management, HR Management GRC, etc.

Introduction to Service Portal Configuration (ServiceNow Customer Service Portal):

1. Go to your ServiceNow Instance and type Service Portal in the filter navigator

Service Portal > Service Portal Configuration

2. Click on Service Portal Configuration
3. The below screen will appear

1. Branding Editor: Click to go to branding editor. The branding editor provides a feature to edit branding information of the portal such as Portal Title, Logo, Tag Line, Background, text colors, and other theme-related configurations. You can navigate the Branding editor either from the top header bar or a tile given in the middle.
2. Designer: Opens a Service Portal Page designer with drag-and-drop functionality for page editing
3. Portals: Opens a service portal editor where a portal can be selected from a drop-down, and its properties can be changed
4. Pages(On Header)/ Page Editor(from tile): Allows a Page editor to change Service Portal Page properties. Such as page-specific CSS, Background info, Width style, background style, etc.
5. Widgets/ Widget Editor: Opens an editor where a service portal widget can be selected from a drop-down and edited
6. Portal Tables: When clicked, it shows all Service Portal-related tables. These tables store scripts or any supporting configurations to a service portal/ Pages/ Widgets.
7. New Portal: When clicked, this will open a form to create a new Service Portal Record from scratch.
8. Get Help: Redirects to Service Portal Documentation on ServiceNow Docs.

Configure a Portal:

Navigate to Service Portal > Portals and open an existing record to update or click a ‘New’ Button to create a new Portal from Scratch.

Fill out the Service Portal form with the required details. It will ask to enter the name of the Service Portal, a portal URL, a home page, a 404 page, a login page, a Main Menu field to add a header menu, a Theme, a logo field, KB Homepage, Catalog Homepage Quickstart config, etc.

Search for sources, Service Catalogs, and Knowledge Bases can be added from related lists of the portal records.

Configure a Page:

A Service Portal Page can be configured from a Page Editor to update Page properties or a Page Designer to edit page layout and widget placement.

Open Page in Page Editor/ Page Designer

1. From Related Link on the Page Record Or

2. Ctrl + Right Click on Portal Page and Select from the Drop-down

Configure a Widget:

A widget can be edited in native UI as a Form or from a widget editor. A widget context menu appears on the service portal when you click ‘Ctrl + Right Click.’ The widget context menu provides links to Instance Options, instance in Page Editor, Page in Designer, Show widget customization, Edit Container Background, Widget Option Schema, Widget Form Modal, Widget in Editor, Log to Console: $scope.data, Log to console: $scope.

Edit Widget in Native UI:  Go to Service Portal > Widget. Open an existing record or Click new. Fill in the necessary information like HTML Template, CSS, Client Controller, Server script, etc.

Edit Widget in Widget Editor:  Widget Editor can be opened from the Widget Context Menu on the portal. Or From a Related Link on the Widget form. Or SP Configuration portal as described above in the Introduction section.

You can refer to the widget developer guide on docs for more information on how the widget works and widget anatomy

Service Portal Development (Portal components in detail):

ServiceNow provides its solution for Portal and Portal Component design. Service Portal uses HTML, CSS, Angular JS, and Javascript. We’ll take a look at each design tool in detail.

• Service Portal Structure:

While designing and developing a Service Portal, keep in mind the below structure. This structure will help to understand what component should be updated/ configured and where it must be configured.

Portal :

• The Parent is the Portal. One can say a Service Portal Record in the Portals table
• The portal consists of One or Many pages
• A portal has a theme that applies to the whole portal
• There are search sources that define what all results should the portal search return
• It applies to tables in ServiceNow to provide the search results

Page :

• A Service Portal Page consists of one or many containers inside it
• Widgets are placed inside containers only
• A homepage is the first page where you land once you log in to the ServiceNow Service Portal
• A page can be reached via links provided on the widgets or menus
• Use Page Route Map wherever possible

Container :

• Widgets are placed inside containers
• A container can have child containers as well
• Each container can hold a maximum of one widget
• The widget arrangement on a page is based on the container design
• Each container can be divided up to a maximum of 12 compartments. Each compartment can then carry one widget
• However, as per portal aesthetics, the container’s minimum size should not go below 3

Widget:

• A widget is the core of the portal design. Portal, Page, and Container only provide the structure of how and where you can place or track a particular component. But it is the widget responsible for representing the information on the portal
• Widget is discussed in detail in the forthcoming topic of this blog

Technology components:

• Angular JS: On Rome, the platform Service portal uses Angular 4 and supports Angularjs 1.2.20 to 1.6.10
• HTML: Service Portal widgets are developed using HTML. ServiceNow also has some self-defined HTML tags. HTML is also used in Jelly Scripting for UI Pages and UI Macro design, Email Notifications, etc.
• CSS: ServiceNow service portal development supports using CSS and SCSS. It also supports up to Bootstrap 4.4.1.
• JavaScript: The ServiceNow platform, including Service Portal Development, supports using JavaScript as a scripting language for client-side (browser end) and server-side scripting.

Development Components:

Service Portal UI is wholly based on widgets. Portal pages and containers provide a placeholder for a widget. Inside the widget, all the scripting like HTML, CSS, Angular, and Javascript is done. A widget can be edited from the widget Editor. To open a widget editor, refer topic above as Introduction to Service Portal Configuration.

1. Widget Editor:

1. Server Script: When the widget loads for the first time. The script written in the Server Script section runs first. Server Script is responsible for making any of the CURD server operations using JavaScript. ServiceNow also provides APIs to make server-side scripting more useful and easier. For example,
   1. $sp.getParameter(<parameter_name>): this will fetch a value against a Parameter given in the URL. For example, if the URL string is “https://abc.service-now.com/sp?id=top_apps&app_id=ServiceNow” then using $sp.getParameter(‘app_id’) will give the result as ‘ServiceNow.’
   2. Some frequently used APIs are $sp.getWidget(<widget_id>, options), $sp.canReadRecord(GlideRecord_Object), $sp.getValue("sys_id"), $sp.getRecordValues(action,,),
2. Client controller: The client controller provides a space to write browser-side scripting using JavaScript. It helps initiate client-side events, make calls to server scripts based on events, and send or receive
   1. If any browser event tries to make a server-side call client controller allows to use server.update(), server.get() and server.refresh(). https://serviceportal.io/docs/documentation/widget_client_script.md
   2.  To broadcast an event and listen to it, you can use $rootScope.$broadcast('customEvent', object) and $rootScope.$on('customEvent', function(event,object) respectively.
   3. You can also use $emit in place of $broadcast to send the events. The difference between the two is $broadcast sends the event downward from parent to child, and $emit sends the event upward from child to all of its parents. https://serviceportal.io/using-events-communicate-widgets/
   4. Some commonly used Client controller APIs are spUtil.Recordwatch();
3. Body HTML template :  The UI Components that are visible on a page are designed using HTML. In the Body HTML template, you can write HTML as per the requirement and design. ServiceNow also provides some custom HTML tags for example <widget> <sn-record-picker>
4. CSS : The CSS section allows to add a styles to the elements in the widget.
5. Link: The link function is used for DOM Manipulation from a widget.  
6. Option schema: It is an optional widget component. Option schema is used to create variables such that a widget can be re-used. Admin users define instance options for a widget instance. 
7. Dependencies (templates or widget angular provider): Several pieces of code can be used in the widget by creating a relationship between a widget and the code. For example, a widget angular provider can provide additional functionality when added to dependencies. A CSS can be defined outside the widget and can be called and used in a widget.

Variables and Scopes used in the Service portal

1. Data: The data variable in the service portal widget is an object that holds the data populated from the Server Script. The same data is transferred to the browser end and can be accessed and represented via the Client Controller and Body HTML Template. When the widget first loads, the Server Script runs first and loads data into Data Variable.
2. Input: The input variable is populated with the same information held by the Data variable once the Server Script completes the loading. When a client event tries to call the server script, the data variable is cleared out (to get new information in the data variable from the server script), and the previous information can be accessed from the Input Variable.
3. Options: The options variable helps design the Option Schema of the widget. Providing options to a widget allows developers to re-use the widget just by providing some variable information. Provide variable values from instance options of the widget.
4. $Scope: As ServiceNow uses AngularJs in widget development, it uses the same concept of angular scopes. $Scope is a local scope of the widget and can be accessed within a widget only.
5. $rootScope: rootScope is a global scope, and variables defined in rootScope can be accessed globally.

Portal Advanced:

Concept of Cloning a widget or a page:

1. Any Service Portal page/widget can be cloned to make an exact copy of the existing page.
2. This feature is useful when we clone OOB Service Portal pages/widgets to add extra features to it.
3. ServiceNow recommends cloning the OOB pages/widgets if you want to make any changes.
4. If any page/widget is custom or customized from OOB and it lands into any issues, then ServiceNow doesn’t support such page/widget.

A Portal can be completed in a scope:

1. A Service Portal can be developed in a custom application scope. That’s why a Service Portal can be a part of a custom application and can be sold as a solution on ServiceNow Application Store.

Does service portal support domain separation?

1. Enterprise self service Portal does not support Domain Separation as of now. However the data represented on the portal will have an effect if the domain separation is implemented in the system. This means if a Service Portal URL is given to a user. Users can reach the portal and can see the portal, but the data will not be available if the logged-in user doesn’t belong to that domain. https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0686159

Quick Config Tips:

1. Avoid Cloning and customizing OOB Widgets all the time.
2. Most UI changes can be achieved using CSS. Try using the CSS section available at different levels such as Branding Editor CSS, Theme CSS, Page CSS, and CSS in a widget or Widget instances.
3. An Example CSS Trick could be as follows,
   1. Consider you want to apply a specific CSS Change to only a Container Row or Column
   2. To create a CSS Class under the Page CSS section
   3. Call the CSS class in the CSS field of the container/ Row/ Column
4. Try to use OOB and Standard features available with the Service Portal
   1. Example 1: Instead of Cloning and editing the standard ticket widget, go to Standard Ticket Configurations

2. Example 2: To enable/ disable the Agent Chat option on the service portal, go to Service Portal > Agent Chat. Open a specific record—Mark as active true or false

5. Use Page Route Map to avoid cloning and editing existing widgets containing hardcoded links to a specific page. Create a Route Map and define a new page where the users should land. For example, if some of your default OOB widgets take the user to an old ticket view after submitting a catalog item request, you want the users to land to a new Standard ticket view when they submit their request. So, in this case, instead of cloning a widget and making changes in scripting, you can specify the page route map to redirect users to a new desired page.
6. To explore more and practice widget creation, inter-widget communication, and learn more about Service Portal widgets, go to ServiceNow Developer Console and follow the guided example-1 - example-2.
7. A Service Portal follows a hierarchy for CSS to apply to elements and components. Styles are applied to elements with CSS of the highest precedence. Given is the hierarchy of CSS in ascending order of its preference/ precedence.

Branding CSS < Portal CSS <Theme CSS < CSS on Page < CSS on Container < CSS on widget instance < CSS in widget defined underclass < CSS in Widget defined in the element itself.

Latest Release:

The recent ServiceNow release version is San Diego. There aren’t any new features or changes happening from its previous version (Rome) to the current version (San Diego). You may face a change if your current version is Quebec or older.

Upgrading from Quebec to San Diego:

If your current version is Quebec and would be upgrading to San Diego, you’ll see below features added Complete Rome Release Notes - Combined release notes from Quebec to San Diego.

Features added to Rome Release:

1. A New Visible (Script) field is introduced in the Tab Configuration table in Standard ticket configurations. Write a script in this field to achieve dynamic tab visibility. Limitations of condition builders can be overcome using a script.
2. A Tab Type is added to the Tab Configuration form field called ‘Type.’ The Choice value is ‘Associated Requests.’ If a tab is created with the Associated Requests type, the standard ticket page shows a new tab with all the requests where the current request is a parent.

Features changed in Rome Release:

Announcement Banners:

Announcement banners are changed to new styles making it interactive, minimizing and maximizing features to multiple banners. Banners will show nicely till the screen is zoomed to 400%.

Date Picker:

The date picker on the portal is enhanced to use the keyboard to select the dates. Also, it remains intact till the screen is zoomed to 200%.

Jade Global is a ServiceNow Elite Partner specializing in implementing ServiceNow IT Service Management (ITSM) solutions, integrations, and building custom apps on the ServiceNow platform. Allow us to leverage our business and technical expertise to maximize your ServiceNow investment.

Upgrading from Rome to San Diego:

While upgrading from Rome to San Diego, there are no new service portal components, or a feature added. You’ll find the Service portal being leveraged from various applications to show data and improve the user experience. For example, in ITSM Application a provision to book and manage the walk-up appointments is provided via the self-service portal. In CSM Case case-related work orders can be viewed on the consumer service portal. See the release notes