How to keep the page scroll position even after refreshing pages (both Classic UI and Portal)?

[Aki18]

When refreshing page (both Classic UI and Portal), the page scroll position is lost and moved to the top position of the page, which is very inconvenient...
Is there any way to keep the scroll position even after refreshing Classic UI and Portal pages?

For example, in portal page, is there any method to define that function somewhere? (Maybe in the Client controller of the widget?)

Best Regards,
Aki

[Aki18]

hi @Markus Kraus ,

Oh, I forgot to do [Sync fork] before applying remote changes on Studio!

After syncing fork and then applying the change to SNow, the page scroll position is now kept!

Thank you so much for the amazing scripts! I think it's so useful for a lot of users.

*BTW: Is there any way to auto-sync fork and auto-apply remote changes?

[Markus Kraus]

@Aki18 You're welcome 🙂

Would you mind marking the response where I've posted the repo as the solution to this thread so other users facing the same issue can see that this is a solution?

In regards to keeping the repository automatically updated:

I've created yet another application which does exactly this: The ServiceNow Marketplace

However the target of this application is to distribute github repositories to multiple customers (My organization and I consult quite a number of customers). If you are an internal developer the application has quite a lot of reusable Flow Actions you can simply copy to implement a custom sync.

If you also support multiple customers, then the Marketplace is your thing because it does everything for you automatically and the setup is also described in detail (check out the wiki section on the marketplace repository).

If you do not support multiple customers, please do the following: 

1.) Create a personal access token on github (save this somewhere) (required scoped: repo)

2.) Create a REST API Endpoint on the servicenow instance which should perform the sync

3.) In The REST API Endpoint you need to script the following:

a) Sync your fork (using the GitHub Access token from step 1) 
Please check out the github "fork" API (hint: you need to do a call https://api.github.com/repos/<your name>/<fork name>/merge-upstream)

b) In addition to calling the github api, you need to use want to make the imported application automatically "apply remote changes". You can do this by using ServiceNows CICD API:
(please check out the REST API explorer api/sn_cicd/sc/apply_changes)

I can just emphasise again to check out the Marketplace Application in any case, all of the functionality you would need to build by hand is already existing there - just copy the steps you need if you are not going to use the full app.

[Ohki_Yamamoto]

Is there any way to realize a way to keep the scrolling position of the page on the portal?

[Markus Kraus]

The solution works with OOTB form + list page. The form/data-table widget has a "complete" event which I wait before i restore the position.

For all other pages, there is simply no such "on render completed" event, and thus I don't know when you can restore the position.
If you can fire such a even manually (e.g. via custom widgets), I want to give you some hints:
1.) Save the Position before Page Unload:
https://github.com/kr4uzi/ServiceNow-Scroll-Restore/blob/9614ecbe2cb167a35f30e36b33902ff54152916d/ee...

2.) Restore the Position:
https://github.com/kr4uzi/ServiceNow-Scroll-Restore/blob/9614ecbe2cb167a35f30e36b33902ff54152916d/ee...

Script to identify the "Scrolling Element":

function getScrollNode(node) {
  if (node == null) {
    return null;
  }

  if (node.scrollTop) {
    return node;
  } else {
    for (var i = 0; i < node.children.length; i++) {
      var x = getScrollNode(node.children[i]);
      if (x) {
        return x;
      }
    }
  }
}

[Ohki_Yamamoto]

Thanks for your reply!

I am running the UI Script on the CSM Portal, but $window.addEventListener('beforeunload', function (event)) is not firing properly. （It seems to not catch the 'beforeunload' event?)

Is it possible to use addEventListener in the portal?
I would appreciate it if you could give me a concrete image of the implementation.