How to retain scroll position while navigating back
Question
Application Type
Reactive
Service Studio Version
11.10.0 (Build 34711)

Hi there,

I have a listing screen as shown in the below screenshot. It is using the List widget. When I click on the one of the items,  it will navigate me to the detail page and when I click back button in the detail page, it navigates back to the listing screen but the scroll is always at the top and not from the item I had navigated. However, this works as expected by going back to the exact scroll position in my personal environment but not in my work environment. 

Also I have set previous screen and reverse transition in both the environments. Service studio version is same for both my personal and work environment.

I would highly appreciate if someone could give a solution at the earliest. Thanks!!

Solution

Thank you all for the responses. Retaining scroll back position is available by default in latest OutSystemsUI. It was working for me when I updated. Till then I was using the below workaround by using Javascript on the client action which is navigation to another screen. 


While navigating back the previous page, the below was done


Hello Diyab, 

Check the MaintainScrollPositionOnPostBack property setting of the pages in the application in your work environment.

To work it must be set to MaintainScrollPositionOnPostBack = true


There are three ways of applying the property to a web page.

You can set it programmatically

Page.MaintainScrollPositionOnPostBack = true;

In the page declaration

<%@ Page MaintainScrollPositionOnPostback="true" %>

Or in the web.config´s <system.web> section.

<pages maintainScrollPositionOnPostBack="true" />




Hi Huarlem, 

Thanks for the info. Please may I know where I can check the web.Config? Do I have to download Factory configuration component from Forge?

Dear Diyab,


Another solution would be setting the clicked rownumber in a client variable and use something similar to this in the onrender of the screen


setTimeout(function(){

    var elem = document.querySelector("tr:nth-child("+ $parameters.Rownumber+")");

    if ( elem !== null ) {test.scrollIntoView({behavior: "smooth"});} 

    }, 500);


The timeout function is needed since react can take sometime to render.

The rownumber parameter is the one you want to scroll to.

I use something like this in one of my applications.


Kind regards,

Alexander



Solution

Thank you all for the responses. Retaining scroll back position is available by default in latest OutSystemsUI. It was working for me when I updated. Till then I was using the below workaround by using Javascript on the client action which is navigation to another screen. 


While navigating back the previous page, the below was done


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