How to clear value or initialize snRecordPicker directive

[Anthony Sheculs]

I am using the <snRecordPicker> directive to help auto-populate a form using a listener. How do I clear the value of this directive?

The directive appears to store its name, display value, and value at $scope.location but clearing this does not initialize the field or clear its contents.

HTML
<sn-record-picker field="location" table="'cmn_location'" display-field="'name'" display-fields="'street,city,state,zip,country'" value-field="'sys_id'" search-fields="'name'" page-size="100" ng-readonly="c.submitted"></sn-record-picker>



CLIENT SCRIPT
$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);

[Anthony Sheculs]

After I submitted I was recommended an article which led me to this community thread:

https://community.servicenow.com/community?id=community_blog&sys_id=54bde6a9dbd0dbc01dcaf3231f96193f

It seems you can set an id on the directive and clear it as follows:

HTML
<sn-record-picker id='snRecordPickerID' field="location" table="'cmn_location'" display-field="'name'" display-fields="'street,city,state,zip,country'" value-field="'sys_id'" search-fields="'name'" page-size="100" ng-readonly="c.submitted"></sn-record-picker>



CLIENT SCRIPT

c.clearSnRecordPicker = function() {
$('#snRecordPickerID').val(null).trigger("change")
}

[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;					
});	
}
});