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

Building a Better Service Portal: Lessons from the Field

Service Portal provides an incredible new opportunity to improve service experience in your organization. It offers a fresh and modern approach to development. But with anything new, there is always a learning curve and some growing pains. Fortunately, with the right knowledge, delivering a new service portal experience to your organization can be a smooth and rewarding journey. After helping dozens of organizations deliver Service Portals, we want to share what works and what doesn't. If you are starting your service portal journey, this session will help you take the right path.

Unlocking Service Portal Widgets

How do you go from hacking a widget together to creating one that is maintainable, easy to understand and performant? You accomplish a lot with Service Portal widgets with a little knowledge of ServiceNow APIs and Angular.js, but too often widget client and server scripts become long and overly complicated. In this session, you will learn practical techniques to make your controller and server scripts more maintainable, flexible and powerful by embracing good coding practices, encapsulation, and decoupling. You can download the widgets used in this video here: https://serviceportal.io/downloads/k18-creatorcon-example-widgets/

Widgets and Demo Portal from our K18 Service Portal Sessions

Due to popular demand, here is a quick video highlighting the portal and some of the widgets we showed during our CreatorCon sessions at Knowledge18. We've made the following widgets and applications available for download: Gamification for Service Portal https://serviceportal.io/gamification-in-service-portal/ Unlocking Service Portal Widgets https://serviceportal.io/downloads/k18-creatorcon-example-widgets/ If you've found this content useful or if you have any special requests for upcoming posts, please let me know in the comments below.

Featured Service Portal: Scripps Networks

NewRocket had the pleasure of collaborating with Scripps Networks Interactive to deliver an IT service portal to support their diverse company. Scripps Networks is a leading developer of lifestyle content for television and the Internet. The company's brands include HGTV, Food Network, Travel Channel, DIY Network, Cooking Channel and Great American Country. The previous Scripps Networks CMS-based portal did not provide the usability they were looking for nor did it align with their new branding guidelines. Improving these key areas was critical for the redesign of the portal. “NewRocket delivered on a portal that not only fit our branding guidelines but packs in functionality with a design aesthetic that is visually inviting.  Our end user experience has greatly improved by making our content and catalog offerings forefront and easily searchable all in an appealing display.  The team was fantastic to work with and their expertise and guidance helped make our portal successful.” - Judy March, IT Service Delivery Manager Portal Features The new portal provides users with quick access to search, the IT service catalog, frequently asked questions and news. NewRocket embraced the extensive, yet flexible branding guidelines to visually identify different sections of the portal. These visual and structural changes help users quickly understand the page contents and complete the desired task. Some other highlights include: Quick access to open requests, incidents and approvals through My Items mega menu in header Direct access to the top level service catalog categories from the home page Consistent access to support options in footer Several custom developed widgets including news, sub-categories, and knowledge base homepage Responsive layout for mobile and tablet users Watch the video for a quick tour and leave us a comment about what you think of the portal.  

Featured Portal – Fairfax Media

The team at NewRocket recently collaborated with Fairfax Media on their multi-department service portal. Fairfax Media is one of the largest media companies in Australia and New Zealand, with investments in newspaper, magazines, radio and digital properties. Fairfax had previously deployed six independent department portals with little continuity among them. NewRocket proposed developing one single portal experience to facilitate seamless navigation among the portals while still preserving individual department identities. The new portal unifies the company and allows portal users to accomplish their tasks quickly across multiple departments. NewRocket's skill and depth of knowledge in UI and UX design and their understanding of  ServiceNow helped to make our Intranet and Service Portal design project very successful.  The final product is exactly what we wanted, easy to learn, easy to use, simple to maintain and a joy to develop. - Scott Paterson, Fairfax Technology Service Manager Check out this video created by the Fairfax team: Portal Features The portal features a user centric design model that allows for quick access to ticket and request statuses as well as the ability to personalize content throughout the portal. The use of simple icons and department based filtering creates an easy to use system for ordering and reading articles. The portal has been well received by both the employees and administrators. Multiple departments (IT, Finance, HR, Legal, Health & Safety, Business Intelligence) Unique department landing pages Smart search widget with grouped search sources Facebook integration for news feed Searchable staff directory Custom department specific icons 6 knowledge bases combined into a single knowledge portal Fully responsive for mobile and tablet users Take a look at the portal and let us know what you think in the comments below. figcaption { text-align: center; font-style: italic;}

4 Steps to Planning a Great Portal Design

