Creating a Sidebar Menu Widget for Employee Center

In this video I'll show you how to create a sidebar menu widget for Employee Center in ServiceNow. As usual, I love to start by showing the art of the possible, and then I'll walk you through a basic implementation of the sidebar widget and explain the components needed to make it work. Keep in mind, this tutorial focuses on how to create the sidebar, but not the menu itself as that widget is much more complex. I've packaged up everything into an Update Set that you can download below. Download Update Set If you're interested in having an Employee Center portal professionally designed and implemented, please don't hesitate to reach out. Contact Me

Employee Center

Last week I had the privilege of having ServiceNow Product Manager, Matt Metten, visit the San Diego office and talk about Employee Center and some of the new features introduced with the Rome release. Learn more about the capabilities of ServiceNow's Employee Center and Employee Center Pro in my latest video! Additional resources: Benefits of Employee Center Employee Center release notes Employee Center Pro and Employee Center with HR Service Delivery

Creating Custom Components

Last week I invited ServiceNow engineer, Darren Richards, to host a dev talk about creating custom components using the Now Experience UI Framework. If you’re interested in creating custom components, understanding ServiceNow’s Now Experience UI Framework, also sometimes known as Seismic, be sure to check out the video and let me know your thoughts below! Additional resources: Now Experience UI Framework Now Experience UI Builder Fundamentals Create Pages in UI Builder Build My First Now Experience UI Framework Custom Component UI Builder - Theming  

How to Use GraphQL in ServiceNow & Service Portal

Overview GraphQL is an open-source data query and manipulation language for APIs. GraphQL offers many benefits over REST API's, including: Fetching data across multiple sources from a single API call Returns only the data that is requested Supports validation and type checking Autogenerating API documentation In this video, I'll show you how to construct a sample GraphQL query to fetch data in ServiceNow and then how we can use GraphQL inside of a ServicePortal widget. GraphiQL To start, I would recommend you download GraphiQL, a GUI for editing and testing GraphQL queries and mutations. You can download it here: https://www.electronjs.org/apps/graphiql The GraphQL Endpoint is: https://instance-name.service-now.com/api/now/graphql Documentation In order to use the documentation and auto-completion, you'll need to enable the glide.graphql.introspection_enabled system property. Service Portal Widget You can download the widget update set here: It's compressed as a ZIP file, so remember to uncompress before uploading. Example GraphQL Query [crayon-65f901aa0726a866920094/] Further Reading https://graphql.org/ https://www.howtographql.com/ https://docs.servicenow.com/bundle/paris-application-development/page/integrate/graphql/concept/scripted-graph-ql.html If you have any questions or comments, please don't hesitate to comment 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.

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-65f901aa0ed19102131226/] _.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-65f901aa0ed23123527077/] 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-65f901aa0ed25780353066/] _.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-65f901aa0ed27330479856/] FUNCTIONS _.bind(func, thisArg, [partials]) [crayon-65f901aa0ed28452510440/] 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-65f901aa0ed2a883352542/] _.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-65f901aa0ed34332016157/] _.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-65f901aa0ed36329197694/] 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-65f901aa0ed38172935890/] _.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-65f901aa0ed3a653191119/] _.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-65f901aa0ed3c751438633/] 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.

Restyling Notifications in Service Portal

Today I am going to show you how to change the styling of the built-in notifications in Service Portal. The default notifications in Service Portal are based on the Bootstrap Alerts components, but I prefer the smaller "Toast" notifications of Bootstrap 4. Default   New Style         The following CSS sets a new width and aligns the notifications in the upper right corner of the screen rather than spanning the whole page. You will need to add the following styles into a CSS Include in your theme. CSS [crayon-65f901aa10a35747904211/] If you are already on the Madrid release, I recommend replacing the above HEX colors with the $brand-success and $brand-danger variables so that they can be driven by the variables defined on your theme. If you wish to trigger notifications from your own widget, you can trigger notifications using either of the following. Server Side: gs.addInfoMessage("Success goes here"); gs.addErrorMessage("Error goes here"); Controller: spUtil.addInfoMessage("Success goes here"); spUtil.addErrorMessage("Error goes here");   BEFORE AFTER This is just a small example of how you can restyle the default notifications, but there is still plenty of ways this could be improved. If you have some ideas or other styles that you would like to share, feel free to post them 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-65f901aa13dc4561132387/] 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-65f901aa13dce828995912/] 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-65f901aa13dd0665196292/] 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-65f901aa13dd2563894163/] In order to use the i18n service, you must also declare the variable in the HTML using the <now-message> syntax [crayon-65f901aa13dd3895015482/] And then you can render the message in HTML using the {{}} syntax [crayon-65f901aa13dd5590658488/] Server Script For all server-side translations, use the gs.getMessage() method [crayon-65f901aa13dd6751614100/] It is also possible to format certain template strings by passing in an array of strings as the second parameter: [crayon-65f901aa13dd8511591928/] 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.

