Service Portal Features in Madrid: Updates, Enhancements & Mobile

As you may know, the newest addition to the ServiceNow family “Madrid” will be released sometime this year. In addition to a new interface, bug fixes, and enhancements, it's also expected to include several new updates to Service Portal. In this article, we will go over some of the changes to Service Portal as well as some of the new mobile features available in Madrid. New Service Portal Features Mobile App Defects & Enhancements by Product Highlighted Features SCSS Support in CSS Includes — By far the most exciting new feature in Service Portal is SASS support within CSS Includes. Up until now, SASS has only been available for use within the Page, Instance, and the Widget... but I would argue that the most relevant and needed place for SASS is within the CSS Includes on the theme. So, I'm very excited to finally have this feature supported in Service Portal, and it will certainly make it easier to develop turn-key themes for Service Portal. Multiple Catalog Support — Enables requesters to browse and search for items across multiple catalogs by adding these catalogs to the Catalogs related list when configuring a portal. This has been a long requested feature, but honestly... I'm not a fan of how it was implemented. It certainly checks the "multi-catalog support" checkbox, but in my opinion, this is not an intuitive implementation. Users of the portal don't know what a Service Catalog is, so how are they going to understand when and why to change catalogs. Multiple Knowledge Base Support — Enables users to browse and search for articles across multiple knowledge bases by adding these knowledge bases to the Knowledge Bases related list when configuring a portal. Similar to the multi-catalog support... it's nice to see this finally supported, but I don't think portal users really care to browse through multiple Knowledge Bases just to find an article. My Requests Page — Enable requesters to view open or closed requests, incidents, and tasks in Service Portal using the My Requests page. It's nice to finally see this page finally improved, and I like the support for combining both Tasks, Incidents & Requests, but it's also limited to just the 3 tables... it would have been nice if this called a Script Include so that additional tables could be added without cloning the widget. Request Cloning — Clone a submitted request by selecting multiple users in the Also request for list of the Additional Actions section. La Jolla Branding — Activates the latest ServiceNow branding, which includes WCAG-AA compliance for contrast. Not really much of a feature, but it does update the stock portal theme to reflect the new branding colors. Multifactor Authentication— Adds a two-step verification requirement in which users enter more than one set of credentials for authentication of an instance. This second layer of authorization is generated by a token from the user's mobile device using the Google Authentification mechanism as the token provider. Users can require multifactor authentication for their own login credentials. Administrators can require multifactor authentication for any user login credentials. Additional Reading: SCSS Support in CSS Includes Multiple Catalog Support Multiple Knowledge Base Support My Requests Page Request Cloning La Jolla Branding Multifactor Authentication Mobile App Although not Service Portal per se, perhaps one of the most exciting features of the Madrid release is the new mobile capabilities. The ServiceNow Agent mobile app is a native app for both iOS and Android, and by default lets users manage incidents, collaborate, respond to approval requests, access the knowledge base, and receive push notifications. But the most exciting feature is the ability to configure and write custom applications within the app. The mobile app is built on a hierarchy and you can have several applications for the mobile app and limit user access by roles. Each application contains folders to help separate applets. Applets are miniature applications that contain various screens with more information. Data items determine the information that appears in each applet. For example, an applet for My High Priority Incidents would have a data item that pulls information from the system to create a list of incidents that are only assigned to that user and have a priority of Critical or High. Additional Reading: ServiceNow Mobile Release Notes Mobile App ServiceNow Studio Mobile Configuration Defects & Enhancement by Product In addition to all the new features, the Madrid release includes well over 200 defect fixes for ServicePortal. Below I've highlighted just a few of the changes, broken down by product. Service Portal The activity log section overlaps the variables section after an upgrade Unable to edit fields with sp-editable-field (e.g. on user profile) in Service Portal due to REST error if mandatory fields are on the form Search page id=search doesn't refresh results while searching for a different term Date validation client script conflicts with built-in validation in Service Portal Translations of Service Portal translated_text fields are not captured in update sets Labels are not displayed for the checkbox on Service Portal Variables not cascading in Service Portal TinyMCE attached images are stored with the table name kb_social_qa_question in sys_attachment_list Setting for the date picker for the first day of the week is not working in Service Portal Scripted UI policies no longer work on Service Portal or mobile in London if 'Isolate Script' is true or for scoped apps Cannot create Standard Changes via the catalog on Service Portal Guided Tours Trying to create guided tours on the Service Portal sometimes fails with the error message "gtd_portal_title should ends with delimiter;" Service Catalog Catalog item count in SC Category page is not accurate when user criteria is used The Service Catalog Service Portal plugin must not be activated before the core Service Portal plugin Using catalog client scripts to set the value of a choice variable to boolean true or false does not work Help Information for a Variable in Service Portal — The Expand help for all questions field at the catalog item level and the "Always Expanded" field at the variable level are applicable in Service Portal. Portal Settings — Define the catalog item behavior in Service Portal using portal settings. Service Catalog Enhancements for Automated Test Framework — Write automated end-to-end tests for requester flows to validate the following for Service Catalog: Order guide in Service Portal, Multi-row variable sets of a catalog item in Service Portal and Variable editor in the Now Platform. Knowledge Management Knowledge articles created using article templates are not displayed correctly in Service Portal Facets for glide list field types — Configure facets for glide list field types on the Knowledge Service Portal search results page. Multi-language search facet — Select which languages to display your search results using the language facet in the Knowledge Walkup Experience — Use Agent Workspace to access and complete interactions at a walk-up queue location. Agent Workspace for Walk-up Experience provides a more efficient, integrated, and intuitive fulfiller experience. New to the Madrid release, the Walk-Up Experience includes: Agent Workspace for Walk-up Experience fulfillers Walk-up appointment scheduling Walk-up queue length notification Walk-up support when a queue is closed Tables Walk-up service channel Upgrade Changes Announcements — Announcements are active on new instances. Fonts — The Font Awesome library has been upgraded to version 4.7 and includes new icon names and syntax changes. Guided Tour Designer — With the Madrid release, you can also enable guided tours to run on Service Portal pages. Validation Script — Validate user input in a specific field type using a validation script. Overall, the Madrid release seems to be very promising with a nice mixture of changes, upgrades, and much-needed fixes. I am definitely looking forward to this release and all it entails. If you'd like to see the full list of the Madrid changes, check out the release notes here. If you know of some additional features in Service Portal not mentioned here, or if there is a feature that you're very excited about, please let me know in the comments below.

