Video: 005 – Restore screen position after refresh

Picture a Report and Form pages used to edit records. The Report is an Interactive Report and the edit page is Modal. When the modal closes the IR refreshes, but also, the page jumps to the top after the refresh. This happens in APEX 5.0.4.00.12. If your report is small this is never an issue, but with longer reports, this is pretty annoying to the user.

I wouldn’t be surprised if this gets fixed in a not so distant new version of APEX, but in the meantime, here’s a simple workaround. Oh and if you have any recommendations, improvements, questions, or suggestions I would love to hear about them.

Check out the demo.

I think my friend Gemma Wood first told me about this fix. I couldn’t find the actual code she shared with me, but the basic approach is pretty simple. Save the scroll position of the page before you open the modal page. Restore the scroll position after the refresh.

Here are the more detailed steps or, if you like, watch the video below:

  • Add a JavaScript variable to your page (use the “Function and Global Variable Declaration” field). We’ll use it to remember our scroll position.

  • Add a DA on click of the link used to invoke a modal page. It will save the current scroll position, so call it “Save Scroll Position”

  • Create an “After Refresh” Dynamic Action to restore the postion.

005 – Save screen position after refresh from Jorge Rimblas on Vimeo.

Hi, I’m Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc…

I’m a Senior APEX Consultant with Insum Solutions, a consulting firm specialized in Oracle databases and the APEX development tool. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

29 comments on “Video: 005 – Restore screen position after refresh
  1. Peter says:

    You can do the same for report regions with a scrollbar. Just use the region static ID as the jQuery selector.

  2. Bhavin Adhvaryu says:

    Hi Jorge,

    Nice one..! However I tried same way as you described in your video but doesn’t work. Could you please help?

  3. fridolin says:

    Hi Jorge,
    what happens when one or more records will be deleted by another user when editing the record ? The position might be wrong ?
    fridolin

    • Hi Fridolin,
      Thank you for the question. Yes, if one or multiple records were deleted, in a sort order higher than the user’s record position.

      tr.highlight td {
      background-color: #ff0;
      }


      // Add this as another JavaScript true action after saving the position
      // Un-highlight previous rows
      $("#savePositionIR").find("tr.highlight").removeClass("highlight");
      // Highlight the selected row
      $(this.triggeringElement).parents("tr").addClass("highlight");

      I’ve added this to the app now.

  4. David says:

    Hi Jorge,

    Thanks for the help with this.

    I had to make a few minor modifications to get it to work for me.

    Function and Global Variable Declaration:
    var savepos = localStorage.getItem(“savepos”);

    Save Scroll Position Javascript Code:
    savepos = $(window).scrollTop();
    localStorage.setItem(“savepos”, savepos);

    • Hi David,
      Thanks for the feedback. That’s an interesting change to use local storage. You were probably navigating to a different page. I’m glad you shared this solution.
      -Jorge

  5. Yokanand says:

    Hi Jorge,

    I am working on interactive report in Apex. My interactive report has pagination of size 10. This report has page link in one of the columns and opens a Modal dialog on click. I have a refresh region action on closing this modal dialog and the screen always goes to the first section of pagination. For Ex: I have pagination of 10 and when i am in section 10-20 and work on a report and close the modal dialog, the screen goes to first section (1- 10). I do not know how to stay in the same pagination section after refresh. Is there a way to achieve this?

    Thanks,
    Yok

  6. Amaya says:

    Jorge,
    If I need to capture x e y, because my reports have more columns?
    How can do that?

    • Interesting problem. I haven’t explored side scrolling.
      There’s a jQuery .scrollLeft(); as a counter part to scrollTop
      However, on UT for example, the window may not be scrolling sideways. Your report may be inside a div with overflow. It may take some research and you may need to use a different selector.

  7. Hi!
    Appreciate You for Your working idea!

    It’s interesting, why it doesn’t work ($(window).scrollTop(savepos);) if placed in DA, that refresh IR (apex.event.trigger( ‘#ID’, ‘apexrefresh’ )) after DB work done… I debugged, it’s ok with savepo value, but scrolling not happened…

    • I think you want the “After Refresh” (apexafterrefresh) event which happens once the data comes back.
      If you’re using apexrefresh, then it’s possible that the position is restored and once the data comes back the position jumps again.

  8. Ok, i think You are right. BTW, what’s about paginating? I mean do You have experience to set certain page on IR by means of JS? It seems to be useless to try restoring position without it…

    • Pagination is an issue. The technique has a specific use case, but yes you’re correct, if you’re past page 1, unfortunately, the refresh takes you back to the beginning.
      This is a disappointing deficiency that I hope gets enhanced eventually.

  9. Vlad says:

    I am trying this in Apex 5.1. The savepos is saved correctly when the model is called but the $(window).scrollTop(savepos) part apparently doesn’t execute. It is in a after refresh dynamic action. The refresh happens when the modal is closed, but doesn’t change the position afterwards. If i run the statement from the browser console, it executes correctly. Any ideas?

  10. Vlad says:

    No errors in the console. If I copy-paste the code in the console, runs perfectly. I don’t think it runs the after refresh event, any after refresh event. Even if I put an alert instead of execute javascript, it doesn’t show it after the refresh happens. There is only one region, very strange…

    • I just spotted the issue in your image. You seem to be using an IG instead of an IR.
      The IG is a different beast and it does not issue “After Refresh” events. At the moment I’m not sure how this code could be enhanced to work with an IG.
      It’s going to require some research.

  11. Vlad says:

    Yes, you are right. If i change to IR it works. For IG it would be great if it could position on the same row after the modal is closed :)

  12. Vlad says:

    One more thing, how do you do the green highlight after the modal? Do you mark somehow the row that was updated? I’ve managed to do the yellow highlight when the modal is called but not the green one afterwards.

  13. Martin Børge Nielsen says:

    Hi.
    I believe the plugin you are looking for is here:
    https://github.com/tompetrus/oracle-apex-ir-refresh-pagination

    Note: it only handles the pagination issue, but combined with the JS from Jorge, it will do the job.

    Brgds
    Martin

  14. as always – clear and concise! worked perfectly – Thanks Jorge :)

I love comments, write me a line