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 [...]
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.
I'll be attending Now Summit in Santa Clara next week. If anyone is available and would like to talk Service Portal, I'm leaving some time slots open on my calendar. I'll be available in between and after sessions from Wednesday evening to Thursday at 5pm. Please click the button below to access my calendar. Looking forward to meeting you! Nathan Firth – Meet at Now Summit Santa Clara
By now, you've probably already used the Simple List widget. It is one of the default widgets on the OOB portal homepage. Similar to the Data Table widget, it is used to display a list of records from a table. However, there is a lot more to this widget than you might think. In this post, we will cover some of the secrets of the simple list widget. To give you a quick sample of its capabilities, there is an OOB demo page available at: https://yourinstance.service-now.com/sp?id=test_list Features Include: Display records from any table and filter Support for image fields Show primary and multiple secondary fields Limit the height with scrollable body Trigger an event Customizable actions To get started, let's first create a widget which shows the payload of the event that get's triggered when clicking a record. HTML: [crayon-5c13dbf29c5b7663134470/] Client Script: [crayon-5c13dbf29c5cb554090484/] Now if you place this widget on the same page as the Simple List widget, and if you don't specify a "Link to this page" in the Instance Options, you will see the JSON representing the record you clicked on. With this event, it'll be very easy to trigger a modal window or other user interaction, but for now let's proceed to adding some List Actions. LIST ACTIONS The Simple List widget supports adding additional actions for the records in the list. For some reason this related list is not visible on the form by default, so we'll need to add it: Pull up the Platform View of the Instance Record of the Simple List Click the hamburger icon > “Configure” > “Related Lists” Add "List Action -> Parent List" Now you should see the List Actions Related List When adding List Actions, you are able to include properties from the record in the URL field using double brackets: [crayon-5c13dbf29c5d9190206521/] However, there are a couple of unfortunate limitations: You cannot link to an external URL You cannot use URL prefixes such as “mailto:” or “tel:” Clicking a List Action does not trigger an event This limits the List Actions to just linking to other pages, but hopefully this will get fixed in an upcoming release. DEMO Here is a quick video demonstrating how to configure some List Actions on the Simple List widget. FURTHER READING https://docs.servicenow.com/bundle/london-servicenow-platform/page/build/service-portal/concept/simple-list-widget.html
It’s a pretty common requirement to include images in your widgets, for example replacing the icons with images in the “Icon Link” widget (available here). However, if you have ever added an image field to one of the instance tables, you may have noticed that the images were not included in the update set. This obviously makes it difficult to migrate the portal between instances. The good news is there is a simple solution. SYNCING ATTACHMENTS First, go to a record within the table where you would like to sync attachments (e.g. sp_instance_link) Right click the heading > Configure > Dictionary Select the record where “Type” is “Collection” Click the “Advanced View” related link Paste the following into the Attributes field: [crayon-5c13dbf29e05c438387801/] When completed, it should look like this: Now, the next time you save or update the instance record, the image data will also get included in the update set. NOTE: If you wish to use the image field on all instance tables, you can create the field on the base “sp_instance” table. However, you will still need to follow the steps above for each one of the extension tables where the image field is used.
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
By now all of you should have noticed that you can request a personal developer instance of ServiceNow running the latest London release. Also with the new London release comes several new enhancements to the Service Portal. Here's a quick highlight of some of the new features: Faceted Search The Faceted Search widget replaces the Search Page widget and adds support for: Faceted Search Filters Pagination What's awesome: I love that the facets live as part of the search source so that we can customize the facets as well as add custom facets to our search sources What could be improved: The whole search page is a giant widget including the typeahead search and the breadcrumbs. This makes it difficult to customize. What if we have a theme without breadcrumbs? What if I want to move the search? Having the whole page be one giant widget is just not a good idea. It does not improve the typeahead results which is how the majority of users use the search Virtual Agent Enable your users to interact with a chatbot or live agent through various Virtual Agent interfaces. What's awesome: Nice modern interface Integrates nicely with Connect Chat What could be improved: It's not free (requires additional licensing) Takes a really long time to load Guided Tours Create a guided tour for a Service Portal page to guide users through the content step by step. What's awesome: Supports auto launch Supports (limited) HTML Easy to use designer interface What could be improved: No support for page overlays (darkens the page behind the dialog) Dialogs don't stay fixed when the user scrolls the page Automated Test Framework Write automated tests to validate Service Portal forms. What's awesome: We now have support for automated tests in Service Portal What could be improved: So far it's just limited to forms and service catalog Validation Scripts Validate user input in a specific field type using a validation script. My thoughts: As far as I can tell, this validates field types and not tied to a specific table, also would not affect catalog items or record producers... so honestly, I'm not really sure when this would be useful. If you know of some common use-cases, I'd love to hear them in the comments. For further reading, please see the official ServiceNow London Release Notes for Service Portal.
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.