‘Use Service Portal to create a delightful experience for your users’ – this is the very first line in an article about Service Portal available in 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 completely true. I completely agree and I believe those who are working with and using Service Portal will agree with me.
Many people think Service Portal is an alternative to CMS and hence it’s going to replace CMS. YES, certainly Service Portal is 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 whereas CMS was mainly built for end users to submit request and check the status of their tickets.
Comfort – for both Users and Developers
The ServiceNow platform changes how people work, and 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 useful (easy to use and easy to perceive) functionalities through different types of computing devices starting from Desktop, laptop to hand held 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 clearer interface, which is key as far as end user experience is concern.
It’s been a huge 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 build in Service Portal. No more Jelly script needed for building portal!!!
- Unlike CMS which could be quite restrictive, the sky is the limit in terms of potential ways of implementing business requirements. It can interact with every component in the underlying ServiceNow platform and incorporate any UI technologies easily.
Possibilities – case studies
By building different widgets and with the help of CSS driven page layout Service Portal can be leveraged to present information and action for a user within a single page. You can lay down several widgets that are dedicated to display designated information in a much more autonomous manner. It’s like a multi-dimensional facet which gives you 360-degree view of your data, and you can pick different perspective and make decision effectively and efficiently with few mouse clicks – and most importantly, staying 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 a lot of the design and creative work that 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 in such way that the related information is grouped together and presented whenever the user wants to view.
There are top row widgets which are used to display top category information for the logged in user. Upon selection of the widget 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 as opposed to four tabs when ‘My Activities’ is selected.
Widgets we deployed include:
- The Filter widget which 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 saving 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 it lists first few records for big list with the ability to let user load more data whenever needed. It has sort options and sort criteria dropdown box to sort the list as required.
- The detail widget present detailed information about the selected record along with related records in tabular fashion. You can also perform different activities like attaching an attachment, creating a duplicate record, sending email or inserting a comment. You can also turn a switch on or click a button to view further information related to the record if you need. For example, you can view list of approvers for the record or you can turn on ‘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 processes for closing the month. This is like the Procure to Pay app but even more complex in terms of 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 one time.
We also incorporated different graph libraries to present data in different fashions – for example vertical lists and detailed forms on the one page.
Final comments
This is not our intention to review these two portals, and 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 that 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 time to market.
A word of warning – what is needed is proper planning, where planning should be completely aligned with business need and expectation. Importantly you need a good layout designer that depicts the plan and verifies whether the need and expectations are met. Attention to details (e.g. font color, font size, positioning etc) is very important in this kind of project as your ultimate objective is to give user a delightful experience.
Best of luck, and feel free to reach out if you have any questions.