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; }

New Service Portal Documentation Page

Great news! We just added a new Service Portal documentation section. This material was originally created by the Service Portal development team. However, the original documentation on GitHub has since been removed, so we have decided to pick up where they left off. Our goal is that the maintenance of this documentation will become a community effort. Check it out here: https://serviceportal.io/docs/

Changes to Service Portal in Jakarta

The latest iteration of ServiceNow - Jakarta - has arrived. With this new release, comes new enhancements, additions, and other improvements to the Service Portal. One of the major focuses of Jakarta was improving accessibility within the portal. New Features Knowledge Base Portal A brand new portal that brings all the features of Knowledge Management V3 plugin into Service Portal. Available through plugin: Knowledge Management - Service Portal plugin (com.snc.knowledge_serviceportal). User Criteria You now have more control over who can see pages, widget instances, and search sources. Previously you could only use roles to control access, now you can use powerful user criteria. Condition Builder The "Data table from URL definition" widget can produce an information table very quickly and now it's even more powerful. It now allows you to graphically build the conditions for the table. Contextual Search Use instance options on a search widget to configure search sources. Contextual Search - Inline Results Not to be confused with the above feature, this new widget will render search results inside any of your record producers for incident deflection. New Portal You can now create a new portal from the Service Portal configuration page. Portal System Properties Module added for setting Service Portal system properties. Page Draft Option Restrict page access to admins only by setting a page to "draft". Enhancements Shopping cart enhancements Users have a few additional options with the shopping cart: Clear all items Add a saved bundle to an open cart, or override the existing items in the cart with the saved bundle Catalog Variables All variable types (excluding ones using Jelly) are now supported in Service Portal, although the functionality may not be identical to the platform UI. List, form, and widget improvements TinyMCE HTML editor has been updated Control the number of approvals shown through an instance option Service Catalog related items are now in their own plugin called Service Portal - Service Catalog. This plugin is activated with the Service Portal for Enterprise Management plugin. Accessibility Improvements Many improvements to accessibility were made in congruence with WCAG 2.0 A standards: Many defects fixed High contrast theme to help with those that can't see low contrast colors Define a screen reader title on any container records Server Script API: getCatalogItem() The 'getCatalogItem(String itemID)' method was changed to 'getCatalogItem(String itemID, boolean isOrdering)' Client Script API: server.update() Now sends your URL query parameters automatically to the server

CSS Utility Classes in Service Portal

Included with Service Portal are a variety of different CSS utility classes loosely based on some of Bootstraps utility classes. For many of the classes below, you will see a format similar to: "m-t-lg", this stands for "margin top large". As I'm sure you can guess, there is also a classes for bottom, left, right, small (sm), medium (md), etc. and all the various combinations thereof.  This allows you to easily add consistent margins, padding, colors, etc. without creating custom styles within the widget. Here is a list we've compiled of some of the most common utility classes: Padding: wrapper, wrapper-xs, wrapper-sm, wrapper-md, wrapper-lg, wrapper-xl Horizontal Padding: padder, padder-xs, padder-md, padder-lg, padder-xl Vertical Padding: padder-v, padder-v-md, padder-v-lg, padder-v-xl Top Padding: padder-t, padding-top-s, padding-top-m, padding-top-lg, padder-t-lg, padder-t-xl Right Padding: pad-right Bottom Padding: padder-b-none, padder-b, padder-b-md, padder-b-lg, padder-b-xl Left Padding: N/A Top Margin: m-t, m-t-none, m-t-xxs, m-t-xs, m-t-sm, m-t-lg, m-t-xl, m-t-n-xs, m-t-n-lg Right Margin: m-r, m-r-none, m-r-xs, m-r-sm, m-r-lg, m-r-n Bottom Margin: m-b, m-b-none, m-b-xs, m-b-sm, m-b-lg, m-b-xl, m-b-n Left Margin: m-l, m-l-none, m-l-xs, m-l-sm, m-l-lg, m-l-n Text Color: text-muted, text-primary, text-success, text-info, text-warning, text-danger Background Color: bg-primary, bg-success, bg-info, bg-warning, bg-danger Float Elements pull-left - Floats an element to the left pull-right - Floats an element to the right Clearing Floats clearfix - Clears floats Display & Margin center-block - Sets an element to display:block with margin-right:auto and margin-left:auto Visibility show - Forces an element to be shown (display:block) hidden - Forces an element to be hidden (display:none) invisible - Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible sr-only - Hides an element to all devices except screen readers sr-only-focusable - Combine with "sr-only" to show the element again when it is focused (e.g. by a keyboard-only user) text-hide - Helps replace an element's text content with a background image close - Indicates a close icon caret - Indicates dropdown functionality (will reverse automatically in dropup menus) Hide visible-xs, visible-sm, visible-md, visible-lg Show hidden-xs, hidden-sm, hidden-md, hidden-lg For more details on CSS in Service Portal, you can check out the unofficial documentation on Github: https://github.com/service-portal/documentation/blob/master/documentation/css.md#page

