The Vancouver release of ServiceNow is now available and comes with many new features and updates. In this video I'll walk you through some of my favorite new platform features and give you a closer look at the ServiceNow Vancouver release. At the end of the video, we'll also share some exciting events where you can find NewRocket this fall. If you think there is a platform feature that I should have included, I'd love to hear from you in the comments below.
UI Bootstrap in Service Portal
UI Bootstrap in Service Portal You may already be familiar with the $uibModal service in Service Portal, but did you know there is a whole library of useful directives and services available in UI Bootstrap? UI Bootstrap is a client-side library of Bootstrap components written in AngularJS and contains 20 directives that offer a consistent framework, responsive design, and cross-browser compatibility when developing in Service Portal. Although UI Bootstrap is considered feature-complete and is no longer being maintained, Service Portal currently includes UI Bootstrap version 1.1.2. Here are the UI Bootstrap directives. Accordion (ui.bootstrap.accordion) The accordion directive builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item’s header. Alert (ui.bootstrap.alert) This directive can be used both to generate alerts from static and dynamic model data (using the ng-repeat directive). Buttons (ui.bootstrap.buttons) With the buttons directive, we can make a group of buttons behave like a set of checkboxes (uib-btn-checkbox) or behave like a set of radio buttons (uib-btn-radio). Carousel (ui.bootstrap.carousel) Carousel creates a carousel similar to bootstrap’s image carousel. Collapse (ui.bootstrap.collapse) Resize window to less than 768 pixels to display mobile menu toggle button. Dateparser (ui.bootstrap.dateparser) The uibDateParser is what the uib-datepicker uses internally to parse the dates. You can use it standalone by injecting the uibDateParser service where you need it. Datepicker (ui.bootstrap.datepicker) The datepicker is flexible and fully customizable. You can navigate through days, months and years. Dropdown (ui.bootstrap.dropdown) Dropdown is a simple directive that will toggle a dropdown menu on click or programmatically. Modal (ui.bootstrap.modal) $uibModal is a service to create modal windows. Creating modals is straightforward: create a template and controller, and reference them when using $uibModal. Pager (ui.bootstrap.pager) A lightweight pager directive that is focused on providing previous/next paging functionality. Pagination (ui.bootstrap.pagination) A lightweight pagination directive that is focused on providing pagination & will take care of visualizing a pagination bar and enable/disable buttons correctly! Popover (ui.bootstrap.popover) A lightweight, extensible directive for fancy popover creation. The popover directive supports multiple placements, optional transition animation, and more. Position (ui.bootstrap.position) The $uibPosition service provides a set of DOM utilities used internally to absolute-position an element in relation to another element (tooltips, popovers, typeaheads etc…). Progressbar (ui.bootstrap.progressbar) A progress bar directive that is focused on providing feedback on the progress of a workflow or action. Rating (ui.bootstrap.rating) Rating directive that will take care of visualizing a star rating bar. Tabs (ui.bootstrap.tabs) AngularJS version of the tabs directive. Timepicker (ui.bootstrap.timepicker) A lightweight & configurable timepicker directive. Tooltip (ui.bootstrap.tooltip) A lightweight, extensible directive for fancy tooltip creation. The tooltip directive supports multiple placements, optional transition animation, and more. Typeahead (ui.bootstrap.typeahead) Typeahead is an AngularJS version of Bootstrap v2’s typeahead plugin. This directive can be used to quickly create elegant typeaheads with any form text input. Check out the full UI Bootstrap documentation here: https://angular-ui.github.io/bootstrap/ How have you used the UI Bootstrap directives in your Service Portal projects? Let me know in the comments below.
spUtil API Reference Cheat Sheet
Overview spUtil enables you to perform common functions in a Service Portal widget client script. You can access the methods by passing in spUtil as a parameter in your client-script function. Many of these methods have not been documented by ServiceNow, so we have combed through the source code once again to bring you another Service Portal cheatsheet! Save time and maximize your productivity with this quick reference document for you to use day-to-day. Enjoy!
GlideSPScriptable Cheat Sheet
Overview Did you know there are over 60 server-side methods available in GlideSPScriptable ($sp)? Many of these methods are hidden or not documented, so we've combed through all the widgets and source code to provide you with this cheat sheet that includes all of the $sp methods available in Service Portal. Now updated for the New York release. Save time and maximize your productivity with this quick reference document for you to use day-to-day. Enjoy!
Service Portal Features in New York
The New York release of ServiceNow is finally here and includes a number of useful features, enhancements, and bug fixes to the Service Portal. In this article, we will review some of the new features and larger changes. New Features Agent Chat Your users can initiate and maintain an Agent Chat conversation in any portal page. You can now also create a script to pass portal-specific data to Agent Chat. For example, pass the name of your knowledge base to a Virtual Agent conversation. To enable, simply install the "Agent Chat" plugin, and create a configuration through the "Service Portal > Agent Chat" module. Official documentation Search Analytics & Suggestions Generate relevant search suggestions for your users and monitor search analytics to understand what your users are searching for. When you enable Search Suggestions, suggestions appear automatically when users enter text into search fields in the Service Portal. Official documentation Text index groups Configure a text index group to make Service Portal search results more relevant to your end-users. The base system text index group includes the Catalog items, Knowledge, and Social Q&A Questions tables. Official documentation Antivirus Scanning support for attachments View the health status of file attachments in Service Portal. Antivirus Scanning scans files in the Attachments [sys_attachments] table by default. When viewed from a Service Portal page, attachments may not be available for download depending on their health status. Official documentation Reset Password Although not much of a feature, you can now enable your users to reset their password from the Login widget using the Password Reset application. When the user clicks "Forgot Password?", the system redirects the user to the page value specified in the "glide.security.password_reset.uri" system property. Official documentation Service Catalog Related Catalog Items & Knowledge Articles Configure related items and articles for a catalog item to provide additional information or alternatives. These articles and items are displayed in the catalog item page in Service Portal. Official documentation Knowledge Management Route Map The "kb_article" page now routes to the "kb_article_view" page which is part of the Knowledge Management Service Portal which includes a number of features such as feedback and versioning. Multi Knowledge Bases Configure which knowledge bases to display on the Knowledge Management Service Portal Article Comments User can now reply and like comments as well as add links, attachments, or images to comments. Official documentation Automated Test Framework Open Service Portal Page Open a portal page in the Automated Test Framework. When building automated tests, test designers must first open a page in a portal before testing UI components on the page. Official documentation The New York release seems to be very promising with a nice mixture of features, enhancements, and much-needed bug fixes (over 150+ that I've counted). I am definitely looking forward to this release and all it entails. Check out all the New York release notes here. If you know of some additional features in Service Portal not mentioned here, please let me know in the comments below.
Localization in Service Portal
As most companies experience globalization in some capacity, it’s important that they localize their portals to accommodate users from different areas around the world. In this article, I will go through the different components involved with localizing your Service Portal. Before we begin, make sure to activate the internationalization (i18n) plugin and the required language pack plugins that will be used by your organization. Also, there is an OOB widget called "Language Switch." Simply include this widget somewhere in the portal to enable users to update their language preferences. The two primary tables in ServiceNow responsible for storing translations for Service Portal are: Message Translated Text We will also cover some of the other tables and plugins that can potentially impact translating a portal. Message table (sys_ui_message) The UI message table contains translations using key/value pairs. The key is the string in the base language and the value is the localized version of that string. The main fields on this table are: Key: unique identifier of this message (usually the English version of the string). Language: language the message is translated into. Message: translated text that users see. In Service Portal, the primary area you would see UI Messages used is inside widgets (in the HTML, Client Controller, and Server Script), but can also be commonly found in other areas with server-side scripts (e.g. Scripted Menu Items, Script Includes, etc.). HTML Use the ${} syntax in widgets to tag strings for translation [crayon-66223fc2a5686303292055/] If translating a string stored in a variable, it is also possible to wrap a data binding {{}} with ${} to translate the contents of the variable. [crayon-66223fc2a5690999719306/] However, I do not recommend using this approach. It is much better to do the translations server-side whenever possible. Client Controller Similar to HTML, you can also use ${} in the controller if it's going to be displayed in the HTML [crayon-66223fc2a5693582964806/] Note: In some cases, the translation might have quotes or double quotes in it. That could lead to JavaScript errors if you are using the ${} syntax in the client script. The safest way to fetch a translated message is to do it in the server script. Another way, and perhaps better way to access translated strings in the controller is using the i18n service. [crayon-66223fc2a5694929011589/] In order to use the i18n service, you must also declare the variable in the HTML using the <now-message> syntax [crayon-66223fc2a5696433686571/] And then you can render the message in HTML using the {{}} syntax [crayon-66223fc2a5697077460737/] Server Script For all server-side translations, use the gs.getMessage() method [crayon-66223fc2a5698876092504/] It is also possible to format certain template strings by passing in an array of strings as the second parameter: [crayon-66223fc2a569a081933592/] This would return: "Welcome Nathan Firth – you have 5 active tickets." Demo To demonstrate the various ways of doing translations using the sys_ui_message, here is a quick screen capture of the Widget Editor showing the string translated and used four different ways in the same widget. The string in all four cases is "Hello World", and I'm translating it to say "Hello There". Click image to see full size Translated Text table (sys_translated_text) The Translated Text table stores translations for fields with the field type translated_text or translated_html. The main fields for this table are: Document: internal identifier of the record this translation applies to. Field name: field this translated text appears in, for example, Close notes. Language: language the text is translated into. Table Name: table this translation applies to. Value: translated text that the user sees. Some common areas in Service Portal using Translated Text fields include: Widget Instances (title, short_description) Catalog Categories (title, description) Menu Items (label) Knowledge Categories (label) Other translation tables Although the Message and Translated Text are the primary tables used in Service Portal, there are also a few others worth noting: Knowledge (kb_knowledge) if you've activated the "com.glideapp.knowledge.i18n2" plugin, you can also translate articles directly using the Knowledge tables. Choice (sys_choice) table contains translated text for options that appear in choice lists. Field Label (sys_documentation) table stores the text of table names along with the singular and plural labels for each field in the table. Session at K19 Manually extracting, translating, and importing strings is time-consuming and error-prone. We will be leading a CreatorCon session at Knowledge19 in Las Vegas where we will be presenting on internationalization and making recommendations on to make this process less painful. Stay tuned for more information about that session. Lastly... We're working on a brand new scoped application that will automate the extratction and importing of translations for Service Portal. If you are interested in seeing a demo or would be interested in this upcoming application, please don't hesitate to reach out.
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 various ticket types, including Incidents, Requests, and HR cases. The widget can be configured by using the "Service Catalog > My Requests Filter" module. 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-66223fc2a6881717238087/] Client Script: [crayon-66223fc2a6889053837412/] 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-66223fc2a76ad160581362/] Client Script: [crayon-66223fc2a76b5153804245/] 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-66223fc2a76b7238727516/] 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
Founder of 