The GlideForm (g_form) API in Embedded Widgets

Ever wonder how to embed a Service Portal widget into a form and have it access fields in the parent form? GlideForm to the rescue! GlideForm is a client-side JavaScript API that provides methods to customize forms. Use the g_form object to access all of the GlideForm API methods. When using the Service Catalog variable types Macro or "Macro with Label", you can embed a Service Portal widget into the form. Within the client controller of the embedded widget you have access to both g_form and the field object by accessing them from the page object on $scope: $scope.page.field $scope.page.g_form FEATURES GlideForm supports over 50 different methods of accessing and manipulating form fields, in this quick tutorial, we will cover just a few of the most frequently used functions: getValue() setValue() getFieldNames() setVisible() setReadOnly() setMandatory() You can view the full list of supported g_form methods here. WALKTHROUGH To get started: Add a new variable with type “Macro” to a catalog item with a few existing variables From the “Type Specifications” tab, click on the Widget reference field picker and select “New” Name your widget and submit Navigate to “/sp_config/?id=widget_editor” and select your newly created widget Paste in the following code. HTML: [crayon-5bca6ea84df2b706311037/] Client Script: [crayon-5bca6ea84df35575504059/] Update the field names (FIELDNAME) in the HTML to match some fields from your form Now if you view the catalog item in the portal, you should see your widget embedded in the form displaying 5 buttons. DEMO   FURTHER READING https://docs.servicenow.com/bundle/london-application-development/page/app-store/dev_portal/API_reference/GlideForm/concept/c_GlideFormAPI.html

Secrets of the Simple List Widget

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-5bca6ea84eb22502188314/] Client Script: [crayon-5bca6ea84eb2b738220050/] 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-5bca6ea84eb32150885396/] 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

Images and Update Sets – How to Sync Attachments on Widget Instances

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

Custom Context Menu Options

As most of you know, Service Portal has a pretty handy context menu that you can access by simply holding down CTRL and clicking (right click on PC) on a widget. The context menu provides several shortcuts to some of the frequently used configuration options. Note: the “sp_admin” role is required to see the context menu. Adding custom context menu items But did you know you can also add your own options to the list? Open up the Widget Editor and insert the following JavaScript into the Client Script field. [crayon-5bca6ea84fcca071409261/] Now when you view the widget in the portal and you open the context menu, you will see your newly configured menu items.

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/

Gamification in Service Portal (Knowledge18 CreatorCon)

Introduction Thanks for attending our Knowledge18 CreatorCon Session. During this session, NewRocket showcased a scoped Gamification application that is available to download free here:   NOTE It is required that your version of ServiceNow is running Jakarta or later. This scoped app is not supported on Istanbul or earlier. Components GamificationAPI (Script Include) - Contains the application logic Activities (Table) Badges (Table) Levels (Table) User Badges (Table) User Activities (Table) Gamer (Table) Gamification Points & Badges (Widget) Gamification Event Listener (Widget) Gamification Examples (Widget) Gamification (Page) Driver.js (Widget Dependency) GamificationDriver (UI Script) GamificationTourConfig (UI Script) GamificationDriver (CSS Include) Installation Install & commit the Update Set Navigate to your portal theme record (e.g. Stock) Inside the Header or Footer, embed the Gamification Event Listener widget using the folllowing code: <widget id="gamification-event-listener"></widget> Navigate to the gamification portal page (e.g. /sp?id=gamification) Click Award Points If all has been successful, you should be rewarded with 100 points Included Examples Feature Tour (using Driver.js Library) Social Q&A Configuration Includes "Gamification for Service Portal" Application Menu with the following Modules: Activities - The activities users complete to earn points Badges - Badges are earned based on accomplishments Gamers - An extension of sys_user, stores user points Levels - The levels users can obtain based on number of points To configure the Driver.js Feature Tour, edit the GamificationTourConfig UI Script. Corrections - (6/13/18) The GamificationAPI Script Include needs "Accessible from" set to "All application scopes" The documentation incorrectly lists the app prefix as "x_nero_gamificatio", however it should be "x_nero_gamificati" Additional documentation has been provided on the Gamification portal page (/sp?id=gamification). For more information on the Driver.js library, check out the docs here: https://kamranahmed.info/driver

