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:

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:

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:


      1. Hi Nathan,
        i’ve done download the example but it does not working on my instance. it says “Info MessageFile ._snrecordpicker address widget.xml is not valid XML and has been deleted”. Can you help me please?

  1. Hi Nathan,

    I tried using the widget after downloading the xml and previewed it correctly. However, when I dragged the Widget into a page, the dropdown box became a text box and is located on the far left. Is this the normal behavior? Am I missing something?

    PS a big fan of your work 🙂

    1. Was that just in the designer or did it actually render like that when you viewed the page? If you open your Chrome developer console do you see any errors? It should just work out-of-box and look just like the image in this post.

  2. Nathan – This is pretty awesome, and I think it will solve my issue with the ref_ac_columns not displaying on the mobile UI. Since that doesn’t seem to be something SN will update.

    Will the data from the picker populate in the variable if I use the widget in the variable?

    1. Jared,

      What’s your problem with the ref_ac_columns and is that issue on mobile still through Service Portal? If you reference this widget from the variable directly, it will not populate automatically… you would have to manually set it up in the widget that you are embedding.

  3. Hi Nathan,

    i downloaded the xml, but not able to upload using retrieved update sets. I’m not sure what went wrong. could you please help. Do i need to upload it through retrieved update set ?

  4. Hi Nathan,
    How can I access the value selected in the sn-record-picker dropdown? I want to save it as a property of the object that I’m then inserting in another table through an HTTP request.
    I tried giving it an id and accessing to its .value through jquery but didn’t work.

    1. If you take a look at my code I already get the value of the input in the controller (line 9). You cannot access the value using jQuery.

  5. Hi Nathan,

    Thanks much for the tutorial.

    When I use multiple display fields ‘name,email’, default display value of the record picker gives only sys_id of the user. When I use only ‘name’ as the display value, default display value gives me name of user which is working as expected.

    When I change and select a new value in record picker, the display value is showing name of the user as expected but when the old value is selected again, it gives sys_id as the display value.

    Any easy fix for this? Because when the page is loaded, the field (record picker) has a default value and it should display name of the user rather than a sys_id.

    HTML tag:
    Picker comes in TD tag under a ng-repeat of tag

    JSON object:
    data : {
    number : “INC0000052”,
    priority : {
    displayValue : “1 – Critical”,
    value : “1”
    read_only : false,
    short_description : “SAP Financial Accounting application appears to be down”,
    sys_id : “d7195138c0a8016700fd68449cfcd484”,
    ticketAssignedTo : {
    displayValue : “System Administrator”
    name : “assigned_to”
    value : “6816f79cc0a8016401c5a33be04be441”

    1. SN Picker tag did not get pasted here….so pasting it below without angle brackets…

      sn-record-picker field=”ticket.ticketAssignedTo” table=”‘sys_user'” display-fields=”‘name,email'” value-field=”‘sys_id'” search-fields=”‘name,email'” page-size=”100″

    2. I tried below and it works as expected…. I can see name as the display value instead of sys_id. At the same time, am able to see email as well as name during search.

      Am using both display-field as well as display-fields

      sn-record-picker field=”ticket.ticketAssignedTo” table=”‘sys_user'” display-field=”‘name'” display-fields=”‘name,email'” value-field=”‘sys_id'” search-fields=”‘name,email'” page-size=”100″

      Am I using it right?

      1. Hi Maheshwar,

        I had the same issue: when try to user several fields with the attribute “display-fields”, the sys_id is displayed. But when I use both “display-field” and “display-fields”, I don’t have the sys_id anymore when the value is selected. Thanks.

  6. Hi Nathan,

    Any suggestions on how to make the default-query for the sn-record-picker dynamic? I’m trying to use a data variable from the server script but it gets ignored.


  7. Hi Nathan,

    How to i retrieve the “sn-record-picker” value in client side .
    For ex if it is text then we can get .

    How to get sn-record-picker value.


  8. Hi Nathan,

    I’m trying to recreate this for the incident table.

    I’m using the display-fields property to display both the number and short_description.

    But the numbers are displayed correctly yet the some of the short_descriptions are tabbed across, some more than others.

    Any Ideas?



  9. Hi Nathan,

    I’am referring sys_user table, How do we auto-populate currently logged in user name in sn-record-picker.

    Much thanks in advance !!

    1. Well… I worked on Service Portal so I helped implement many of the directives. But the best way for you is to review the widgets as they will most likely all be used in there, or you can look through the loaded JavaScript code since all the directives are client side and available for viewing through Chrome Dev Tools.

  10. Hi Nathan,

    Not able to use ng-model directive in this tag.

    How can I access the value of this reference field in the script as I want to create a record in ‘Delegate’ table with the ‘delegate’ value as this value selected in the reference field once I click on SAVE button present in the same webpage.

  11. As always thanks Nathan.
    I have just come accros what looks like an issue on Helsinki.
    I wanted to use a calculated field for the display and search fields. The list gets populated with the correct number of entries based on my default-query. However the item remain blank. If I use a different search field, I can “blind test” the search.
    I have not tested on Istanbul.

  12. Hi Nathan ,

    I tried the code that you pasted above & i am getting a simple text field i dont know where i am doing it wrong , i don’t have HI credentials , can you please post the whole code if something is missing in the above code
    or email it to me at
    Your help is appreciated !

    Nitish Goel

  13. Hi Nathan,

    Can you please help me with the data-binding part within sn-record-picker ? Not able to use ng-model directive in this tag. In that case how do we get the value that is being selected using the sn-record-picker ?
    Any suggestions ?

    1. Just like the post shows, when a selection is made it broadcasts an event that you listen for, and includes the users selection.

  14. Hi,
    First, thanks for the uses-full directive 🙂
    I would like to ask a question:
    Is there any option to use reference fields in sn-record-picker widget?
    For example:
    display-field=’’ value= ’person.sys_id’
    When trying to do that I get empty values.
    Is it possible option or Incorrect usage?


  15. Can be sn-record-picker be used on a public widget, on a table with a read role of public? I have not been able to get it to work so far..

  16. Hi! I would like to know how can I personalize the styles of the Record Picker. Basically I can do it on the first part (where it’s placed my selected option) but I can’t do it on the part with the Search box and the list results. CSS is doing nothing.
    Thank you!

  17. Hi Nathan and everyone,

    Do we have an option to make distinct on the values of the drop-down list when using sn-record-picker directive, in order to avoid multiple values?

    We used this directive, and need to do group by on the filed.
    Can we do it via this directive?

    thanks a lot.

    1. Not that I know of… you could maybe do a Database View and point the directive at the View. That’s the only thing I can think of.

  18. Hello,

    I have tried importing it on the latest SNOW version and after import, I’m not able to find it in the retrieved update sets.

      1. I’m having the same problem. Try to import update set from XML, and it’s not showing in the list, so I am unable to preview and commit. Any suggestions?

        1. Wow, I just tested this myself and yes… something is broken about importing older update sets. I will need to go through and update all the update sets to work in London.

          1. I was able to upload the update set, but something else was weird, it didn’t give me the confirmation that it uploaded it just took me to the list view. I thought it didn’t work so I started cutting and pasting code and noticed later that it was in the list view. So I assume it did upload, but with no confirmation.

  19. Hi Nathan,

    I need to get two field values in widget and populate onto Short Description field how can we populate the data selected by the user.


  20. Its worth noting that you can set up the record picker to allow you to select multiple entries – just add the following property:


    I spend a long time trying to find this out in the community so thought other may find this useful here as well

  21. Hi,
    I have used record picker to populate a reference field as follows:

    And im able to fetch the values for the reference field.
    How can i pass this value on the incident form field (u_primary_stream_value)


  22. How would you go about broadcasting that information to another widget from the client controller. I am having an issue that from the client controller it is not seeing the values as it does with the HTML section.

    1. There are a few good examples that come to mind to do this, one by Nathan himself.

      Broadcast is the easiest way to set something up like this, but you also have spEventPubSub as an Angular provider to use, so you can send / receive directed communications (AKA not broadcast to the entire scope). The complexity in this case comes from having to publish, subscribe to, and unsubscribe from events which you want to use.

  23. I have a question regarding directive sn-record-picker, is it possible to have multiple values for search-fields
    For example, for a user field I want to search based on the name as well as id in the same field.
    Is it possible to do so?

  24. There is a better way to pick up updated data angularJS style 🙂
    just add this to the HTML component:


    Where “testing()” is just a function you create on the client.
    and “this” referes to the change and then “.name” what field it was binded to.

    Here is full example:

    The HTML:

    Client script:
    $scope.testing = function(value){

    This is cleaner and more simple.

  25. Hi,

    My sn-record-picker does not start loading values unless at least 3 characters are typed. It does not load values in the dropdown by default. Any idea on this ? I want it show values in the dropdown list and then filter when I start typing. Please help

  26. You can also make this a startswith query rather than the default contains type query. More efficient that way. Add startswith=’true’ in the directive tag.

  27. Using a property like is a bit redundant and unnecessary. I think it is better to use the existing property as follows:

    On the client controller we can reuse instead of = parms.newValue;

    Then on the server:
    //if the client does a server update then input.loc.sys_id will be populated by parms.newValue
    if(!input || !input.loc || !input.loc.sys_id) input = {loc:{sys_id:gs.getUser().getRecord().getValue(‘location’)} };// use input.loc.sys_id to store initial value if input.loc.sys_id doesn’t exist
    var locGR = GlideRecord(‘cmn_location’);
    if(input.loc.sys_id && locGR.get(input.loc.sys_id) ) {//ensure the input.loc.sys_id exists and that the get function returns true
    $sp.getRecordDisplayValues(data.loc, locGR, ‘sys_id,name,street,city,state,zip,country’);

    This makes it clean and simple without extra properties.

  28. How can I use this to create a new record to another table. For example, I need a button, “Add”, that will capture the selected location and the logged in users ID to create a record on a custom table.

  29. please excuse my lack of experience. In the client controller where does the loc come from. Is it a variable you declared elsewhere or part of the SPUtil

  30. Can I increase the number of records to be displayed in the record picker.
    I have a field which is giving an error in record picker as it’s number is going beyond 100.
    I tried changing the page-size=”100″ to page-size=”250″ , but still the issue persists.
    Please help.

  31. Hi guys.

    If I use table=”‘notGlobalTable'” the “sn-record-picker” returns “No matches found”.
    If I use table=”‘GlobalTable'” the “sn-record-picker” works fine.
    Is it possible to get values from scoped tables?

    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *