Skip navigation

Developer Community

7 Posts authored by: Nathan Firth

Free Widgets.png

I'm excited to announce the launch of a new free widget download page on


Since day 1, 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.


If you haven't already checked it out, head on over to

Nathan Firth
Principal ServiceNow Architect


Thank you to everyone that was able to attend our CreatorCon breakout at Knowledge last week. It was great finally meeting so many of you.

Due to overwhelming demand, we are releasing the Presentation and Update Set for the theme we built during the breakout. To keep things simple, I’ve rebuilt the Update Set to not modify any of the out-of-box records and instead create new records. Also keep in mind this theme only styles the homepage and does not alter the content or layout.

Click here to get access to the theme:

Nathan Firth
Principal ServiceNow Architect

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.

  1. Select the Google font you want to use.
  2. Copy the font’s style sheet URL.
  3. Go to your theme and add a new CSS Include.
  4. Make sure the “Source” is selected to URL and then paste the CSS URL.
  5. Click save.

Now you can reference the font in your CSS.

Screen Shot 2016-09-28 at 5.02.38 PM.png


Option 2:

  1. 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.
  2. Use the “expert” option, then you will see an option for base64 encoding in the CSS section.
  3. Select “Base64 Encode.”
  4. 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.

Screenshot 2016-09-27 10.04.01

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

Nathan Firth
Principal ServiceNow Architect

We have been hard at work developing tons of new Widget functionality, and as some of you noticed in the recent “Gothenburg Theme” video, that we have developed the shopping cart functionality that has been missing from Service Portal. The good news is that we have now released this as an update set that can be applied to any portal.

The cart includes the following functionality:

  • Multiple quantity support for both “Buy Now” and “Add to Cart”
  • Cart preview dropdown in the theme header
  • Customizable URL’s for “continue shopping” and “successful order”
  • Ability to save and load a previously saved cart
  • Order on behalf of another user
  • Generate “Deliver to” from requested for users location
  • Many “Instance Options” to customize the widgets
  • Mobile cart icon when viewed on mobile devices


Check out some of the screen captures below. If anyone is interested, please contact us through for more information and pricing.

Screen Shot 2016-08-24 at 4.41.19 PM.png

Screen Shot 2016-08-24 at 4.24.52 PM.pngScreen Shot 2016-08-25 at 2.38.07 PM.pngScreen Shot 2016-08-24 at 4.26.35 PM.pngScreen Shot 2016-08-24 at 4.25.14 PM.png

Nathan Firth
Principal ServiceNow Architect

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:

<sn-record-picker field="location" table="'cmn_location'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>

It supports the following properties:

fielda JavaScript object consisting of “displayValue”, “value” and “name”
tablethe table to pull records from
default-querythe query to apply to the table
display-field (or display-fields)the display field
value-fieldthe value field (usually sys_id)
search-fieldsthe fields to search
page-sizenumber 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:


$scope.location = {
    name: 'location'

$scope.$on("field.change", function(evt, parms) {
    if ( == 'location') = parms.newValue;
    c.server.update().then(function(response) {     


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 on Share:

Nathan Firth
Principal ServiceNow Architect

One of the powerful features of the new Helsinki Service Portal is the integrated "record watcher" capability. This allows widgets to update in near realtime as the data changes in the database. In this tutorial we will build a sample To Do (task ) app that uses two widgets, one for creating records, and the second for showing the list of tasks.


Nathan Firth
Principal ServiceNow Architect

Last week at Knowledge I partnered up with Robert Fedoruk and Travis Toulson for the CreatorCon Hackathon. We had a blast and I think we did pretty well for only having 8 hours to put the application together. Our application was a real-time point of sale system on top of Service Catalog.

In many organizations, a good percentage of employees will still approach the help desk directly without going through self-service. This forces the help desk to manually create the requests on the spot. There isn’t really a quick and easy interface for this, so having a point of sale system would greatly expedite the process for face-to-face transactions with the help desk.

We built our application using Service Portal making use of record watchers and integrated it with the native mobile app for bar code scanning. It uses the Service Catalog and with no custom tables. The application was built with touch screens in mind with support for gestures. And best of all the whole application operates across multiple devices all in real time.

When the transaction is complete, it sends a push notification receipt to the users mobile device.

I don't think it’s just limited to point of sale, something similar could also be used for inventory management, supply chain management, warehouse management, etc. where managing products and inventory must happen in realtime across locations and devices.

What do you guys think? Would your organization use something like this? I'd love to hear your thoughts in comments below.

Nathan Firth
Principal ServiceNow Architect

Filter Blog

By date: By tag: