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:

PropertyDescription
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: https://serviceportal.io/downloads/snrecordpicker-example/

84 comments

      2. 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?

        Reply

  3. 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 🙂

    Reply

    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.

      Reply

  4. 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?

    Reply

    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.

      Reply

  6. 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 ?

    Reply

          1. Hi Nathan,
            I am also unable to upload the widget. I uncompressed the zip file.

  9. 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.
    Thnaks

    Reply

    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.

      Reply

  10. 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”
    }
    }

    Reply

    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″

      Reply

    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?

      Reply

      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.

        Reply

  11. 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.

    Regards
    Niklas

    Reply

  12. Hi Nathan,

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

    How to get sn-record-picker value.

    Rehards,
    Harish

    Reply

  13. 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?

    Cheers

    Andy

    Reply

  17. 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 !!
    -Sushma

    Reply

  18. Hi, excellent post!

    Quick question, where did you find the directive? Is there anywhere that lists out the available directives OOB?

    Thanks

    Reply

    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.

      Reply

  19. 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.

    Reply

  20. 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.

    Reply

  21. 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 nitishgoel.hcl@gmail.com
    Your help is appreciated !

    Thanks
    Nitish Goel

    Reply

  22. 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 ?

    Reply

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

      Reply

  23. 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=’person.name’ value= ’person.sys_id’
    When trying to do that I get empty values.
    Is it possible option or Incorrect usage?

    Thanks.

    Reply

  26. 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..

    Reply

  27. 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!

    Reply

  28. 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.

    Reply

    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.

      Reply

  31. 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.

    Reply

    1. > Did you unzip the file and upload the XML file?
      > Did you try setting a filter with “Loaded” to todays date?

      Reply

      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?

        Reply

        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.

          Reply

          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.

  32. 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.

    Thanks,
    Raj

    Reply

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

    multiple=”true”

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

    Reply

  34. 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)

    Thanks,
    Aparna

    Reply

  38. 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.

    Reply

    1. There are a few good examples that come to mind to do this, one by Nathan himself.
      https://serviceportal.io/using-events-communicate-widgets/
      https://community.servicenow.com/community?id=community_question&sys_id=78938765dbd8dbc01dcaf3231f961987

      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.

      Reply

  39. 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?

    Reply

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

    ng-change=”testing(this.name)”

    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){
    console.log(value);
    }

    This is cleaner and more simple.

    Reply

  42. 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

    Reply

  43. 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.

    Reply

  45. Using a property like c.data.setLocation 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 c.data.loc.sys_id instead of c.data.setLocation:
    c.data.loc.sys_id = 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.

    Reply

  47. 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.

    Reply

  48. 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

    Reply

  49. 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.

    Reply

  50. 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.

    Reply

  51. Hi Nathan,

    I want to map categories displayed on Idea portal to custom field created on Idea table.

    Once we create Idea from Idea portal I am able to select category there and which has entry in im_m2m_idea_category table but on Idea table custom category field remains empty. Please suggest what could be the right approach.

    Thanks
    Javed

    Reply

  52. Nathan, This is a great directive. I would like to know if there is an option to make the field mandatory. ie a red * if mandatory and nothing selected, grey * once an item has been selected.

    I’ve put a field decoration before the sn-record-picker that flips the * from red to grey based on selection. However, the field decoration always shows on a separate line. I would like it to be next to the sn-record-picker dropdown.

    Thank you in advance

    Reply

Leave a Reply

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