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:

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:

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/

65 comments

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

    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.

    Regards
    Niklas

  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 c.property .

    How to get sn-record-picker value.

    Rehards,
    Harish

  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?

    Cheers

    Andy

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

  10. Hi, excellent post!

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

    Thanks

    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.

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

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