Unlocking Service Portal Widgets

How do you go from hacking a widget together to creating one that is maintainable, easy to understand and performant? You accomplish a lot with Service Portal widgets with a little knowledge of ServiceNow APIs and Angular.js, but too often widget client and server scripts become long and overly complicated. In this session, you will learn practical techniques to make your controller and server scripts more maintainable, flexible and powerful by embracing good coding practices, encapsulation, and decoupling. You can download the widgets used in this video here: https://serviceportal.io/downloads/k18-creatorcon-example-widgets/

Widgets and Demo Portal from our K18 Service Portal Sessions

Due to popular demand, here is a quick video highlighting the portal and some of the widgets we showed during our CreatorCon sessions at Knowledge18. We've made the following widgets and applications available for download: Gamification for Service Portal https://serviceportal.io/gamification-in-service-portal/ Unlocking Service Portal Widgets https://serviceportal.io/downloads/k18-creatorcon-example-widgets/ If you've found this content useful or if you have any special requests for upcoming posts, please let me know in the comments below.

Gamification in Service Portal (Knowledge18 CreatorCon)

Introduction Thanks for attending our Knowledge18 CreatorCon Session. During this session, NewRocket showcased a scoped Gamification application that is available to download free here:   NOTE It is required that your version of ServiceNow is running Jakarta or later. This scoped app is not supported on Istanbul or earlier. Components GamificationAPI (Script Include) - Contains the application logic Activities (Table) Badges (Table) Levels (Table) User Badges (Table) User Activities (Table) Gamer (Table) Gamification Points & Badges (Widget) Gamification Event Listener (Widget) Gamification Examples (Widget) Gamification (Page) Driver.js (Widget Dependency) GamificationDriver (UI Script) GamificationTourConfig (UI Script) GamificationDriver (CSS Include) Installation Install & commit the Update Set Navigate to your portal theme record (e.g. Stock) Inside the Header or Footer, embed the Gamification Event Listener widget using the folllowing code: <widget id="gamification-event-listener"></widget> Navigate to the gamification portal page (e.g. /sp?id=gamification) Click Award Points If all has been successful, you should be rewarded with 100 points Included Examples Feature Tour (using Driver.js Library) Social Q&A Configuration Includes "Gamification for Service Portal" Application Menu with the following Modules: Activities - The activities users complete to earn points Badges - Badges are earned based on accomplishments Gamers - An extension of sys_user, stores user points Levels - The levels users can obtain based on number of points To configure the Driver.js Feature Tour, edit the GamificationTourConfig UI Script. Corrections - (6/13/18) The GamificationAPI Script Include needs "Accessible from" set to "All application scopes" The documentation incorrectly lists the app prefix as "x_nero_gamificatio", however it should be "x_nero_gamificati" Additional documentation has been provided on the Gamification portal page (/sp?id=gamification). For more information on the Driver.js library, check out the docs here: https://kamranahmed.info/driver

The Road to Kingston: Order Guides (Part 3 of 3)

This is a 3 part series that will take a deeper look at the new Service Portal features found in the Kingston release. In case you missed part 1 or 2, checkout the link below. Part 1 - Announcements Part 2 - Route Maps Part 3 - Order Guides Link to official ServiceNow documentation Order Guides The new order guide widget provides a greatly improved user experience over the prior versions of the widget. Features Along with an improved UI, it also adds some new capabilities: Wizard like interface Support for attachments Removing catalog items from the request Installation The new order guide widget is enabled by default Instance Options Title This does not appear to do anything Bootstrap color This does not appear to do anything Compact Mode Displays only one tab at a time for better rendering on lower resolution devices Enable Show More/Less for Order Guide description on Mobile Enables the Show More or Show Less options for the description of the order guide or the associated catalog items in the mobile view. This enabled by default.

The Road to Kingston: Route Maps (Part 2 of 3)

