Change Service Portal URL without reloading the page.

amanda_l_webb · ‎07-18-2017

Has anyone figured out how to change the URL without reloading the page?

I would like to alter the URL so that my users can send it out and it will pre-populate widget information. Problem is that it reloads. I have tried to figure out how to use ngRoute, ui.route, and history.pushState. All seem to reload the page. Any other thoughts?

Thanks!

Patrick Schulte · ‎09-23-2017

You are right, it seems like that the reason for this is that the $locationChangeStart events gets triggered more than once so you have to build a condition within the event listener.
What has worked for me is the following:

The event listener:

var originalUrl, initUrl;

$rootScope.$on("$locationChangeStart", function(e, newUrl){

         if(newUrl != originalUrl && newUrl != initUrl){

                   $window.history.replaceState(newUrl, $document.title, newUrl);

         }

         originalUrl = newUrl;

         e.preventDefault();

});

The URL change:

$scope.changeURL = function(){

         initUrl = $location.absUrl();


         //Set your desired URL parameters here, you could also extend the current ones with:         

         /*

         var params = $location.search()

         angular.extend(params, {

                   someParam:'test'

         });

           */       

         var params = {

                   someParam:'test',

                   anotherParam:'anotherTest'

         };


         //triggers the $locationChangeStart event

         $location.search($httpParamSerializer(params));

}

Dont forget to inject $document, $httpParamSerializer, $location, $scope and $rootScope in your controller.

Let me know if this worked out for you.

View solution in original post

Warren Shekyls · ‎11-20-2017

I found by adding the a parameter spa=1 it stops my app from reloading.

Essentially my app takes the URL parameters fed in, then removes them all, once it's dealt with the initial load.

So l was struggling with the widgets all doing their job, then cleared the parameters using $location.search() which caused the app to reload and the widgets to be blank.

So now I do this:

$location.search("spa", 1);

$location.search("id",null);

I wonder if you added the spa parameter as well it would work for you use case?

Dave L · ‎08-22-2019

You da real MVP!

brendanhamman · ‎05-13-2020

Commenting so I can find this answer again next time I have this use case.

Thanks Warrentu, works great for me.

(also, sup dave)

xiaix · ‎07-07-2020

Yes, spa=1 was the key!

$window.history.replaceState(null, null, "?id=tap_portal&spa=1&req_sid="+task.request+"");
$location.search("req_sid", task.request);
$location.search("spa", 1);

So I needed to pass a sys_id to a dynamically called in widget, and this is how I was able to get it done!

Patrick Schulte · ‎11-22-2021

That's really good to know. Additionally, if you want the change of the URL also to override the back button's behaviour (history) you can use the $location.replace() function like this:

var params = $location.search();
params.id = 'abc'
params.spa = 1;
$location.search(params);
$location.replace();

I actually needed this in another use case.