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:

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:

$scope.location = {

      displayValue: c.data.loc.name,

      value: c.data.loc.sys_id,

      name: 'location'

};

$scope.$on("field.change", function(evt, parms) {

      if (parms.field.name == 'location')

              c.data.setLocation = parms.newValue;

      c.server.update().then(function(response) {        

              spUtil.update($scope);

      })

});

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: https://share.servicenow.com/app.do#/detailV2/86b23f151370e2001d2abbf18144b0aa/overview