Retaining pagination and scroll location after returning to page
Application Type
Traditional Web
Service Studio Version
11.11.7 (Build 45085)

I’m working on an application that has a table records and uses the pagination widget as well as page count widget. I was wondering if there is any functionality available in OutSystems that allows me to, for example, click into a link in the table, and if I come back it puts me back exactly in the same scroll location as well as the same page I’m on. For example, if I’m on page 3 halfway down the page when I leave, I want to come back on page 3 halfway down. Any help is appreciated!

Solution

Hi Justin Sumida,

I have tried your use case

Step1:  Since you have mentioned as Traditional web app, Add the Js to the expression in the screen where you need to the retain the Scroll position.

"<script>
$(window).scroll(function() {
  sessionStorage.scrollTop = $(this).scrollTop();
});

$(document).ready(function() {
  if (sessionStorage.scrollTop != 'undefined') {
    $(window).scrollTop(sessionStorage.scrollTop);
  }
});
</script>"

Step 2 : Set the Excape property to no

since the pagination is behave in the same way as expected.

I have tested above JS, works in chrome and Mozilla, other tools i haven't tested.

Herewith I have attached Url and Oml.

If any queries, pls let me know.

Hope it helps!


Regards,

Ellakkiya.S

OSMDb.oml

Hey Justin, you must save the scroll, offset position property in the cache, and manage that when you come back to the screen, this is just some help and theoretically must be that, sorry for not help you more

https://stackoverflow.com/questions/48061234/how-to-keep-scroll-position-using-flatlist-when-navigating-back-in-react-native

Regards,

Márcio

Solution

Hi Justin Sumida,

I have tried your use case

Step1:  Since you have mentioned as Traditional web app, Add the Js to the expression in the screen where you need to the retain the Scroll position.

"<script>
$(window).scroll(function() {
  sessionStorage.scrollTop = $(this).scrollTop();
});

$(document).ready(function() {
  if (sessionStorage.scrollTop != 'undefined') {
    $(window).scrollTop(sessionStorage.scrollTop);
  }
});
</script>"

Step 2 : Set the Excape property to no

since the pagination is behave in the same way as expected.

I have tested above JS, works in chrome and Mozilla, other tools i haven't tested.

Herewith I have attached Url and Oml.

If any queries, pls let me know.

Hope it helps!


Regards,

Ellakkiya.S

OSMDb.oml

Hi Justin Sumida,

Is there is any update on the issue? Have you solved it? 


Regards,

Ellakkiya.S

Hi Ellakkiya,

That worked perfectly! I had to change the selector to be the body vs entire window. So thank you so much!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.