Using Custom Fonts In Service Portal

A question that I get asked a lot is how to use custom fonts in Service Portal. Here are the three primary ways: Option 1:  The easiest option is through Google Fonts. Select the Google font you want to use. Copy the font's style sheet URL. Go to your theme and add a new CSS Include. Make sure the "Source" is selected to URL and then paste the CSS URL. Click save. Now you can reference the font in your CSS. [crayon-5dac41e33b9a0914176159/] Option 2: You'll need to encode your fonts using base64 and then include them in the CSS Includes of your theme. You can use this free tool by Font Squirrel: Create Your Own @font-face Kits | Font Squirrel. Use the "expert" option, then you will see an option for base64 encoding in the CSS section. Select "Base64 Encode." Once exported, add the generated code as a CSS include on your theme. For more information see: Learn how to create custom CSS in your theme here.   Option 3: Another approach is to upload your font files as attachments to the CSS Includes record and then reference them with "" and passing in the sys_id as a parameter. See the following example:   For additional information on CSS fonts, here's an article that I have found to be very helpful. If you find this useful, let me know in the comments below.

Modal Windows in Service Portal

Modal windows in Service Portal are based on the BootstrapUI directives. For further documentation see: Below is a simple example of how to open up a modal window: Controller: [crayon-5dac41e33cd31122319226/] HTML: [crayon-5dac41e33cd38252802648/] Notes: Make sure the $uibModal service and $scope is included in the controller. In this example the modal template is just included in the HTML, but you could also set the "templateURL" property to an ng-template associated with this widget. You can manually pass in the scope to the template using the "scope" property.

Navigating Multiple Service Portals

A common question I get asked is how to link between two portals. Simply linking to the URL will not work due to Angular.js handling the routing. The easiest solution for this is to use target="_self" attribute on all hyperlinks: [crayon-5dac41e33f47d352350946/] If you would like to redirect from within a widget client controller, you can use: $window.location.href:  HTML: [crayon-5dac41e33f484998234530/] Controller: [crayon-5dac41e33f488223111157/]  

Reference Fields with the snRecordPicker Directive

One of the very powerful directives available in Service Portal that we will be covering today is the snRecordPicker. This directive generates a field very similar to a reference field in the platform. This is very useful when creating custom widgets that will be interacting with tables and records in ServiceNow. The Directive: [crayon-5dac41e340602545293185/] It supports the following properties: Property Description field a JavaScript object consisting of "displayValue", "value" and "name" table the table to pull records from default-query the query to apply to the table display-field (or display-fields) the display field value-field the value field (usually sys_id) search-fields the fields to search page-size number of records to display in dropdown   To use the snRecordPicker you will also need to create the "field" object in your controller as well as listen for the "field.change" event. The Controller: [crayon-5dac41e34060a051261410/] The Widget: I've created a sample address picker widget that allows the user to select a location, and then retrieves the record from the server and populates several other fields with the information. The widget is available for download here:

Geneva Service Portal – Creating a “Hello World” widget

In this tutorial I create a simple Hello World widget that makes a call to the server to retrieve the "name" of the user based on the "username" entered in the input. This tutorial is specific to the Geneva version of Service Portal. Also in case you missed my big announcement made earlier today: I'm now available for contract work. HTML Template: [crayon-5dac41e3437d6262468172/] JSON Data Producer: [crayon-5dac41e3437dd508365824/] Client Script: [crayon-5dac41e3437e2057597030/]