Overview spUtil enables you to perform common functions in a Service Portal widget client script. You can access the methods by passing in spUtil as a parameter in your client-script function. Many of these methods have not been documented by ServiceNow, so we have combed through the source code once again to bring you another Service Portal cheatsheet! Save time and maximize your productivity with this quick reference document for you to use day-to-day. Enjoy!
GlideSPScriptable Cheat Sheet
Overview Did you know there are over 60 server-side methods available in GlideSPScriptable ($sp)? Many of these methods are hidden or not documented, so we've combed through all the widgets and source code to provide you with this cheat sheet that includes all of the $sp methods available in Service Portal. Now updated for the New York release. Save time and maximize your productivity with this quick reference document for you to use day-to-day. Enjoy!
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-69d197d83a8f2256247353/] 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.
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-69d197d83b15a047601034/] Client Script: [crayon-69d197d83b15e451685650/] 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-69d197d83b15f710038031/] 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
Free Widgets for Service Portal
We are excited to announce the launch of the free widget download page on ServicePortal.io. Since day 1, ServicePortal.io has existed to be a resources and source of inspiration for the ServiceNow Community. With the launch of the new widgets page, we can now share some of the most frequently requested widgets with all of our followers. Not all of them will be complex, many of the most frequently used widgets are pretty simple. Our goal is to develop and give away at least one new widget per month. We believe that collaboration is key to success for all of us in the ServiceNow Community. If you have any suggestions or comments about our widgets, please let us know. View Free Widgets Page
New Features of Istanbul
Istanbul is the next release of ServiceNow and with it many new fixes and additions are being included for ServicePortal, including more than 200 bug fixes, localization improvements, and widget editor improvements. But the most exciting thing in Istanbul are some of the new Service Portal features: Search Sources The search has been greatly improved with the new "search sources" feature which adds greater flexibility and extensibility to the search widgets. A search source will describe the behavior and source data Ability to configure the behavior of search in portals without having to write, edit or clone any widgets SC Shopping Cart The shopping cart has been one of the most highly anticipated new features, and greatly enhances the shopping capabilities of the Service Catalog in Service Portal. Support for ordering quantities of items (where permitted) Adding ordered items to a cart (stored in the sc_cart table) Setting "Requested For" field and order details Ability to edit the variables of a cart item after it has been added to the cart Support for saved carts with the ability for later use Respects most Service Catalog properties Omit cart Omit quantity Catalog variable 2-column layouts This is another huge improvement over Helsinki, adding support for 2-column layouts for variables in Service Catalog. Improvements to the Widget Editor New hotkey bindings Dependencies are able to be viewed and edited alongside a widget Localization Improvements All strings have been translated Extended translation to the widget client script Use of ${My key} Widget Options Schema Improvements Declare parameters for widget Users can now have hints Default values are able to be provided Bug Fixes Istanbul also includes some notable bug fixes, including: The variables max_length being inconsistent with normal Catalog UI Certain $sp api's don't work in scoped applications Order guide variables don't cascade Cannot redirect to the correct location after login Help and Tooltips don't appear on forms Branding editor unable to load without a default portal specified Unable to hide "Label" variables in Service Catalog using UI Policy Actions Service catalog doesn't nest categories - page takes long time to show when there are a lot of categories Forms not displaying -- NONE -- in dependent choice list field Simple support for catalog item variable 2-column layouts
Create custom action buttons in Service Portal
A common feature request for Service Portal is to be able to add custom buttons to the sc_request or ticket page similar to the way you could add UI actions to a form. This functionality is not available out-of-box, but here is a quick example on how you could create a custom widget to display some buttons to mimic the UI Actions on a form. In this example, we will create a "Resolve Incident" button to place on the incident "ticket" page. HTML: [crayon-69d197d83b73b241984032/] Client Script: [crayon-69d197d83b73f065588284/] Server Script: [crayon-69d197d83b740952623887/] The resulting widget should look something like this: This is far from the complete solution, but will hopefully provide a good example to work off of.
Embedding widgets in Service Catalog
In Service Catalog you have the ability to embed a UI Macro as a variable in your catalog items or record producers. UI Macros are based on Jelly and as such they will not render in Service Portal. To work around this, you can now embed a widget for your UI Macro variables when displaying your catalog in Service Portal. In this example, we're going to create three variables, and make the third variable a widget that will display the sum of the other variables. Create a catalog item with the following variables: Single Line Text: "value1" Single Line Text: "value2" Macro: "results" On the "results" variable record, you will see a "Default Value" tab, with a reference to the Widget. Create and select a new widget called "Embedded Results", and use the following values: HTML: [crayon-69d197d83c33b938600128/] Client Script: [crayon-69d197d83c33f904410306/] Now when you view this catalog item in the portal, the embedded widget will display the results of the two variables: Note, that the "field.change" event fires when the field loses focus, so you will have to tab or click out of the field to see the results.
Founder & CEO of 