NewRocket.com

Custom Native Mobile Apps on ServiceNow

I get asked a lot about mobile and how to deliver branded mobile experiences on ServiceNow. For years the answer has been to use Service Portal since it's responsive and can be themed to function really well on mobile devices. This has worked quite well for many use-cases, but it still requires accessing through a browser or ServiceNow Classic, and it's still not the same experience that we've all come to expect from a native mobile app. 54% of employees expect their employers to provide mobile-optimized tools Source: https://research.servicenow.com/ Some of this has changed with the release of the Now Mobile app, but it is ServiceNow branded, lives in the app stores under ServiceNow's name, and requires entering of the instance name and credentials. It may be great for roled users, fulfillers, or users at least familiar with ServiceNow, but there are still many use-cases when using the Now Mobile app does not seem ideal. Consider, for example: Local governments or municipalities enabling anonymous citizens to report issues Universities using ServiceNow for managing student requests Product companies offering support via ServiceNow to its customers Enterprise organizations wanting to provide their employees with a tailored and branded experience In many of these cases, it seems the ideal scenario would be a dedicated app, in the app stores, with the organization's branding, and with the specific features for that target audience. This compelled us to explore what it would take to develop cross-platform mobile apps. Apps fully integrated with ServiceNow, with custom branding, feature specific UI's, and taking full advantage of the mobile capabilities such as geolocation, maps, push notifications, and camera features. We've chosen to build our current platform on React Native, as this allows for both iOS and Android apps with a single code base, but we're also exploring a version in Swift and Java. In the video above, you can see some of the example apps that we've been prototyping. The goal of the project has been to follow the same conventions as Now Mobile, leveraging the same APIs, ensuring a sustainable architecture. As of this writing, we have not yet released any publicly available apps into the store... but we are working with some of our early adopter customers on some innovative new mobile solutions. To learn more about these projects and our native mobile capabilities, please contact us or visit newrocket.com for more information. I would love to hear your comments or feedback below. What are some use-cases where a mobile app could really improve the user experience?

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-5e4a99e886bff604526338/] _.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-5e4a99e886c09183866919/] 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-5e4a99e886c0f345496830/] _.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-5e4a99e886c14683433529/] FUNCTIONS _.bind(func, thisArg, [partials]) [crayon-5e4a99e886c19838426216/] 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-5e4a99e886c1e802189676/] _.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-5e4a99e886c23272617442/] _.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-5e4a99e886c29994074537/] 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-5e4a99e886c2e081522116/] _.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-5e4a99e886c33614030147/] _.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-5e4a99e886c39216129908/] 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.

Featured Portal: Merck Group

OVERVIEW Merck is a German multinational pharmaceutical, chemical, and life sciences company headquartered in Darmstadt, with approximately 50,000 employees in 70 countries. Merck came to NewRocket to build a unified portal experience that seamlessly combined multiple departments and processes, but still allowed each department to have some autonomy. PROJECT HIGHLIGHTS   Ticket System Implemented a new ticket system that provides Merck employees with a consolidated view of their tickets across all departments. Defined Catalog Designed a dashboard that displays top destinations filtered through user criteria, allowing users to navigate the catalog and submit items more efficiently. Subsidiary Impersonation Provided enhancements that allow selected users to request different services or view knowledge articles on behalf of another user. Accurate Translations Utilized our translation tool to supercharge translation efforts, promote maintainability, and improve communication for Merck's global user-base.     We helped create an organized portal structure that accommodates a modern design experience and streamlines Merck's inter-departmental processes. Click the link below to view the full case study, or visit NewRocket.com to see our products and services.

Titans of Now: Nathan Firth

Last week I had the awesome opportunity of being interviewed by Robert Fedoruk on his YouTube Channel. We discussed Service Portal, the mobile frontier, and the new ServiceNow UI framework. Have a listen and let me know what you think!

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.

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-5e4a99e888318183238570/] 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.