‘Use Service Portal to create a delightful experience for your users’ – this is the first line in an article about Service Portal available in the ServiceNow Product Documentation portal. Starting from Geneva, I have customized and built several portals and dashboards in Service Portal, and my experiences say the above line is entirely accurate. I completely agree and believe those working with and using Service Portal will agree.
Many people think Service Portal is an alternative to CMS so it will replace CMS. Yes, Service Portal is certainly replacing CMS, but that’s not the only thing we should think of about Service Portal. It could be as powerful as to become an effective alternative to ServiceNow Standard UI for many users and roles. In contrast, CMS was mainly built for end users to submit requests and check the status of their tickets.
Enhancing user and Developer experience with ServiceNow Service Portal
The ServiceNow platform changes how people work, and Service Portal, enhancing user experience with ServiceNow Service Portal, will change how people interact with data and the tool. With the help of Twitter Bootstrap, AnguarJS, HTML5, and SCSS Service Portal is ready to provide ultimate, ubiquitous, and valuable (easy to use and easy to perceive) functionalities through different types of computing devices, starting from Desktop laptops to handheld devices.
Service Portal can eliminate “noise” for the logged-in user by presenting data the user wants and needs to view and interact with. This delivers a more straightforward interface, which is critical as far as end-user experience is concerned.
It’s been a massive relief for the developers as well for two main reasons:
- Compared to building or customizing a portal in CMS, it’s way more comfortable and easier to configure and make in Service Portal. No more Jelly script is needed for building the portal!!!
- Unlike CMS, which could be quite restrictive, the sky is the limit regarding potential ways of implementing business requirements. It can easily interact with every component in the underlying ServiceNow platform and incorporate UI technologies.
Case Studies: Customizing Widgets in Service Portal for Enhanced User Experiences
Customizing widgets in Service Portal allows the creation of diverse elements using a CSS-driven page layout. Leverage this capability to present user-centric information and actions within a single page. You can lay down several widgets dedicated to displaying designated information in a much more autonomous manner. It’s like a multi-dimensional facet that gives you a 360-degree view of your data, and you can pick different perspectives and make decisions effectively and efficiently with few mouse clicks – and, most importantly, stay on the same page.
I am going to share 2 case studies that support the claims so far we have made in this article. Many thanks to our good friends at Cask LLC, who bought us in and did much of the design and creative work we built on this project.
Case study 1: Procure to Pay portal
We’ve recently deployed a project for a finance department at a large customer, managing the Procure to Pay process entirely through a Service Portal front end. The entry page was designed so the related information is grouped and presented whenever the user wants to view it.
There are top-row widgets that are used to display top-category information for the logged-in user. Upon selecting the device in the top row, there are dynamic tabs below, which are populated and provide further categorized information. The number of tabs depends on the top-row widget selection. For example, when you click on My Approvals widget, it gives you only two tabs instead of four when ‘My Activities’ is selected.
Widgets we deployed include:
- The Filter widget dynamically displays saved or default filters for the selected category and logged-in user. Users can edit the filter on the fly to filter the data instantly without holding it for future use.
- The Vertical List widget displays the list of items/records with summary information based on the selected top row widget (main category), selected tab (sub-category), and filters. This vertical list can also be paginated, so instead of showing all records at a time, and it lists the first few records for an extensive inventory with the ability to let the user load more data whenever needed. It has sort options and sort criteria dropdown box to sort the list as required.
- The detail widget presents detailed information about the selected record and related records in a tabular fashion. You can also perform different activities like attaching an attachment, creating a duplicate record, sending an email, or inserting a comment. You can also turn a switch on or click a button to view further information related to the record. For example, you can view the list of approvers for the record or turn on the ‘View cost allocation’ switch button to view further information.
Case Study 2: Financial Close Management Dashboard
This project focused on helping the Finance department manage the month’s closing processes. This is like the Procure to Pay app but is even more complex regarding transactions and functionalities.
This Close Management Dashboard introduced a carousel to display more widgets within the same page – while there are seven widgets, only 3 are displayed at any time.
We also incorporated different graph libraries to present data in different fashions – for example, vertical lists and detailed forms on one page.
We do not intend to review these two portals; there’s only so much we can show in a blog post. But I wanted to showcase the possibilities and potentials of Service Portal that we can harvest out of Service Portal capabilities as per our need.
The beauty of Service Portal is reusability – whatever you develop can be reused for other portals. It could be a Style Sheet, Widget, Header, Footer, Theme, or any other dependencies (APIs, Angular Services, Directives, etc). They can potentially be reused. This reduces the time to market.
A word of warning – what is needed is proper planning, where planning should be completely aligned with business needs and expectations. Importantly it would be best to have a good layout designer that depicts the plan and verifies whether the demand and expectations are met. Attention to detail (e.g., font color, font size, positioning, etc.) is significant in this project, as your ultimate objective is to give the user a delightful experience.
Best of luck, and feel free to reach out if you have any questions.