New Features of Istanbul

Istanbul is the next release of ServiceNow and with it many new fixes and additions are being included for ServicePortal, including more than 200 bug fixes, localization improvements, and widget editor improvements. But the most exciting thing in Istanbul are some of the new Service Portal features: Search Sources The search has been greatly improved with the new "search sources" feature which adds greater flexibility and extensibility to the search widgets. A search source will describe the behavior and source data Ability to configure the behavior of search in portals without having to write, edit or clone any widgets SC Shopping Cart The shopping cart has been one of the most highly anticipated new features, and greatly enhances the shopping capabilities of the Service Catalog in Service Portal. Support for ordering quantities of items (where permitted) Adding ordered items to a cart (stored in the sc_cart table) Setting "Requested For" field and order details Ability to edit the variables of a cart item after it has been added to the cart Support for saved carts with the ability for later use Respects most Service Catalog properties Omit cart Omit quantity Catalog variable 2-column layouts This is another huge improvement over Helsinki, adding support for 2-column layouts for variables in Service Catalog. Improvements to the Widget Editor New hotkey bindings Dependencies are able to be viewed and edited alongside a widget Localization Improvements All strings have been translated Extended translation to the widget client script Use of ${My key} Widget Options Schema Improvements Declare parameters for widget Users can now have hints Default values are able to be provided Bug Fixes Istanbul also includes some notable bug fixes, including: The variables max_length being inconsistent with normal Catalog UI Certain $sp api's don't work in scoped applications Order guide variables don't cascade Cannot redirect to the correct location after login Help and Tooltips don't appear on forms Branding editor unable to load without a default portal specified Unable to hide "Label" variables in Service Catalog using UI Policy Actions Service catalog doesn't nest categories - page takes long time to show when there are a lot of categories Forms not displaying -- NONE -- in dependent choice list field Simple support for catalog item variable 2-column layouts  

Using Events to Communicate Between Widgets

Following the principle of “separation of concerns”, it is good practice for your portal or application to be made up of self contained functional components, also known as widgets in Service Portal. However sometimes these widgets need to communicate with one another. Thanks to Angular.js this can be accomplished through the use of $broadcast, $emit, and $on methods. $broadcast and $emit allow you to raise an event in your widget. The difference between $broadcast and $emit is that the former sends the event downwards from parent to child controllers, while $emit sends an event upwards from the current controller to all of its parent controllers. Both methods are available on $scope and $rootScope. You can subscribe to an event using the “$on” event handler. In this example we will create two widgets that interact using $broadcast and $on. Widget #1: Create two buttons that upon click, will $broadcast an event called "customEvent" and pass an object. HTML: [crayon-5a8a497acbd96157665033/] Client Script: [crayon-5a8a497acbd9f433845067/] Widget #2: Listen for the "customEvent" event, and when triggered, the callback function will update the text. HTML: [crayon-5a8a497acbda3313930182/] Client Script: [crayon-5a8a497acbda8371944389/] The final results should look like this:

Understanding Instances

Widget Instances are a vital component of Service Portal, and although at first glance they seem simple, they can be quite powerful when utilized correctly. In simple terms, the widget instance record stores the location of the widget (which column) and the context needed for it to render. The context of the widget is comprised of the fields on the instance table as well as the "Additional options" field in JSON format. The additional options get generated based on the fields defined in the "Options Schema" on the widget, documented here. Each widget defines which instance table it will use along with which fields from that table. To set the "table" and "fields" variables on the widget, you must open the widget record in the standard ServiceNow UI form. See the example below from the  "Icon Link" widget which uses the "sp_instance_link" table. The following is the out-of-box instance tables available: Instance (sp_instance) Base instance table with the following fields: color, css, glyph, short_description, size, title, url Instance of Carousel (sp_instance_carousel) Instance primarily used by the carousel widget, has a related list of slides Instance of Simple List (sp_instance_vlist) Used by list widgets such as "Simple List" and "Unordered List" and contain fields specific to setting Tables and Filters Instance with Link (sp_instance_link) Used for creating widgets that act as hyperlinks, e.g. "Icon Link", with fields such as URL and references to commonly used tables Instance with Menu (sp_instance_menu) This is the instance used by the Header Menu (referenced from the Portal), but can also be used for any widget displaying a menu. It has a "Menu Items" related list. Instance with Table (sp_instance_table) The instances behind the Data Table and Count widgets, with fields for setting the Table and Filter You can also create your own Widget Instance table by extending "sp_instance" and referencing the new table and fields in a widget. If the table referenced on the widget is changed, it will NOT automatically update the existing instances, so you will need to remove the old instances and generate the new instances via the Service Portal Designer. Once completed, you will now see your custom instance fields when you view the widget Instance Options (CTRL + Click > Instance Options).