Reference Fields with the snRecordPicker Directive

[nathanfirth]

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

[jxsaxton421]

Actually I have used it in a scoped app and it does work. Perhaps Servicenow fixed it but if it's still not working it's probably a problem with the way things are named in the directive. It could be the scope problem as the post mentions. 

[jboiteux]

How would you get something other than the sys_id?

[byoung]

If I understand the ask correctly, you are pulling a field into the record picker that is showing you a sys_id rather than the display value you are hoping for, such as the sys_user field. Looking at the record picker info sample below, specifically the display-field="'name'" portion, this is where you specify the property to display. If you are looking to change the returned value rather than the display value, then the value-field="'sys_id'" portion is what you would need to change. If that does not answer your question perhaps you could include an example of the record picker you are working with and some further detail on your requirement?

record picker sample:
<sn-record-picker id="updateSet" placeholder="Select an update set" field="name" table="'sys_update_set'" display-field="'name'" display-fields="'application,state,description'" value-field="'sys_id'" search-fields="'name'" page-size="20" default-query=""></sn-record-picker>

[jboiteux]

Hi,

Below is a post with more details on my ask.  In short I am attempting to get the values of other fields on the table and for right now I am attempting to just display it in the console.  The problem that I am having is that when I select the first record, within the client controller it does not provide me the expected values.  When I click the next record, it provides me the values of the first.  When I click the 3rd it provides the info for the 2nd.  It seems to be showing me the information for previous.  However, within the HTML it provides the correct information.  I need to obtain the value to broadcast it to another widget.

https://community.servicenow.com/community?id=community_question&sys_id=3cd50130db08bb0823f4a345ca961994

[Henry Thomas]

For whatever reason this didn't work for me (in Kingston)

What did work was $('#rp1').val(null).trigger("change"); which I found here

[xiaix]

Yep, same here... works in my scoped app just fine (Madrid)

[Shane J]

What did you end up doing here Peter?

[petercawdron]

I don't know, but it works... perhaps ServiceNow updated the widget? But if I compare the code I posted above with this widget it's the same (and working)

I've included the widget in case you're interested. It allows you to document the contents of an update set so it's pretty useful, but you'll see the sn-record-picker is exactly as it is above -- and working fine!

[Sheldon Swift]

Hi Naina,

I see that this is a fairly old post and you've likely figured it out by now, but in case it will help others I've provided an example below based on what you've provided (note that the Department field is deliberately disabled until the Division is selected):

Body HTML template

 <div class="row">
   <div class="col-md-6">
     <label class="control-label required">Division</label>
     <sn-record-picker id="division" field="division" table="'core_company'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" default-query="''"></sn-record-picker>
   </div>
   <div class="col-md-6">
     <label class="control-label required">Department</label>
     <sn-record-picker id="department" field="department" table="'cmn_department'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" default-query="'company=' + data.division_sys_id" sn-disabled="!data.division_sys_id"></sn-record-picker>
   </div>
 </div>

Client controller

function($scope) {
  var c = this;

  $scope.division = {
    displayValue: $scope.data.division_name,
    value: $scope.data.division_sys_id,
    name: 'division'
  };

  $scope.department = {
    displayValue: $scope.data.department_name,
    value: $scope.data.department_sys_id,
    name: 'department'
  };

  $scope.$on("field.change", function(evt, parms) {
    if (parms.field.name == 'division') {
      if (c.data.division_name != parms.newValue || !parms.newValue) {
        $scope.department.displayValue = '';
        $scope.department.value = '';
      }
      c.data.division_name = parms.displayValue;
      c.data.division_sys_id = parms.newValue;
    }
  });
}

[americo]

Good job, I appreciated you posted this example, I'm new to Service Portal, would you suggest any links or material to refer to?