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-59732e062d535170246654/] 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.

Full Text Searches in Service Portal

In the stock Service Portal it asks the user "How can we help" and then provides the user with a big search input. This implies that the user could enter a sentence or phrase such as "reset my password" to answer the question, however this will rarely deliver the correct results. ServiceNow provides several search operators for performing full text searches with GlideRecord using ServiceNow's Zing search engine. However the stock widgets in Service Portal are hardcoded to use “123TEXTQUERY321” which works great for single word searches but not so much for searches containing multiple words or phrases. In this example, the simple addition of the word "my" prevented the user from finding the "Reset Password" item. To improve the search results, let’s take a quick look at some of the other options available. Search Operator Description IR_AND_QUERY Display results with exact matches of all terms only (Same as 123TEXTQUERY321) IR_OR_QUERY Display results with any matches of any terms. IR_AND_OR_QUERY First display results with exact matches of all terms, then display results with any matches of any terms Of the above, I recommend using IR_AND_OR_QUERY as this will return the best results across all combinations of searches. When performing a full text search, ServiceNow also adds an additional property to the GlideRecord called "ir_query_score" which contains the relevance score calculated by the system. Administrators can control the scoring for each field in a table with the ts_weight attribute. Here is a quick example of how to search the Service Catalog and return results ordered by relevancy: [crayon-59732e062e544220408547/] For further reading, check out:  

How to Avoid “Unsafe” Prefix on Links

If you’ve ever tried creating a dynamic link with a non-standard protocol or prefix (e.g. file, sms, tel, ftp, local) in Service Portal, you may have noticed that it prepends the url with “unsafe” rendering it unusable. The sanitization is a security measure aimed at preventing XSS attacks via html links and is coming from Angular.js which maintains a whitelist of safe urls. To fix this you will need to override the default whitelist by passing in a regular expression to the application configuration. You can do this by creating a “js_include” in your portal theme and include the following script: [crayon-59732e062f0ed031164166/] Where you see https?|ftp|mailto, etc… that is the regular expression you will want to update to include your url prefixes.

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: 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

Creating a Custom Theme in Service Portal – CreatorCon Breakout

Wondering how to get your service portal to align with your branding guidelines? With the right approach, you can quickly and consistently customize your portal to match the rest of your branding. In this session, you'll learn how to build a custom theme by correctly applying styles at the widget, page, and theme level and utilize all of the potential of this powerful platform. Register for the CreatorCon Breakout:

CSS Utility Classes in Service Portal

Included with Service Portal are a variety of different CSS utility classes loosely based on some of Bootstraps utility classes. For many of the classes below, you will see a format similar to: "m-t-lg", this stands for "margin top large". As I'm sure you can guess, there is also a classes for bottom, left, right, small (sm), medium (md), etc. and all the various combinations thereof.  This allows you to easily add consistent margins, padding, colors, etc. without creating custom styles within the widget. Here is a list we've compiled of some of the most common utility classes: Padding: wrapper, wrapper-xs, wrapper-sm, wrapper-md, wrapper-lg, wrapper-xl Horizontal Padding: padder, padder-xs, padder-md, padder-lg, padder-xl Vertical Padding: padder-v, padder-v-md, padder-v-lg, padder-v-xl Top Padding: padder-t, padding-top-s, padding-top-m, padding-top-lg, padder-t-lg, padder-t-xl Right Padding: pad-right Bottom Padding: padder-b-none, padder-b, padder-b-md, padder-b-lg, padder-b-xl Left Padding: N/A Top Margin: m-t, m-t-none, m-t-xxs, m-t-xs, m-t-sm, m-t-lg, m-t-xl, m-t-n-xs, m-t-n-lg Right Margin: m-r, m-r-none, m-r-xs, m-r-sm, m-r-lg, m-r-n Bottom Margin: m-b, m-b-none, m-b-xs, m-b-sm, m-b-lg, m-b-xl, m-b-n Left Margin: m-l, m-l-none, m-l-xs, m-l-sm, m-l-lg, m-l-n Text Color: text-muted, text-primary, text-success, text-info, text-warning, text-danger Background Color: bg-primary, bg-success, bg-info, bg-warning, bg-danger Float Elements pull-left - Floats an element to the left pull-right - Floats an element to the right Clearing Floats clearfix - Clears floats Display & Margin center-block - Sets an element to display:block with margin-right:auto and margin-left:auto Visibility show - Forces an element to be shown (display:block) hidden - Forces an element to be hidden (display:none) invisible - Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible sr-only - Hides an element to all devices except screen readers sr-only-focusable - Combine with "sr-only" to show the element again when it is focused (e.g. by a keyboard-only user) text-hide - Helps replace an element's text content with a background image close - Indicates a close icon caret - Indicates dropdown functionality (will reverse automatically in dropup menus) Hide visible-xs, visible-sm, visible-md, visible-lg Show hidden-xs, hidden-sm, hidden-md, hidden-lg For more details on CSS in Service Portal, you can check out the unofficial documentation on Github:

Announcing the Contextual Search Results Widget

UPDATE: Now with updated pricing! Available now in the ServiceNow app store! With the NewRocket Contextual Search Results Widget your company can achieve incident deflection in the Service Portal. As self-service users enter details about their issue, search results appear within the form, allowing the user to view relevant knowledge articles, catalog items, or social Q&A thread instead of submitting an incident. The result: less incidents submitted and more satisfied users. Key Features - Integrates with existing record producers - View search results while typing - View individual result items without navigating to a new page - Simple to configure to show relevant knowledge articles, pinned articles, social Q&A and/or catalog items Click here for more details and pricing information!