Google Analytics in Service Portal

Google Analytics is a free web analytics service offered by Google that is used to track website activity and usage metrics. Google Analytics provides insights and data that can be used to create a better user experience for your employees coming to the Service Portal. There are many web analytics tools out there, including the new User Experience Analytics module from ServiceNow, but in this post, I will focus on Google Analytics. Features include: Traffic reporting Checks behavior flow Track conversion rates Reports website speed Traces sources of traffic There is an OOB "Site Analytics" widget included in Service Portal, however, I do not believe this widget is working in current releases of ServiceNow. Because of this, I've created my own version of the Site Analytics widget and I am providing it here free of charge.   Click above to download the update set. Once you've committed the update set, you'll need to embed the widget in your header or footer. [crayon-65f9666ef3e29081451936/] Remember to replace the tracking id with yours. Chrome Plugins When setting up Google Analytics in Service Portal, it's also very helpful to install some additional Chrome Plugins. The two plugins I recommend are: Page Analytics Official plugin by Google. Provides overlays on the portal with stats of views and clicks Google Analytics Debugger Provides debugging information in the console to see what information is being sent SEO Information One of the initial challenges when setting up Google Analytics with Service Portal is that many pages, such as the sc_cat_item page, do not use unique page titles or ways of distinguishing one catalog item from another. This can be solved by adding SEO information to the Service Portal pages. This primarily consists of adding dynamic meta tags and titles to the page record. This will make it easier for you to decipher which catalog items or knowledge articles are being viewed the most in Google Analytics. Above you can see a dynamic "description" meta tag is mapped to the "name" of the catalog item, based on the sys_id in the URL. Notes: This is using the original "Universal Analytics", not the latest "Google Analytics 4", which we may cover in an upcoming post. Employee Service Center has its own integration with Google Analytics. Further Reading Hopefully, this has been helpful. If you would like to dive a little bit deeper, you can check out the following resources: https://marketingplatform.google.com/about/analytics/ https://docs.servicenow.com/bundle/quebec-servicenow-platform/page/build/service-portal/concept/seo-sp.html https://pishchulin.medium.com/collecting-user-statistics-in-servicenow-360d9c324304

Top 5 Features in the Quebec Release

The highly anticipated Quebec release of ServiceNow is finally available for personal developer instances! I've been playing with it for a couple of weeks and there are a ton of new features and enhancements in this release. Watch the video to find out what my Top 5 are. Let me know in the comments below if you agree or if you feel there is a big feature that should have made the list! The official release notes can be found here: https://docs.servicenow.com/bundle/quebec-release-notes/page/release-notes/family-release-notes.html  

Top 5 Features in the Paris Release

This year’s Paris release is full of great new functionality and updates to the ServiceNow platform. Needless to say, there were a ton of features to cover, so instead of compiling an enormous list, I’ve put together this video of my personal top 5 features. I bet at least a couple of these will surprise you! Check out the video. Let me know in the comments below if you agree or if you feel there is a big feature that should have made the list. The official release notes can be found here: https://docs.servicenow.com/bundle/paris-release-notes/page/release-notes/family-release-notes.html

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!

Top 5 Features in the Orlando Release

This year's Orlando release is full of great new functionality and updates to the ServiceNow platform. Needless to say, there were a ton of features to cover, so instead of compiling an enormous list, I've put together this video of my personal top 5 features. I bet at least a couple of these will surprise you! Check out the video. Let me know in the comments below if you agree or if you feel there is a big feature that should have made the list. The official release notes can be found here: https://docs.servicenow.com/bundle/orlando-release-notes/page/release-notes/family-release-notes.html

Lodash in Service Portal