How to Stay “Out of Box” with your Service Portal

WHAT IS "OUT OF BOX" One of the most common requests we hear when developing a portal is, "stay close to out-of-box". People usually think this means staying close to the look and feel of the Stock theme, in hopes that it will minimize complications with future upgrades. This common misconception has very little to do with the portal theme, and everything to do with how many and which widgets were cloned. Staying out-of-box has nothing to do with the theming, look or feel of the portal, but how many of the widgets were cloned. The real danger of “stay close to out-of-box” is that it leaves little-to-no room for: Adhering to company required branding guidelines Delivering a delightful user experience Meeting business requirements So how do you stay close to out-of-box and ensure a smooth upgrade process without sacrificing the look, feel and functionality of the portal? In this article, we'll outline various approaches to help you deliver a portal without sacrificing the user experience. WHAT NOT TO CLONE Before we talk about what you can safely change, let’s talk about what you shouldn’t change. Changing a ServiceNow widget involves cloning it. When you clone a widget, you become responsible for ensuring your widget continues to function as expected after a ServiceNow upgrade. If a widget with complex logic is cloned and you want to align it with the recent upgrade, you may need to analyze both original and cloned widgets line-by-line to determine what changed and to ensure nothing has stopped working. We know from experience that some widgets tend to change quite often, even within patches and hot fixes! For that reason, we recommend that you avoid cloning any widget with complex logic. Some examples include: Shopping cart Catalog item Approvals Order guide Data table Form Before you clone a widget, consider the additional effort it will require to maintain the widget with each upgrade. In many cases, with a little creativity, it is possible to meet business or branding requirements without cloning. WAYS TO AVOID CLONING A WIDGET We’ve found quite a few ways to avoid cloning while still meeting requirements. Here are some suggestions in a rough order of difficulty. INSTANCE OPTIONS Many widgets already have instance options for configuring the behavior and look of the widget. You can access the options by pressing CTRL + Click on the widget and selecting "Instance Options.” CSS Making changes to CSS outside of a widget will have minimal impact on your ability to upgrade. Same thing applies to your layout. With this in mind, don't be afraid to style and theme your portal to make it more attractive and "on brand." WRAPPING/EMBEDDING WIDGETS In some cases, you just need to augment or slightly modify the behavior of a widget. By embedding a standard widget in a custom one, you take advantage of the standard functionality while gaining the control you need. This is useful, for example, when you need finer control over the instance options that are passed to the standard widget or when you need to adapt URL parameters or events. DIRECTIVES From Angular.js documentation: “At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.” In simpler terms, a directive could allow you to attach behavior to DOM elements inside a widget you don’t “own.” This is an extremely powerful way to adapt widgets without cloning them. While diving into directive development is beyond the scope of this article, keep it in mind as you evaluate your options. IF YOU NEED TO CLONE In some situations, you can't always avoid cloning to achieve the result you want. If that is the case, be sure you: Document the cloned widgets Consider analysis time as part of your upgrade validation process After an upgrade, evaluate the source widgets to determine if you should Keep the clone "as-is" Upgrade it Revert back to the original Remember, Service Portal is a UI framework built to help you create great experiences. Don’t be afraid to deviate from the Stock theme and take full advantage of all its capabilities! ADDITIONAL READING For related information on the topic, check out these articles. Out-of-Box — Widget Library, ServicePortal Widget Cloning — Clone a Widget Modifying — Widget CSS, Embedding Widgets, Configure Widget Instance Options