Big Announcement! I am so excited to announce that NewRocket has been acquired by Highmetric, a technology strategy, design, and operations provider and an Elite Partner of cloud computing platform ServiceNow. This acquisition brings NewRocket’s user-focused design and innovative solutions to Highmetric, complementing its existing digital workflow optimization capabilities. For the full press release, visit: newrocket.com/articles/highmetric-acquires-newrocket
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-6a08f85da286d550773893/] 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.
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
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-6a08f85da308e309436250/] _.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-6a08f85da3094310145455/] 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-6a08f85da3095774798117/] _.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-6a08f85da3096400231968/] FUNCTIONS _.bind(func, thisArg, [partials]) [crayon-6a08f85da3097537035756/] 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-6a08f85da3098077325923/] _.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-6a08f85da309e362197091/] _.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-6a08f85da309f008878998/] 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-6a08f85da30a0179460374/] _.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-6a08f85da30a1939304870/] _.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-6a08f85da30a3240332664/] 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.
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?
Featured Portal: Informatica
OVERVIEW Informatica is an Enterprise Cloud Data Management leader that accelerates data-driven digital transformation headquartered in Redwood City, California. Informatica enables companies to fuel innovation, become more agile and realize new growth opportunities, resulting in intelligent market disruptions. Informatica came to NewRocket to increase user satisfaction, simplify the process, and encourage self-service with their employee service portal. SERVICES Research & Insights Wireframe Design Clickable Prototypes Catalog Consulting High Fidelity Mockups Service Portal Development NewRocket was an integral member of our team and critical for providing the expertise and guidance we needed to make the Informatica IT Service Center a successful reality. We have been very satisfied with everything NewRocket has provided us and plan to continue to use them as needed in the future. - Scott Hiner, Senior IT Communications Manager THE CHALLENGE Informatica’s original portal although designed to accommodate multiple departments did not provide an intuitive experience that allowed users to easily navigate the content of the portal. The portal also served as a hub to other business platforms which diluted its original purpose to focus on service delivery. THE SOLUTION NewRocket developed a dashboard-like homepage that allowed relevant content from all parts of the portal to be easily accessible. Three main calls to action were created to guide users into the experience and help them to filter through the content to find what was most relevant to their needs. Customized widgets were also added to help facilitate feedback and to integrate dynamic content throughout the portal.
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-6a08f85da35a0871273011/] 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.
Creating Extraordinary Service Portals on ServiceNow
Check out our new Service Portal showcase video, featuring some of the 70+ portals we've designed and developed over the past 3 years. If you're interested in talking to us about your Service Portal project, you can book some time on our calendar here: https://calendly.com/newrocket/60min Or visit our website newrocket.com
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.
Founder & CEO of 