Communicating between the Client Script and the Server Script of a widget

We've had a lot of questions about how the client side and server side of a widget can communicate, so this week I thought it would be a good idea to offer a quick demonstration. In this tutorial we will create a widget that allows the user to add or remove items from a list. In this case it's just a simple Array, but it could just as easily be using GlideRecord against a table. Here is the sample code used in the video: HTML: [crayon-5974cf8284716266579922/] Server Script: [crayon-5974cf828473c615981006/] Client Script: [crayon-5974cf8284742023826643/]

Free Widget of the Month

To help contribute back to the community, we’re going to try to develop and give away one new widget per month. For January we have developed the “Related List” widget, which allows you to display related lists on the form page in Service Portal. Example below from a service catalog request: Please let us know what you think in the comments below or by tweeting at us at: @newrocketinc

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-5974cf8285697804618692/] Client Script: [crayon-5974cf82856a0920912274/] Server Script: [crayon-5974cf82856a5697590707/] 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.

Using Events to Communicate Between Widgets

Following the principle of “separation of concerns”, it is good practice for your portal or application to be made up of self contained functional components, also known as widgets in Service Portal. However sometimes these widgets need to communicate with one another. Thanks to Angular.js this can be accomplished through the use of $broadcast, $emit, and $on methods. $broadcast and $emit allow you to raise an event in your widget. The difference between $broadcast and $emit is that the former sends the event downwards from parent to child controllers, while $emit sends an event upwards from the current controller to all of its parent controllers. Both methods are available on $scope and $rootScope. You can subscribe to an event using the “$on” event handler. In this example we will create two widgets that interact using $broadcast and $on. Widget #1: Create two buttons that upon click, will $broadcast an event called "customEvent" and pass an object. HTML: [crayon-5974cf8286aeb125291709/] Client Script: [crayon-5974cf8286af4988492534/] Widget #2: Listen for the "customEvent" event, and when triggered, the callback function will update the text. HTML: [crayon-5974cf8286afa525117365/] Client Script: [crayon-5974cf8286aff859545731/] The final results should look like this:

Topics at Knowledge17

We’re working on some ideas for Service Portal related talks at Knowledge17. We have some good ideas for topics, but would love to hear from you: What are some topics or questions that you would love to see presented at K17? Here are some of the ideas we came up with: Developing custom apps in Service Portal Creating a custom theme Facilitate a great portal user experience Integrating your portal with an external service Creating a single portal serving multiple business units Advanced widget creation with Angular.js What are we missing? Please send us some of your ideas. We would love to hear from you. To submit your ideas, leave a comment below or email us at: info@newrocket.com

Understanding Instances

Widget Instances are a vital component of Service Portal, and although at first glance they seem simple, they can be quite powerful when utilized correctly. In simple terms, the widget instance record stores the location of the widget (which column) and the context needed for it to render. The context of the widget is comprised of the fields on the instance table as well as the "Additional options" field in JSON format. The additional options get generated based on the fields defined in the "Options Schema" on the widget, documented here. Each widget defines which instance table it will use along with which fields from that table. To set the "table" and "fields" variables on the widget, you must open the widget record in the standard ServiceNow UI form. See the example below from the  "Icon Link" widget which uses the "sp_instance_link" table. The following is the out-of-box instance tables available: Instance (sp_instance) Base instance table with the following fields: color, css, glyph, short_description, size, title, url Instance of Carousel (sp_instance_carousel) Instance primarily used by the carousel widget, has a related list of slides Instance of Simple List (sp_instance_vlist) Used by list widgets such as "Simple List" and "Unordered List" and contain fields specific to setting Tables and Filters Instance with Link (sp_instance_link) Used for creating widgets that act as hyperlinks, e.g. "Icon Link", with fields such as URL and references to commonly used tables Instance with Menu (sp_instance_menu) This is the instance used by the Header Menu (referenced from the Portal), but can also be used for any widget displaying a menu. It has a "Menu Items" related list. Instance with Table (sp_instance_table) The instances behind the Data Table and Count widgets, with fields for setting the Table and Filter You can also create your own Widget Instance table by extending "sp_instance" and referencing the new table and fields in a widget. If the table referenced on the widget is changed, it will NOT automatically update the existing instances, so you will need to remove the old instances and generate the new instances via the Service Portal Designer. Once completed, you will now see your custom instance fields when you view the widget Instance Options (CTRL + Click > Instance Options).

Creating an Angular Directive in Service Portal

Directives are one of the many important components available in Service Portal thanks to Angular.js. You've probably already used many of Angular's built-in directives without knowing it, such as: ng-repeat, ng-model or ng-class. But did you know you can also develop and use your own directives in your Service Portal widgets? To illustrate a very basic example, let's navigate to the "Angular Providers" module, and start by creating a new record with the following: Name: "spButton" Type: "Directive" Client Script: [crayon-5974cf8287682204917872/] To use your Angular Provider you will need to associate it with a widget by linking the two together using the "Angular Providers" related list on the widget form. Now you can use the directive within any of the HTML of that widget. For example: [crayon-5974cf828768b579035798/] Note: The name of the directive is camel-case "spButton," however when used in HTML, it needs to be hyphenated (e.g. spButton -> sp-button). Now when that widget is rendered, you will see the following button any time that directive is used: When this button is pressed, it will bring up an alert with the message, "Hello World".

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-5974cf8287ed6172297519/] Client Script: [crayon-5974cf8287ede177397331/] 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.