Lodash in Service Portal There are a number of client-side libraries included in Service Portal. We will be going over some of them in this next series, starting with the Lodash library. The version of Lodash that is included in the Service Portal is 4.17.11. Please keep in mind that Lodash is only available client-side, so you can use it in your Client Script, but not in your Server Script. About Lodash Lodash is a JavaScript library that helps programmers write more concise and maintainable JavaScript and contains tools to simplify programming with strings, numbers, arrays, functions, and objects. You can find the full documentation here: https://lodash.com/docs Lodash can be broken down into several main areas: Utilities - for simplifying common programming tasks such as determining type as well as simplifying math operations. Function - simplifying binding, decorating, constraining, throttling, debouncing, currying, and changing the pointer. String - conversion functions for performing basic string operations, such as trimming, converting to uppercase, camel case, etc. Array - creating, splitting, combining, modifying, and compressing Collection - iterating, sorting, filtering, splitting, and building Object - accessing, extending, merging, defaults, and transforming Seq - chaining, wrapping, filtering, and testing. Some examples Lodash contains hundreds of helper functions. Although I can't go through all of them here, I have put together some common examples. OBJECTS _.clone(value) Creates a shallow clone of value. [crayon-65f9666f00dd2562998368/] _.assign(object, [sources]) Assigns own enumerable string keyed properties of source objects to the destination object. Source objects are applied from left to right. Subsequent sources overwrite property assignments of previous sources. [crayon-65f9666f00ddb710896856/] ARRAYS _.times(n, [iteratee=_.identity]) Invokes the iteratee n times, returning an array of the results of each invocation. The iteratee is invoked with one argument; (index). [crayon-65f9666f00ddd515389581/] _.uniq(array) Creates a duplicate-free version of an array, using SameValueZero for equality comparisons, in which only the first occurrence of each element is kept. The order of result values is determined by the order they occur in the array. [crayon-65f9666f00ddf839068357/] FUNCTIONS _.bind(func, thisArg, [partials]) [crayon-65f9666f00de1782083198/] COLLECTION _.includes(collection, value, [fromIndex=0]) Checks if value is in collection. If collection is a string, it's checked for a substring of value, otherwise, SameValueZero is used for equality comparisons. If fromIndex is negative, it's used as the offset from the end of collection. [crayon-65f9666f00de3469822123/] _.filter(collection, [predicate=_.identity]) Iterates over elements of collection, returning an array of all elements predicate returns truthy for. The predicate is invoked with three arguments: (value, index|key, collection). [crayon-65f9666f00deb622754774/] _.find(collection, [predicate=_.identity], [fromIndex=0]) Iterates over elements of collection, returning the first element predicate returns truthy for. The predicate is invoked with three arguments: (value, index|key, collection). [crayon-65f9666f00dee579078705/] SEQ _.chain(value) Creates a Lodash wrapper instance that wraps value with explicit method chain sequences enabled. The result of such sequences must be unwrapped with _#value. [crayon-65f9666f00df0565688822/] _.sortBy(collection, [iteratees=[_.identity]]) Creates an array of elements, sorted in ascending order by the results of running each element in a collection thru each iteratee. This method performs a stable sort, that is, it preserves the original sort order of equal elements. The iteratees are invoked with one argument: (value). [crayon-65f9666f00df1475112645/] _.map(collection, [iteratee=_.identity]) Creates an array of values by running each element in collection thru iteratee. The iteratee is invoked with three arguments: (value, index|key, collection). [crayon-65f9666f00df4145044960/] Conclusion Although some Lodash methods are becoming native JavaScript functions with ES6, there are still many useful methods that complement functional programming in Service Portal. For more on Lodash, check out the website: https://lodash.com For a Lodash cheatsheet, check out: https://devhints.io/lodash What other Lodash methods do you find useful in Service Portal? Let me know in the comments.

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 Catalog Item Wizard in Service Portal

We've had a number of clients ask about structuring catalog item forms as more of a "wizard" that only renders one section at a time. After thinking about it for a while, I realized that I could use the GlideForm API to programmatically hide and show the different sections (containers). So over the past couple of weeks, I've been working on a new widget that simply interacts with the out-of-box catalog item widget, and uses the API's to add all of the wizard-like capabilities. I think it turned out pretty cool, it's fully themeable, and best of all, it does not require cloning of any widgets. I still have a few more features to add, and I'm also considering adding an accompanying library of Variable Sets that provide a more graphical UI than the out-of-box catalog variables. If all goes well, I may end up including the widget in our RocketFuel library of widgets, so if you're interested in adding some wizard-like capabilities to your portal, feel free to contact me and we can schedule a demo. I'd love to hear what you guys think in the comments below. Is this a useful widget? Does this improve the user experience of the service catalog item form?