This is a 3 part series that will take a deeper look at the new Service Portal features found in the Kingston release. In case you missed part 1, checkout the link below. Part 1 - Announcements Part 2 - Route Maps Part 3 - Order Guides Link to official ServiceNow Kingston Service Portal Release Notes Route Maps for Service Portal One of my favorite features in the Kingston release is the new Page Route Maps. Lets say you're working on a new custom portal, but you would like to leave the out-of-box portal intact. One of the custom pages of the new portal is a User Profile page, in the past you would've either renamed the out-of-box page ID, or used a new page ID and then updated any links found throughout the portal. The problem with this is that the links are sometimes hard-coded in the out-of-box widgets, that you would now have to clone just to change the URL. In Kingston this has been solved by simply creating a new Page Route Map. When to use Page Route Maps Cloning out-of-box pages Multiple portal environments with differing pages Restrict access to a page New Configuration Records The following configuration records have been added to ServiceNow to provide support for the new Page Route Maps feature: New Table Page Route Map [sp_page_route_map] New Module Page Route Maps [Service Portal > Page Route Maps] Creating a New Route Map Using our example from before, if we would like to link our portal to a new User Profile page without changing any of the existing links, all we have to do is: Navigate to Service Portal > Page Route Maps. Click New. Complete the form. In this example, the out-of-box page is called "user_profile", and our new page is "user_profile_2". With this new Route Map, any request at the original URL on a designated portal will render our new page. Before: After: Final Thoughts The Route Maps are a great addition to the Service Portal. Due to the Service Portal's modular nature, Page Route Maps finally complete the full circle of being able to quickly and easily change the page that is rendered without changing URL's. h5,h4 { margin-top: 24px; margin-bottom: 18px; } h4 { color: #3d89cc; } .aligncenter { text-align: center; } .entry-content { border-top: 1px solid #ddd; }

The Road to Kingston: Announcements (Part 1 of 3)

In this 3 part series, we'll take a deeper look into the new Service Portal features found in the ServiceNow Kingston release. Part 1 - Announcements Part 2 - Route Maps Part 3 - Order Guides Link to official ServiceNow Kingston Service Portal Release Notes Announcements for Service Portal One of the new features Kingston has to offer is the out-of-box support for announcements in Service Portal. No longer do you need to hack together your own implementation of a News Knowledge Base category to display within the Service Portal. The new Announcements feature gives you a extensive control over the look and feel of an announcement, as well as the content and routing for that announcement. In the rest of this article, we’ll go through the new configuration records for Announcements, as well as some of the cool configuration settings that are included. When To Use Announcements There are a number of use cases for announcements, such as informing employees of: A critical outage New employee health benefits information An upcoming planned maintenance window Feature Highlights Standard styles: Style announcements by creating custom style records where you can set the background color, foreground color, etc. Announcement window: Provide From and To date fields to determine the lifetime of an announcement Portal specific announcements: Select which portal you’d like the announcements to display on Configurable links: Add a link to an existing portal page or custom URL Configurable dismissal: Control whether users have the ability to dismiss the notification New Configuration Records The following configuration records have been added to ServiceNow to provide support for the new Announcements feature: New Tables Announcement [announcement] - Stores announcement information Announcement Style [announcement_style] - This table stores a few out-of-box styling configurations for the Announcements widget and allows users to create their own styles Announcement Consumer Type [announcement_consumer_type] - Stores the Consumer Type values of Banner and Widget Portal Announcements [m2m_announcement_portal] - Stores mapping between Announcement record and Portal record Dismissed Announcements [m2m_dismissed_announcement] - Stores mapping between User record and Announcement record New Module Announcements [Service Portal > Announcements] New Role announcement_admin - Maintain Service Portal Announcements including creating and deleting. Exploring The Announcement Form Most of the fields are self-explanatory but there are a few things worth mentioning: Type field: Contains a watchlist for Announcement Consumers. This is used to tell Service Portal where to render the announcement. Display style field: A reference to the Announcement Styles table, where you can define the look and feel of an announcement by creating or modifying existing styles. Click target field: This field is used to determine if the announcement is clickable, and if so where the user will be routed to. Options include a Service Portal Page record or a custom URL. Dismiss options field: Used to determine if a Service Portal user can dismiss the announcement. Portals related list: If there is no Portal record associated with the announcement, by default, the announcement will show on all portals. If a Portal record is provided, the announcement will only show on those Portals that have been specified. Consumer Types When it comes to displaying announcements in the Service Portal, administrators have 2 options. The first option is the Announcements banner feature and the second option is the new out-of-box Announcements widget, where you can define exactly where in a page the Announcement should be displayed. Given the nature of an announcement, this is generally what you’d like the user to see first, which is why it is included in the header for the Portal. The image below shows the 2 display options, which are references to the same Announcement record. Announcement Styles Looking to change the default blue announcement background to a color that matches your company’s color palette? This can easily be accomplished by creating a new Announcement Style record, which is where you can define the following configurations: Background color Foreground color (text color) Alignment (left aligned or center aligned text) Final Thoughts Although it’s a little frustrating that the Announcements feature cannot be modified since it’s injected behind the scenes before the header of the Service Portal, overall it’s a step in the right direction. The Announcement Styles and Portal related list on the Announcement record was a great architectural decision. What We Like Flexibility of Announcement styles Control over the display of an Announcement by the Portal related list on the Announcement record From and To fields for an easy-to-maintain announcement lifespan User dismissal options What Could Be Improved The Announcement banner is injected above the top of the page, so you have no control over the placement and limited options for styling The ability to provide an Angular template would have been a nice added feature h5,h4 { margin-top: 24px; margin-bottom: 18px; } h4 { color: #3d89cc; } .aligncenter { text-align: center; } .entry-content { border-top: 1px solid #ddd; }

SpaceRocket 404 Page for Service Portal

I'm always been a fan of creative 404 pages, especially when they include something interactive, like a game (hence the reason I developed the OOB breakout game). So when I saw ServiceNow post a 404 Page challenge, I thought this was the perfect opportunity to create a space/rocket themed 404 game. Given that I don't have a lot of free time, I pulled some of the game logic from a Github tutorial, and then spent the rest of the day integrating it into a Service Portal widget, and adding new functionality such as High Score tracking, and presenting it with some cool graphics. I think it turned out pretty cool for a quick weekend project. The game is live on our demo instance if you want to check it out: https://newrocketdemo1.service-now.com/$sp.do?id=spacerocket It's only been tested on Chrome, Safari, and iOS Safari... so if you find any bugs let me know. To submit your own 404 Page, or see some of the other submissions, head on over to the community: https://community.servicenow.com/message/1261738 Screenshots:

Free Widgets for Service Portal

We are excited to announce the launch of the free widget download page on ServicePortal.io. Since day 1, ServicePortal.io has existed to be a resources and source of inspiration for the ServiceNow Community. With the launch of the new widgets page, we can now share some of the most frequently requested widgets with all of our followers. Not all of them will be complex, many of the most frequently used widgets are pretty simple. Our goal is to develop and give away at least one new widget per month. We believe that collaboration is key to success for all of us in the ServiceNow Community. If you have any suggestions or comments about our widgets, please let us know. View Free Widgets Page

Announcing the Contextual Search Results Widget

UPDATE: Now with updated pricing! Available now in the ServiceNow app store! With the NewRocket Contextual Search Results Widget your company can achieve incident deflection in the Service Portal. As self-service users enter details about their issue, search results appear within the form, allowing the user to view relevant knowledge articles, catalog items, or social Q&A thread instead of submitting an incident. The result: less incidents submitted and more satisfied users. Key Features - Integrates with existing record producers - View search results while typing - View individual result items without navigating to a new page - Simple to configure to show relevant knowledge articles, pinned articles, social Q&A and/or catalog items https://www.youtube.com/watch?v=HodilTSd6rg Click here for more details and pricing information!