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

[Sheldon Swift]

I don't think so, as this would require intelligence translating to the underlying database query. In mariaDB, as in mySQL, we use CAST or CONVERT to do something like this. I think your best bet is to determine if it is possible to convert the Integer field to a String field.

[Nen]

Hi, thank you so much! Will have to consult this to the other team since we don't own the table. But you're right, it'll be easier to just change the field to a String but we'll have to wait for their response.

If they don't allow us to, then we can't use the snRecordPicker for this one. Do you know another workaround for this? Like maybe using a select tag and then creating our own function to "auto-search" the field? But I figure that'll be a lot of work.

[Mahalakshmi Anb]

Hi Guys,

How can I override the "height" of the dropdown which is mentioned the class ".select2-results" for the "sn-record-picker"?

<sn-record-picker>

I wanted to override the "Height" of the bootstrap class ".select2-results" in my custom widget so that, the dropdown results are not displaying with the height of "200px" which is basically coming from the bootstrap class.

Any ideas would really be appreciated !!   Many thanks in advance !!

[Sheldon Swift]

It depends on where you're implementing. For a Service Portal page, it should be as simple as adding something like this to the Page Specific CSS:

.select2-results {
    max-height: 400px;
}

If you have multiple select2 elements on the page and do not want this change to apply to all of them, there will be additional considerations, but if you want to keep it simple each of these elements gets it's own id (e.g. select2-results-1, select2-results-2, etc.).

[martin kader]

How can I use the sn-record-picker to create a new record on a custom table? I want to pass the sys_id frmo the locations table and grab city, state, and zip. After that I want to pass those values with a button click, "Create", to a custom table.

[Hardik Panchal]

Can we increase the page-size beyond 100 here.

I have a record picker which will bring up more than 150 records on a certain condition.

It works when the records are less than 100, but it keeps on loading and never shows any records if the number goes beyond 100(the console throws an error 400 (Bad Request)).

I tried increasing the page-size to 250, but it still gives an error.

<div class="form-group">
<label for="productLine">${Product Line:}</label>
<sn-record-picker field="productLine" table="'cmdb_model_category'" default-query="'sys_idIN'+data.productLine" placeholder="Select Product Line" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="50" ></sn-record-picker><br />
<label for="product">${Product:}</label>
<sn-record-picker field="product" table="'cmdb_model'" default-query="'sys_idIN'+data.product" placeholder="Select Product" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="250" ></sn-record-picker><br />
<label for="category">${Category:}</label>
<sn-record-picker field="category" table="'sys_choice'" default-query="'element=u_category^name=u_software_downloads^language=en^inactive=false^valueIN'+data.category" placeholder="Select Category" display-field="'label'" value-field="'value'" search-fields="'label'" page-size="50" ></sn-record-picker>
</div>

Please help.

Thanks.

[chantelle]

Hi Hardik, did you ever find a solution for this?

[DB1]

Hello All,

I have a custom widget with select box using sn-record-picker.. However, the selected/ chosen value still stays whenever the Modal opens. The requirement is to empty the value every time the Modal opens.

Observation: The field populates correctly but if I do not submit the Modal instead cancel it or close it and open it for the second time(without refreshing the page) the username does not clear out. It stays with the last chosen username value. I want that to be emptied in such instances.

HTML

<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="firstname"><b>User Name</b></label> 

<sn-record-picker field="c.addUsr.firstname"
table="'sys_user'"
default-query="data.existUserid"
display-field="'name'"
display-fields="'email'"
value-field="'sys_id'"
search-fields="'name,email'"
page-size="100"                 
>
</sn-record-picker>

</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" class="form-control" name="email" disabled required ng-model="c.addUsr.email1">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" style="color:white;" ng-click="c.addExistinguser(n)" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
</div>

Client

c.addExistinguser=function(n){
c.data.user = {value: c.data.user.name, displayValue:c.data.user.sys_id};			
c.data.action = 'addexistingUser';
c.data.exUser = c.addUsr;
//console.log(c.addUsr);
//console.log(n);
//c.closeexistingUserform(close);		
c.server.update().then(function(){
c.getUserlist();
});
}

//Onload function to populate values
$scope.$on("field.change", function(evt, parms) {			
//console.log(parms.newValue);
c.data.usersysid = parms.newValue;
if(parms.newValue =='')
{
c.addUsr.email1 = '';
c.addUsr.title = '';
c.addUsr.busiphone = '';
c.addUsr.timezone ='';			
}
else{
c.data.action = 'fetchexistingUser';
c.server.update().then(function(){	
c.addUsr.email1 = c.data.existingUser[0].email;
c.addUsr.busiphone = c.data.existingUser[0].busphone;	
c.addUsr.title = c.data.existingUser[0].title;	
c.addUsr.timezone =c.data.existingUser[0].time_zone;					
});	
}
});