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

Harish Murikina · ‎07-19-2017

Hi Amanda,

What i understood from this context is basically your having a page to search items and it display on the page. So you want URL instead of item details .

I am my understanding is correct , can you tell me what search criteria your using , are you using serviceportal https://serviceportal.io/full-text-searches-service-portal/

If that is the case you can display information as per your wish.

Regards,

Harish Murikinati.

amanda_l_webb · ‎07-19-2017

I wrote my own widget to search, so I am not using that one....but, it's a similar idea that I search and then bring up details. So, in that context, I would want to add what they search to the URL so that they can send that to someone else.

I do not have an issue loading from the URL. I know that you can use $sp.getParameter(param) to get the values, then I can load everything correctly. The issue is just changing the URL. My Portal is basically designed like a SPA. I have 3 widgets on there that play off each other. I just don't want the page to reload when I change the URL because it throws off the whole SPA concept.

In straight angular, I believe I would use ngRoute or ui.route to basically Ignore search changes on the URL. I have tried that method, but can't seem to get it right.

Rama Chandra D · ‎07-19-2017

I would suggest to look at the widget code of Data Table from URL Definition. It has the function on client side to set the permalink and change the URL without reloading the page.

Darshak

amanda_l_webb · ‎07-19-2017

I have looked at that one... and I tried to use the same pattern, but it was still reloading. The interesting thing is that they set a var called $scope.ignoreLocationChange, then never use it. So I seem to be missing where the magic sauce is in the widget. I will check it out again though.

Rama Chandra D · ‎07-19-2017

Hi,

I have checked mu cloned widget, these two functions are called when any sort is performed,

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);



   initRecordWatcher(f.table, f.filter);

   });

   }



   function setPermalink(table, filter, orderBy, orderDirection, page){

   $scope.ignoreLocationChange = true;

   var search = $location.search();

   angular.extend(search, {

   spa: 1,

   table: table,

   filter: filter,

   p: page,

   o: orderBy,

   d: orderDirection

   });

   $location.search(search);

   }

This code resides in the Data Table Widget. So you need to see which part of code calls these functions.This might not be the answer you are looking for but I hope, this might lead you in a right way. you can use spUtil.addInfoMessage() on client side to do any checks.

Darshak