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:
| 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
58 Comments
