Service Catalog Item Wizard in Service Portal

We've had a number of clients ask about structuring catalog item forms as more of a "wizard" that only renders one section at a time. After thinking about it for a while, I realized that I could use the GlideForm API to programmatically hide and show the different sections (containers). So over the past couple of weeks, I've been working on a new widget that simply interacts with the out-of-box catalog item widget, and uses the API's to add all of the wizard-like capabilities. I think it turned out pretty cool, it's fully themeable, and best of all, it does not require cloning of any widgets. I still have a few more features to add, and I'm also considering adding an accompanying library of Variable Sets that provide a more graphical UI than the out-of-box catalog variables. If all goes well, I may end up including the widget in our RocketFuel library of widgets, so if you're interested in adding some wizard-like capabilities to your portal, feel free to contact me and we can schedule a demo. I'd love to hear what you guys think in the comments below. Is this a useful widget? Does this improve the user experience of the service catalog item form?

Restyling Notifications in Service Portal

Today I am going to show you how to change the styling of the built-in notifications in Service Portal. The default notifications in Service Portal are based on the Bootstrap Alerts components, but I prefer the smaller "Toast" notifications of Bootstrap 4. Default   New Style         The following CSS sets a new width and aligns the notifications in the upper right corner of the screen rather than spanning the whole page. You will need to add the following styles into a CSS Include in your theme. CSS [crayon-5df479063b898612631757/] If you are already on the Madrid release, I recommend replacing the above HEX colors with the $brand-success and $brand-danger variables so that they can be driven by the variables defined on your theme. If you wish to trigger notifications from your own widget, you can trigger notifications using either of the following. Server Side: gs.addInfoMessage("Success goes here"); gs.addErrorMessage("Error goes here"); Controller: spUtil.addInfoMessage("Success goes here"); spUtil.addErrorMessage("Error goes here");   BEFORE AFTER This is just a small example of how you can restyle the default notifications, but there is still plenty of ways this could be improved. If you have some ideas or other styles that you would like to share, feel free to post them in the comments below.

Localization in Service Portal

As most companies experience globalization in some capacity, it’s important that they localize their portals to accommodate users from different areas around the world. In this article, I will go through the different components involved with localizing your Service Portal. Before we begin, make sure to activate the internationalization (i18n) plugin and the required language pack plugins that will be used by your organization. Also, there is an OOB widget called "Language Switch." Simply include this widget somewhere in the portal to enable users to update their language preferences. The two primary tables in ServiceNow responsible for storing translations for Service Portal are: Message Translated Text We will also cover some of the other tables and plugins that can potentially impact translating a portal. Message table (sys_ui_message) The UI message table contains translations using key/value pairs. The key is the string in the base language and the value is the localized version of that string. The main fields on this table are: Key: unique identifier of this message (usually the English version of the string). Language: language the message is translated into. Message: translated text that users see. In Service Portal, the primary area you would see UI Messages used is inside widgets (in the HTML, Client Controller, and Server Script), but can also be commonly found in other areas with server-side scripts (e.g. Scripted Menu Items, Script Includes, etc.). HTML Use the ${} syntax in widgets to tag strings for translation [crayon-5df479063cf54093255429/] If translating a string stored in a variable, it is also possible to wrap a data binding {{}} with ${} to translate the contents of the variable. [crayon-5df479063cf5c402352160/] However, I do not recommend using this approach. It is much better to do the translations server-side whenever possible. Client Controller Similar to HTML, you can also use ${} in the controller if it's going to be displayed in the HTML [crayon-5df479063cf60213982655/] Note: In some cases, the translation might have quotes or double quotes in it. That could lead to JavaScript errors if you are using the ${} syntax in the client script. The safest way to fetch a translated message is to do it in the server script. Another way, and perhaps better way to access translated strings in the controller is using the i18n service. [crayon-5df479063cf64562383827/] In order to use the i18n service, you must also declare the variable in the HTML using the <now-message> syntax [crayon-5df479063cf68840785530/] And then you can render the message in HTML using the {{}} syntax [crayon-5df479063cf6b641908504/] Server Script For all server-side translations, use the gs.getMessage() method [crayon-5df479063cf6f242548930/] It is also possible to format certain template strings by passing in an array of strings as the second parameter: [crayon-5df479063cf72204671992/] This would return: "Welcome Nathan Firth – you have 5 active tickets." Demo To demonstrate the various ways of doing translations using the sys_ui_message, here is a quick screen capture of the Widget Editor showing the string translated and used four different ways in the same widget. The string in all four cases is "Hello World", and I'm translating it to say "Hello There". Click image to see full size Translated Text table (sys_translated_text) The Translated Text table stores translations for fields with the field type translated_text or translated_html. The main fields for this table are: Document: internal identifier of the record this translation applies to. Field name: field this translated text appears in, for example, Close notes. Language: language the text is translated into. Table Name: table this translation applies to. Value: translated text that the user sees. Some common areas in Service Portal using Translated Text fields include: Widget Instances (title, short_description) Catalog Categories (title, description) Menu Items (label) Knowledge Categories (label) Other translation tables Although the Message and Translated Text are the primary tables used in Service Portal, there are also a few others worth noting: Knowledge (kb_knowledge) if you've activated the "com.glideapp.knowledge.i18n2" plugin, you can also translate articles directly using the Knowledge tables. Choice (sys_choice) table contains translated text for options that appear in choice lists. Field Label (sys_documentation) table stores the text of table names along with the singular and plural labels for each field in the table. Session at K19 Manually extracting, translating, and importing strings is time-consuming and error-prone. We will be leading a CreatorCon session at Knowledge19 in Las Vegas where we will be presenting on internationalization and making recommendations on to make this process less painful. Stay tuned for more information about that session. Lastly... We're working on a brand new scoped application that will automate the extratction and importing of translations for Service Portal. If you are interested in seeing a demo or would be interested in this upcoming application, please don't hesitate to reach out.

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-5df479063da2e297059863/] Client Script: [crayon-5df479063da35629391115/] 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-5df479063ea05199548858/] Client Script: [crayon-5df479063ea0b507620144/] 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-5df479063ea10495243038/] 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

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-5df479063fa0c490518674/] 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

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.