The GlideForm (g_form) API in Embedded Widgets

Ever wonder how to embed a Service Portal widget into a form and have it access fields in the parent form? GlideForm to the rescue! GlideForm is a client-side JavaScript API that provides methods to customize forms. Use the g_form object to access all of the GlideForm API methods. When using the Service Catalog variable types Macro or "Macro with Label", you can embed a Service Portal widget into the form. Within the client controller of the embedded widget you have access to both g_form and the field object by accessing them from the page object on $scope: $scope.page.field $scope.page.g_form FEATURES GlideForm supports over 50 different methods of accessing and manipulating form fields, in this quick tutorial, we will cover just a few of the most frequently used functions: getValue() setValue() getFieldNames() setVisible() setReadOnly() setMandatory() You can view the full list of supported g_form methods here. WALKTHROUGH To get started: Add a new variable with type “Macro” to a catalog item with a few existing variables From the “Type Specifications” tab, click on the Widget reference field picker and select “New” Name your widget and submit Navigate to “/sp_config/?id=widget_editor” and select your newly created widget Paste in the following code. HTML: [crayon-5c6a03d81a144338744911/] Client Script: [crayon-5c6a03d81a14e174118617/] Update the field names (FIELDNAME) in the HTML to match some fields from your form Now if you view the catalog item in the portal, you should see your widget embedded in the form displaying 5 buttons. DEMO   FURTHER READING https://docs.servicenow.com/bundle/london-application-development/page/app-store/dev_portal/API_reference/GlideForm/concept/c_GlideFormAPI.html

Secrets of the Simple List Widget

By now, you've probably already used the Simple List widget. It is one of the default widgets on the OOB portal homepage. Similar to the Data Table widget, it is used to display a list of records from a table. However, there is a lot more to this widget than you might think. In this post, we will cover some of the secrets of the simple list widget. To give you a quick sample of its capabilities, there is an OOB demo page available at: https://yourinstance.service-now.com/sp?id=test_list Features Include: Display records from any table and filter Support for image fields Show primary and multiple secondary fields Limit the height with scrollable body Trigger an event Customizable actions To get started, let's first create a widget which shows the payload of the event that get's triggered when clicking a record. HTML: [crayon-5c6a03d81c1c7716665826/] Client Script: [crayon-5c6a03d81c1db506801002/] Now if you place this widget on the same page as the Simple List widget, and if you don't specify a "Link to this page" in the Instance Options, you will see the JSON representing the record you clicked on. With this event, it'll be very easy to trigger a modal window or other user interaction, but for now let's proceed to adding some List Actions. LIST ACTIONS The Simple List widget supports adding additional actions for the records in the list. For some reason this related list is not visible on the form by default, so we'll need to add it: Pull up the Platform View of the Instance Record of the Simple List Click the hamburger icon > “Configure” > “Related Lists” Add "List Action -> Parent List" Now you should see the List Actions Related List When adding List Actions, you are able to include properties from the record in the URL field using double brackets: [crayon-5c6a03d81c1e9080952347/] However, there are a couple of unfortunate limitations: You cannot link to an external URL You cannot use URL prefixes such as “mailto:” or “tel:” Clicking a List Action does not trigger an event This limits the List Actions to just linking to other pages, but hopefully this will get fixed in an upcoming release. DEMO Here is a quick video demonstrating how to configure some List Actions on the Simple List widget. FURTHER READING https://docs.servicenow.com/bundle/london-servicenow-platform/page/build/service-portal/concept/simple-list-widget.html

