Add editable watchlist to portal tickets

Chuck S2
Giga Contributor

I would like to make the watch list on the tickets on the service portal editable (after submission). I reviewed a thread that was started 4 years ago and tried to follow that thread and populate the various Client and Server script fields accordingly, but nothing is showing on the portal. I am pretty much a newbie at service portal. Any help would be appreciated. Thanks! 

1 ACCEPTED SOLUTION

Hi Chuck, 

The following are the widget modifications that we made, you can place this into the relevant fields on the widget form. 

Body HTML Termplate: 

<div class="panel panel-primary" ng-if="data.canRead">
  <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-primary post-btn ng-scope">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

Server Script: 

(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 sys_id = (input && input.sys_id) || options.sys_id || $sp.getParameter("sys_id");
		var table = (input && input.table) || options.table || $sp.getParameter("table");
		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;
			}
		}
	}
})();

Client 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();
				}
			});
		});
	};
	$scope.$on("field.change", function(evt, parms) {
		if (parms.field.name == 'watch_list') {}

	});
};  

 

 

 

This result in a widget that has only valid users in there. If you wish to change which users are filtered, check out the default-query in the HTML Body

default-query="'active=true^web_service_access_only=false^user_nameISNOTEMPTY^emailISNOTEMPTY'"

 

This if done correctly, you'll get a widget like the following: 

find_real_file.pngfind_real_file.png

find_real_file.png

 

 

Hopefully the above is helpful!

Thanks,

Mike

View solution in original post

12 REPLIES 12

Hey Chuck, 

Looking good! 

 

I think you'd have to amend the widget to exclude that watchlist however, this is diffucult to guide you through. 

I'd recommended doing some reading on widgets etc. and jumping in a PDI to have a play around. 

 

Thanks,

Mike

The latest ticket I created did not have the original watchlist, only the newly created one, so that is exactly what I wanted. I hope it stays that way. Thanks for all your help.

Awesome glad you got it sorted! 

Mike,

Do you know if you can make this work to select users (any active users) rather than email? When we enter an email, the user still cannot see the ticket, but when we add them directly to the watchlist (as the user), then they can see their watched tickets on the portal. 

Hi Chuck, 

The following are the widget modifications that we made, you can place this into the relevant fields on the widget form. 

Body HTML Termplate: 

<div class="panel panel-primary" ng-if="data.canRead">
  <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-primary post-btn ng-scope">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

Server Script: 

(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 sys_id = (input && input.sys_id) || options.sys_id || $sp.getParameter("sys_id");
		var table = (input && input.table) || options.table || $sp.getParameter("table");
		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;
			}
		}
	}
})();

Client 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();
				}
			});
		});
	};
	$scope.$on("field.change", function(evt, parms) {
		if (parms.field.name == 'watch_list') {}

	});
};  

 

 

 

This result in a widget that has only valid users in there. If you wish to change which users are filtered, check out the default-query in the HTML Body

default-query="'active=true^web_service_access_only=false^user_nameISNOTEMPTY^emailISNOTEMPTY'"

 

This if done correctly, you'll get a widget like the following: 

find_real_file.pngfind_real_file.png

find_real_file.png

 

 

Hopefully the above is helpful!

Thanks,

Mike