I am making custom widget for ticket page to add user to watchlist similar to the backend. I have been following few solution from the community. I am using sn recode picker and i want output something like in the attached image. And after adding user it should clear the field.
Html code
<div ng-if="data.canRead" class="panel panel-primary b">
<div class="panel-heading">
<h4 class="panel-title pull-left">
${Watch List Actions}
</h4>
<div class="clearfix"></div>
</div>
<div align="left" style="font-size: 12px; padding-left: 15px; padding-right: 10px; padding-top: 5px;">${Click in the white box below to add users and select the "Add to Watch List" button}</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="'name'" search-field="'email'" search-fields="'name'" value-field="'sys_id'" default-query="'active=true^web_service_access_only=false^user_nameISNOTEMPTY'" multiple="true"></sn-record-picker>
</div>
<div style="float:right; margin-top:15px;">
<button type="submit" class="btn btn-primary">${Add to Watch List}</button>
</div>
</div>
<div align="left" style="font-size: 14px; padding-left: 15px; padding-right: 10px; padding-top:5px; width: 200px" ng-if="data.response" class="alert alert-success">{{::data.response}}</div>
</form>
</div>
</div>
client script
api.controller = 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();
}
// spUtil.addInfoMessage("Your order has been placed");
});
};
server script
(function() {
var gr;
data.submitMsg = gs.getMessage("Add to Watch List");
// Check if user has the role to edit watchlist
function hasRoleExactly(role) {
var au = new ArrayUtil();
var roles = gs.getSession().getRoles() + '';
var roleArray = roles.split(",");
var isAuthorized = au.contains(roleArray, role);
return isAuthorized;
}
gr_roles = options.define_roles_that_can_delete.split(",");
for (var d in gr_roles) {
data.canremove = (hasRoleExactly(gr_roles[d]));
if (data.canremove == true) {
break;
}
}
// if(input && typeof input.watchList != 'undefined')
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('Selected users are successfully add to watchlist');
data.response = 'Selected users are successfully add to watchlist.';
}
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){
data.displayValue = gr.getDisplayValue('watch_list') || '';
data.value = gr.getValue('watch_list') || '';
}
}
}
})();