Images and Update Sets – How to Sync Attachments on Widget Instances

It’s a pretty common requirement to include images in your widgets, for example replacing the icons with images in the “Icon Link” widget (available here). However, if you have ever added an image field to one of the instance tables, you may have noticed that the images were not included in the update set. This obviously makes it difficult to migrate the portal between instances. The good news is there is a simple solution. SYNCING ATTACHMENTS First, go to a record within the table where you would like to sync attachments (e.g. sp_instance_link) Right click the heading > Configure > Dictionary Select the record where “Type” is “Collection” Click the “Advanced View” related link Paste the following into the Attributes field: [crayon-5c6a03d81dbfc842622482/] When completed, it should look like this: Now, the next time you save or update the instance record, the image data will also get included in the update set. NOTE: If you wish to use the image field on all instance tables, you can create the field on the base “sp_instance” table. However, you will still need to follow the steps above for each one of the extension tables where the image field is used.

SCSS Variables in Service Portal

Learn how to streamline your stylesheets in Service Portal by utilizing the full power of SCSS. In this tutorial, I'll walk you through how to use CSS Variables in your widgets, so that they can be overridden in the Theme and Portal records. This is very useful when creating highly reusable widgets, themes or in situations where you have multiple portals sharing a theme. SCSS is a subset of the Syntactically Awesome StyleSheets (Sass) specification and is an extension of CSS. Every valid CSS stylesheet is valid SCSS. SCSS supports the following: Variables Variables are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you want to reuse. SCSS uses the $ symbol to make something a variable. Nesting SCSS lets you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Operators SCSS has a handful of standard math operators like +, -, *, /, and %. Mixins A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can pass in values to make your mixin more flexible. Functions SASS supports the use of functions by providing some keyword arguments, which are specified using normal CSS function syntax. Quick note: The order of CSS that is shown in the video is based on the Kingston release. In Jakarta, the Theme variables were loaded before the Portal variables. For further reading, check out the following resources: https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-portal/concept/scss-primer.html https://sass-lang.com/guide https://devhints.io/sass https://www.tutorialspoint.com/sass/index.htm

Service Portal Features of London

By now all of you should have noticed that you can request a personal developer instance of ServiceNow running the latest London release. Also with the new London release comes several new enhancements to the Service Portal. Here's a quick highlight of some of the new features: Faceted Search The Faceted Search widget replaces the Search Page widget and adds support for: Faceted Search Filters Pagination What's awesome: I love that the facets live as part of  the search source so that we can customize the facets as well as add custom facets to our search sources What could be improved: The whole search page is a giant widget including the typeahead search and the breadcrumbs. This makes it difficult to customize. What if we have a theme without breadcrumbs? What if I want to move the search? Having the whole page be one giant widget is just not a good idea. It does not improve the typeahead results which is how the majority of users use the search Virtual Agent Enable your users to interact with a chatbot or live agent through various Virtual Agent interfaces. What's awesome: Nice modern interface Integrates nicely with Connect Chat What could be improved: It's not free (requires additional licensing) Takes a really long time to load Guided Tours Create a guided tour for a Service Portal page to guide users through the content step by step. What's awesome: Supports auto launch Supports (limited) HTML Easy to use designer interface What could be improved: No support for page overlays (darkens the page behind the dialog) Dialogs don't stay fixed when the user scrolls the page Automated Test Framework Write automated tests to validate Service Portal forms. What's awesome: We now have support for automated tests in Service Portal What could be improved: So far it's just limited to forms and service catalog Validation Scripts Validate user input in a specific field type using a validation script. My thoughts: As far as I can tell, this validates field types and not tied to a specific table, also would not affect catalog items or record producers... so honestly, I'm not really sure when this would be useful. If you know of some common use-cases, I'd love to hear them in the comments.   For further reading, please see the official ServiceNow London Release Notes for Service Portal.

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.

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