Modify the Service Portal Report Widget to open records in the /sp/?id=ticket way

[david_stoner]

We're going to be upgrading to Jakarta in a couple weeks, which includes the new "Report" widget for the Service Portal that has people excited. However, in my sandbox instance (which is running Kingston Patch 1), when I open a record or list from a report on the Portal, it loads it in the UI16 view, rather than the Service Portal.

For example, I have a Calendar report on the Service Portal that shows a list of all Change Requests. When I select a Change record from the calendar, it loads it the record with the following URL: ...service-now.com/change_request.do?sys_id=...

What I would like it to do is load the record like it does when I select one of my tickets from the Header Menu -> Requests (URL: ...service-now.com/sp/?id=ticket&table=change_request&sys_id=...). It could even load the form view rather than the ticket view (id=form).

The reason for this is our end users are always redirected to the Service Portal and don't have access to the UI16 view. However, when they select a record from a report, they're redirected to the UI16 view of the ticket, complete with context menu and UI actions. This would provide them with unnecessary access and complication.

Any help/insight would be greatly appreciated.

[madhuri15]

Hi Jack,

I tried modifying client controller as per your instructions in cloned widget of the report. But, it is not working. My pie chart report is loading but onclick of any categories it is not redirecting to 'List' page of records with query. Can you please attach the widget copy where you have made changes?

Thanks in advance,

Madhuri

[Dom9]

I dont know if youre still active, but you are an absolutely champion. If I could mark this helpful twice, Id do it a million times. Thank you!

[Community Alums]

Hi Jack,

Thanks for your valuable input. I was able to make it work with a few changes on a Quebec release.

	// Wait for report to be loaded before updating onclick
	// Use $interval to search for chart of current report until it is found, then overwrite the onclick function
	var inter = $interval(function() {
		var chartContainers = document.getElementsByClassName('chart-container');
		for (var i = 0; i < chartContainers.length; i++) {
			if (chartContainers[i].id.indexOf(c.options.report_id) != -1) {
				// When found cancel the interval
				$interval.cancel(inter);
				// Update the onclick link
				c.updateOnClick();
			}
		}
	}, 100);

	c.updateOnClick = function() {
		Highcharts.charts.forEach(function(c) {
			// Only update current report
			if (c.userOptions.report_id == c.options.report_id) {
				// Pie chart
				if (c.types.indexOf('pie') != -1) {
					c.series.forEach(function(s) {
						s.options.point.events.click = function(event) {
							// history.pushState stops the full browser window reloading, you could use 'window.location =' instead 
							$location.search('id=list&table=' + event.point.table + '&filter=' + event.point.click_url_info);
							//history.pushState(null, null, '?id=grc_list&table=' + event.point.table + '&filter=' + event.point.click_url_info);
						};
					});
					// Bar chart
				} else if (c.types.indexOf('column') != -1) {
					c.series.forEach(function(s) {
						s.options.point.events.click = function(event) {
							$location.search('id=list&table=' + event.point.table + '&filter=' + event.point.click_url_info);
						};
						
						/* //not working
						s.hcEvents.click = [
							function(event) {
								$location.search('id=grc_list&table=' + event.point.table + '&filter=' + event.point.click_url_info);
								//history.pushState(null, null, '?id=grc_list&table=' + event.point.table + '&filter=' + event.point.click_url_info);
							}
						];
						*/
					});
				}
			}
		});
	}

If we use the $location instead of history, it solves the problem of going back and forth.

Another finding was, the "single score" chart is not rendered by high charts and therefore we need to create a function to disable the OOTB clickthrough on HTML and generate the right link via ng-click. 

HTML

<div class="report-widget-wrap" ng-class="{'disable-click': data.disableclick == 'true' }" ng-click="reportClickRedirect();">
	<div ng-if="c.showTitle" class="report-widget-title" ng-class="{'center-align': data.centeralign == 'true' }" >{{c.title}}</div>
	<div id="report-widget-{{::c.widget.rectangle_id}}">
     {{::c.initialMessage}}
  </div>
</div>

Client

	$scope.reportClickRedirect=function(r){	 
		if(c.data.overrideclick == "true" && c.data.overrideurl != ''){
			$location.search(c.data.overrideurl +'');			
		}		
	}

Server

	var overrideUrl = '';
	var rp = new GlideRecordSecure('sys_report');
	if(rp.get(options.report_id)){
		overrideUrl += 'id='+ data.redirect_page || 'form';
		overrideUrl += '&table=' + rp.table;
		overrideUrl += '&filter=' + rp.filter + '';
	}
	data.overrideurl = overrideUrl;

If you have any idea how to workaround this using a different method, please let me know

[Gopi Naik1]

Hi @Community Alums ,

I tried by using your code in Utah, But not working as expected. Could you please provide complete script which you used ? 

Thanks,

Gopi B