Every great portal begins with a well thought through plan. The planning stage is critical to gaining alignment on key functionality as well as gathering insight into what actual users are looking for. Here are a few tips we use to get started the right way. “By failing to prepare, you are preparing to fail.” -Benjamin Franklin Step 1 - Clarify your requirements early on Why? Because changes on paper are the easiest to make. Benefits of requirements gathering: Gets your whole team involved from the beginning Documents the scale of the project Easier to tackle potential roadblocks early in the project Things to consider while gathering requirements: How will you gather insights from actual users to help define your goals? Will you need to upgrade your instance to the latest version of ServiceNow? Will you add other departments to your portal? Do you have the infrastructure in place to handle enhancements? (Ex: live chat) How many people will access the portal on tablets and mobile devices? Step 2 - Make your goals about fulfilling needs Why? Because good goals inspire change. Benefits of setting goals: Shifts focus from problems to needs Motivates the whole team to work towards the same results Aligns stakeholders and reduces the amount of subjective feedback later in the project Bad Goal Example Good Goal Example “Our IT department is overwhelmed with calls so we need to get higher adoption of the portal.” “Most of our users cannot work without the items they have requested. Instead of users calling the IT help desk for the status of their request, we need to speed up the process by making it easy to check statuses on the homepage of the portal” “The computers are hard to find on the portal. Make it easier to find computers” “Users are having a hard time understanding how to order a computer so we need to create a step-by-step flow from the homepage that makes it very clear where to begin and how many steps there are to complete an order.” Step 3 - Build empathy with your users through research Why? Because otherwise you are just guessing. Benefits of user research: Reveals patterns and unknown insights Defines objectives and tests hypotheses Exposes alternatives and informs conclusions Research Type Description User Interviews Produces qualitative data Gets into the minds of actual users to understand what drives their specific actions Can take place remotely via phone or web-based video, or in person Focus Groups Allows for multiple perspectives to be heard regarding the same topics Can take place remotely via phone or web-based video, or in person Surveys Inexpensive method you can use to gain insight quickly Can be sent to a large pool of users to gain quantitative information Caution: Don’t ask the wrong questions. When doing research, be careful of asking the wrong questions. People don’t always know what they want if it doesn’t exist yet. If all of your user questions require someone to imagine what could make the experience better, they typically will not know how to respond. Step 4 - Make it visual, but keep it simple Why? Blockframes and wireframes make design changes more efficient Benefits of Blockframes and Wireframes: Lowers the bar of design so everyone can participate Removes subjectivity so you can focus on the flow and hierarchy Encourages collaboration and easy iteration Blockframe A blockframe is a simplified representation of a portal that consists of large colored blocks that represent content areas. Quick and easy way to flesh out your vision without getting caught up in the details Can serve as an extension of your requirements gathering phase as a visual checklist Wireframe A wireframe is a low-fidelity visual representation (typically done in grayscale ) of a portal’s layout, sometimes referred to as a skeleton, or a blueprint. Represents the basic page layout and navigational scheme Shows more detail than a blockframe Can also be easily modified and changed

Creating a sticky footer in your Service Portal

While developing web layouts, at some point you've probably run into the issue with the footer floating in the middle of the page just below the content. This can easily be fixed with a little CSS magic. Service Portal does support fixed headers and footers, but this causes the footer to stick to the browser window and overlap the content, which is not what we want. We want the footer to always be at the bottom of the page. This is called a "sticky footer".   In between Helsinki and Istanbul some major changes were to made to the outer page structure that broke some earlier solutions posted on the community. My goal is to provide a solution that would work with all versions of Service Portal and it's various supported browsers. The Solution: I've chosen to implement the sticky footer using Flexbox as this provides the most amount of flexibility. One added advantage of flexbox is that it also supports variable height footers, which many other solutions do not. Installation: Go to your portals theme record. Select a footer widget, you can use the out-of-box "Sample Footer" as a test. Make sure the "Fixed footer" checkbox is unchecked. Paste the following snippet of CSS into the "CSS variables" textarea, or alternatively you can include it in a CSS Include. [crayon-5bca78a3e9a83493082462/] It's been tested on Helsinki, Istanbul, and Jakarta using Chrome, Safari 9+, IE10+. For additional information on flexbox, you can check out the following resources: A quick guide to flexbox by CSS-Tricks - here. Solved by Flexbox, a website dedicated to cool flexbox techniques - here. I hope you've picked up something new and useful from this article. Would love to hear your comments and questions in the comment section below.

Free Service Portal Theme!

Thank you to everyone that was able to attend our CreatorCon breakout at Knowledge last week. It was great finally meeting so many of you. Due to overwhelming demand, we are releasing the Presentation and Update Set for the theme we built during the breakout. To keep things simple, I’ve rebuilt the Update Set to not modify any of the out-of-box records and instead create new records. Also keep in mind this theme only styles the homepage and does not alter the content or layout. Once installed, you can view the portal by going to: https://instance.service-now.com/k17 Session ID: CCB4221 Presenter(s): Todd Bashor, Nathan Firth Company(s): NewRocket, Inc. Abstract: Wondering how to get your service portal to align with your branding guidelines? Fortunately, with the right approach, you can quickly and consistently achieve the look you want. In this session, you'll learn how to build a custom theme by correctly applying styles at the widget, page, and theme level and taking advantage of out of the box styles and css variables.   Don't forget to rate it on the community