Change Redirect when hitting browser "Back" button when in Service Portal

[Kevin McGartlan]

Hello, 

I have a requirement to change the way the browsers back button handles redirects when in the service portal. We currently have an issue where agents are forced to the first page of a list of records (incidents) when they press the back button. We would like them to be redirected to their last visited page. EX: An agent is on page 3 of incidents, they click into an incident to open it in service portal, and then are redirected to page 3 of incidents when they hit back button. 

Is this possible? I have tried this through UI Scripts and changing the widgets functionality, but nothing has worked yet. Please let me know if you need more details/information on this requirement. 

Much appreciated, thank you. 

[Josh Virelli]

Hey Kevin,

Are you using the OOB Data Table widgets? They put the page number in the URL as the parameter p=# so that when you navigate and come back, the page number will remain. See the image below. p=3 in the URL and I'm on the third page. Your browser should handle this history. Which browser are you using?

If you are using a different widget, you can handle the redirect similarly, by making a parameter for the page number in the URL.

If you are using Internet Explorer, note that there are performance issues, and ServiceNow officially does NOT recommend using this browser, and it could be the source of your issue.

Let me know some more information and I can help further if needed.

If my answer was helpful or answered your question, please mark it as 'Helpful' or 'Correct'

Thanks!

Josh 

[Kevin McGartlan]

Thank you for your answer here. We are not using the OOTB widget Data Table from URL Definition widget. However, we the data table widget we are using is cloned from there, we have just added several customization's. I've gone through the code on the widget itself, and I don't see where it's changing the URL or setting it. Where in the client controller or server script is that being done? 

[Josh Virelli · Accepted solution]

Can't say where it is in your customized widgets without seeing them. But I would recommend you look at the OOB widgets and try to bring in that functionality to your customized versions.

It's these two functions in the Client Controller that change the page/update url

	function getData(updateUrl) {
		var f = $scope.data;
		spUtil.update($scope).then(function(data) {
			f.view = data.view;
			if ($scope.options.fromUrl && updateUrl)
				setPermalink(f.table, f.filter, f.o, f.d, f.p);

			if ($scope.options.show_breadcrumbs && data.filterBreadcrumbs)
				$scope.$broadcast('widget-filter-breadcrumbs.setBreadcrumbs', data.filterBreadcrumbs.data, data.filter);

			initRecordWatcher(f.table, f.filter);
		});
	}

	$scope.setPageNum = function(num) {
		$scope.data.p = num;
		getData(true);
		$timeout(function() {
			$scope.focusOnTableHeader();
		});
	}

And these are called by the Angular HTML

        <div ng-if="data.num_pages > 1 && data.num_pages < 20" class="btn-group">
          <a ng-repeat="i in getNumber(data.num_pages) track by $index" ng-click="setPageNum($index + 1)" href="javascript:void(0)" ng-class="{active: ($index + 1) == data.p}" type="button" class="btn btn-default" aria-label="${Page} {{$index + 1}}">{{$index + 1}}</a>
        </div>

You'll probably just have to stitch back together the OOB version and your customized version.

If my answer was helpful or answered your question, please mark it as 'Helpful' or 'Correct'

Thanks!

Josh 

[Kevin McGartlan]

Hi Josh, 

I appreciate all of your help. I know this is a bit late, but I have a couple questions after trying to implement your suggestions:

1. Here's what my custom widget's Client Controller code looks:

var getData = function(data) {
        $scope.data.isLoading = true;
		//c.populateMenu();
        
		c.server.get({
			p: data.p,
			q: data.q,
			o: data.o,
			d: data.d,
			table: data.table,
			fields: data.fields,
			title: data.title
		}).then(function(response) {
			$scope.data.isLoading = false;
			angular.extend($scope.data, response.data);
		});
    };

 $scope.$on('data_table.click', function(e, parms) {
		var p = $scope.data.page_id || 'form';
		var s = {id: p, table: parms.table, sys_id: parms.sys_id, view: 'ess'};
		var newURL = $location.search(s);
		spAriaFocusManager.navigateToLink(newURL.url());
  });
  

And here's what the HTML looks like:

<div>
  <div ng-if="data.isLoading" style=""> 
    <div class="col-md-12 text-center"> 
      <span class="fa fa-spinner fa-spin fa-2x"></span> 
    </div> 
  </div> 
  <div id="issueCategory" class="buttons"> 
    <button type="button" id="intBtn" ng-class="{'selected-btn' : selectedBtn === 'intBtn', 'unselected-btn' : selectedBtn !== 'intBtn'}" class="btn btn-lg selected-btn" ng-click="openIncidents()" role="button">Incidents</button>
    <button type="button" id="crBtn" ng-class="{'selected-btn' : selectedBtn === 'crBtn', 'unselected-btn' : selectedBtn !== 'crBtn'}" class="btn btn-lg unselected-btn" ng-click="openCRs()" role="button">Change Requests</button> 
    <button type="button" id="ctBtn" ng-class="{'selected-btn' : selectedBtn === 'ctBtn', 'unselected-btn' : selectedBtn !== 'ctBtn'}" class="btn btn-lg unselected-btn" ng-click="openCTs()" role="button">Service Requests</button> 
    <button type="button" id="prbBtn" ng-class="{'selected-btn' : selectedBtn === 'prbBtn', 'unselected-btn' : selectedBtn !== 'prbBtn'}" class="btn btn-lg unselected-btn" ng-click="openProblems()" role="button">Problems</button> 
	<button type="button" id="pBtn" ng-class="{'selected-btn' : selectedBtn === 'pBtn', 'unselected-btn' : selectedBtn !== 'pBtn'}" class="btn btn-lg unselected-btn" ng-click="openPending()" role="button">Pending</button> 
  </div> 
  
  <div ng-if="data.dataTableWidget">  
    <sp-widget widget="data.dataTableWidget"></sp-widget>
  </div>  
</div>

I'm having some trouble trying to implement your changes. After seeing our customizations, do you have any insight on how to stitch the OOTB desired functionality into our custom widget? Here's an example how the getData function is being called to populate the different record tab lists: 

	 var getPendingTasks = function() {
        c.data.dataTableWidget = false;
        $scope.selectedBtn = 'pBtn';
        var data = {};
		data.p = 1;
        data.q = $scope.pendingQuery;
		data.o = 'number';
		data.d = 'desc';
        data.table = 'task';
        data.fields = 'number,priority,state,short_description,sys_created_on';
		data.title = 'Pending Tasks';
        getData(data);
    };

 Thank you so much for your help!