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

Featured Portal: Multinational Retailer

OVERVIEW With over a million employees worldwide, this multinational retailer wanted to deliver an intuitive and scalable employee experience with personalized content based on the users' location, language, and business area across 6 departments. PROJECT GOALS Make it MaintainableBased on development best practices, reduce or eliminate custom code to allow for future upgrades Make it PersonalPersonalize the data by correctly applying user criteria based on location, language, and business unit Define StandardsCreate well defined UI styling and standards that the client could use for internal updates Improve NavigationRedefine the catalog taxonomy and implement more user-friendly language throughout the portal      Learn more about the details of this project by reviewing the full case study featured on the NewRocket website:

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?

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.

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.

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

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

Featured Portal: Medical Center Portal

The team at NewRocket recently collaborated with a major medical center in Southern California on their multi-department service portal. This non-profit hospital and multi-specialty academic health science center employs a staff of over 2,000 physicians and 10,000 employees. NewRocket proposed developing a single portal to facilitate a seamless user experience while still preserving individual department identities. “With a relentless, persona-based focus on the user experience, NewRocket ensured our Service Portal replacement solved our request inefficiencies while simultaneously being easier to use. Our developers, fulfillers, approvers and requesters love it!”  Portal Features The portal features a user-centric design model that allows for quick access to ticket status as well as the ability to favorite content throughout the portal. The use of simple icons and contextual search creates an easy to use system for interacting with the IT & HR departments.  The portal has been well received by both the employees and administrators. Multiple business units (IT, HR) Custom designed responsive theme Uses out-of-box widgets for core functionality Categorized typeahead search results My Account page Support for user delegates Favoriting of catalog items and articles Integrated live chat Take a look at the portal and let us know what you think in the comments below.

SCSS Variables in Service Portal

Learn how to streamline your stylesheets in Service Portal by utilizing the full power of SCSS. In this tutorial, I'll walk you through how to use CSS Variables in your widgets, so that they can be overridden in the Theme and Portal records. This is very useful when creating highly reusable widgets, themes or in situations where you have multiple portals sharing a theme. SCSS is a subset of the Syntactically Awesome StyleSheets (Sass) specification and is an extension of CSS. Every valid CSS stylesheet is valid SCSS. SCSS supports the following: Variables Variables are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you want to reuse. SCSS uses the $ symbol to make something a variable. Nesting SCSS lets you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Operators SCSS has a handful of standard math operators like +, -, *, /, and %. Mixins A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can pass in values to make your mixin more flexible. Functions SASS supports the use of functions by providing some keyword arguments, which are specified using normal CSS function syntax. Quick note: The order of CSS that is shown in the video is based on the Kingston release. In Jakarta, the Theme variables were loaded before the Portal variables. For further reading, check out the following resources: https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-portal/concept/scss-primer.html https://sass-lang.com/guide https://devhints.io/sass https://www.tutorialspoint.com/sass/index.htm