298
Views
5
Comments
Solved
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!

UserImage.jpg
Ellakkiya
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
2021-06-02 20-50-04
Márcio Carvalho

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

UserImage.jpg
Ellakkiya
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
UserImage.jpg
Ellakkiya

Hi Justin Sumida,

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


Regards,

Ellakkiya.S

2021-06-21 21-34-31
Justin Sumida

Hi Ellakkiya,

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

UserImage.jpg
Kevin Cabritit

That scroll worked. Im still trying to find a solution to keep the pagination session if possible.

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