The Road to Kingston: Announcements (Part 1 of 3)

In this 3 part series, we'll take a deeper look into the new Service Portal features found in the ServiceNow Kingston release. Part 1 - Announcements Part 2 - Route Maps Part 3 - Order Guides Link to official ServiceNow Kingston Service Portal Release Notes Announcements for Service Portal One of the new features Kingston has to offer is the out-of-box support for announcements in Service Portal. No longer do you need to hack together your own implementation of a News Knowledge Base category to display within the Service Portal. The new Announcements feature gives you a extensive control over the look and feel of an announcement, as well as the content and routing for that announcement. In the rest of this article, we’ll go through the new configuration records for Announcements, as well as some of the cool configuration settings that are included. When To Use Announcements There are a number of use cases for announcements, such as informing employees of: A critical outage New employee health benefits information An upcoming planned maintenance window Feature Highlights Standard styles: Style announcements by creating custom style records where you can set the background color, foreground color, etc. Announcement window: Provide From and To date fields to determine the lifetime of an announcement Portal specific announcements: Select which portal you’d like the announcements to display on Configurable links: Add a link to an existing portal page or custom URL Configurable dismissal: Control whether users have the ability to dismiss the notification New Configuration Records The following configuration records have been added to ServiceNow to provide support for the new Announcements feature: New Tables Announcement [announcement] - Stores announcement information Announcement Style [announcement_style] - This table stores a few out-of-box styling configurations for the Announcements widget and allows users to create their own styles Announcement Consumer Type [announcement_consumer_type] - Stores the Consumer Type values of Banner and Widget Portal Announcements [m2m_announcement_portal] - Stores mapping between Announcement record and Portal record Dismissed Announcements [m2m_dismissed_announcement] - Stores mapping between User record and Announcement record New Module Announcements [Service Portal > Announcements] New Role announcement_admin - Maintain Service Portal Announcements including creating and deleting. Exploring The Announcement Form Most of the fields are self-explanatory but there are a few things worth mentioning: Type field: Contains a watchlist for Announcement Consumers. This is used to tell Service Portal where to render the announcement. Display style field: A reference to the Announcement Styles table, where you can define the look and feel of an announcement by creating or modifying existing styles. Click target field: This field is used to determine if the announcement is clickable, and if so where the user will be routed to. Options include a Service Portal Page record or a custom URL. Dismiss options field: Used to determine if a Service Portal user can dismiss the announcement. Portals related list: If there is no Portal record associated with the announcement, by default, the announcement will show on all portals. If a Portal record is provided, the announcement will only show on those Portals that have been specified. Consumer Types When it comes to displaying announcements in the Service Portal, administrators have 2 options. The first option is the Announcements banner feature and the second option is the new out-of-box Announcements widget, where you can define exactly where in a page the Announcement should be displayed. Given the nature of an announcement, this is generally what you’d like the user to see first, which is why it is included in the header for the Portal. The image below shows the 2 display options, which are references to the same Announcement record. Announcement Styles Looking to change the default blue announcement background to a color that matches your company’s color palette? This can easily be accomplished by creating a new Announcement Style record, which is where you can define the following configurations: Background color Foreground color (text color) Alignment (left aligned or center aligned text) Final Thoughts Although it’s a little frustrating that the Announcements feature cannot be modified since it’s injected behind the scenes before the header of the Service Portal, overall it’s a step in the right direction. The Announcement Styles and Portal related list on the Announcement record was a great architectural decision. What We Like Flexibility of Announcement styles Control over the display of an Announcement by the Portal related list on the Announcement record From and To fields for an easy-to-maintain announcement lifespan User dismissal options What Could Be Improved The Announcement banner is injected above the top of the page, so you have no control over the placement and limited options for styling The ability to provide an Angular template would have been a nice added feature h5,h4 { margin-top: 24px; margin-bottom: 18px; } h4 { color: #3d89cc; } .aligncenter { text-align: center; } .entry-content { border-top: 1px solid #ddd; }