Record Picker not working in Modal

[Vikram3]

Hello,

I am creating a widget with Record picker. But it is not showing in modal window. Below is the code.

<div class="panel panel-primary">       
  <div class="panel-heading">       
    <h4 class="panel-title pull-left">       
      ${Watch list}       
    </h4>       
    <div class="clearfix"></div>       
  </div>                   
  <div class="panel-body">
    <form ng-submit="save()">
      <div class="text-center text-italic text-muted">
        <div>
          <sn-record-picker field="watch_list" sn-disabled="!data.canWrite" table="'sys_user'" display-field="'email'" display-fields="'name'" search-fields="'email'" value-field="'sys_id'" default-query="'active=true^web_service_access_only=false^user_nameISNOTEMPTY^emailISNOTEMPTY'" page-size="10" multiple="true"></sn-record-picker>
        </div>
        <div style="margin-top:15px; float: right;">
          <button type="submit" class="btn btn-success btn-sm">${Update}</button>
        </div>
      </div>
    </form>
  </div>
</div>

Below is the screenshot

Record picker is showing as a textbox.

[Josh Virelli]

Hi Vikram,

Would you mind sharing the Client Controller as well? Also, does the user you are testing with satisfy the condtion:

sn-disabled="!data.canWrite"

Here's an example of a the Record Picker you can read up on as well: https://serviceportal.io/sn-record-picker/

Thanks,

Josh

[Vikram3]

Hi Josh,

Below is the client controller code. I am not sure about that read access. I tried removing that part. Eventhough it is not working. FYI, I have admin access.

(function() {   
	var gr;   
	if(input){   
		gr = new GlideRecord(input.table);   
		if(gr.get(input.sys_id)){   
			if(gr.watch_list.canWrite()){   
				gr.watch_list = input.watchList;   
				gr.update();   
				gs.addInfoMessage('Updated');   
			}   
			else{   
				gs.addErrorMessage("Update failed, you don't have the required access");   
			}   
		}   
	}   
	else{   
		var table = $sp.getParameter('table');   
		var sys_id = $sp.getParameter('sys_id');   
		gr = new GlideRecord(table);   
		if(gr.get(sys_id)){   
			data.table = table;   
			data.sys_id = sys_id;   
			data.canRead = gr.watch_list.canRead();   
			data.canWrite = gr.watch_list.canWrite();   
			if(data.canRead){   
				var dV = gr.getDisplayValue('watch_list');   
				var sV = gr.getValue('watch_list');   
				//data.displayValue = dV == '' ? [] : dV;   
				//data.value = sV == null ? [] : sV;   
				data.displayValue = dV;
				data.value = sV;
			}   
		}   
	}   
})();

[Josh Virelli]

Hi Vikram,

I believe that is the Server Script. Can you please share the Client Controller code from the widget? It looks like the data.canWrite is just checking to see that the user has access to write to the Watch List. You can leave that part in your sn-record-picker directive I believe.

Thanks,

Josh

[Vikram3]

My bad. Apologies. Below is the code.

function($scope, spUtil, $http) {   
	var c = this;   

	$scope.watch_list = {   
		displayValue: c.data.displayValue,   
		value: c.data.value,   
		name: 'watch-list'
	};   
	$scope.save = function(){   
		c.data.watchList = $scope.watch_list.value;   
		c.server.update().then(function(){   
		});   
	};   
	spUtil.recordWatch($scope, c.data.table, "sys_id=" + c.data.sys_id, function(name, data) {   
		if(name.name == 'record.updated' && data.operation == 'update'){   
			$scope.watch_list.value = data.record.watch_list.value;   
			$scope.watch_list.displayValue = data.record.watch_list.display_value;   
			$scope.$apply();   
		} 
	});   
	$scope.$on("field.change", function(evt, parms) {
		if (parms.field.name == 'watch_list'){
		}
	});
}