Using Browser Back Buttons for Navigation

What I’m trying to do:
I wish to use the browser’s back and forward buttons for navigation in my app so that these buttons will navigate me to the previous form that was opened instead of leaving the website.

What I’ve tried and what’s not working:
I tried setting event handlers for hash change using anvil.js.window

Code Sample:

window.addEventListener('onhashchange',self.hashchange)
window.addEventListener('popstate',self.hashchange)
    
    def hashchange(self):
        alert('Back click')

I can’t help you directly, but have you checked out hashrouting? I believe that has solved the arrow button issues.

@david.wylie is correct.
The HashRouting module (available also as part of Anvil Extras with from anvil_extras import routing) allows you to attach a query string after the #.

You can let the routing module take care of it when you change form, or you can enjoy a finer control of what goes in the history.

You will need to change the way forms are loaded, but it’s worth. I use it in all my apps, so I can copy the url of the app at any moment, paste it in an email, and if you click it, you see the same page.

1 Like

Thanks, @david.wylie and @stefano.menci
I am aware of the wonderful hash routing. However, I only wish to control the actions of the browser’s back and forward buttons. HashRouting is quite difficult for me to implement as well since I’ll have to change the entire structure of my app which has become too complex after about 50 Forms :roll_eyes:

Without HashRouting or something equivalent, clicking back will abandon the app.

You could use the routing.set_warning_before_app_unload(True) function from HashRouting to prevent the user from abandoning the app, but I don’t know if it will work if you don’t use the decorators.

Or you could find some inspiration here: How can I stop the browser back button using JavaScript? - Stack Overflow

I already use something like this in my Native Library

window.onbeforeunload = function(event)
    {
        return confirm("Confirm refresh");
    };

It does the job of not abandoning users. All I want now is get controls of the back and forward buttons of browser. It appears to be possible according to Internet.
javascript - How to Detect Browser Back Button event - Cross Browser - Stack Overflow

Yes, you will need to play with onpopstate and similar events.
That’s what HashRouting does.
I little advice: if you start going down this road, you will end up writing your own HashRouting.
I have the feeling that refactoring your forms to be HashRouting compliant will require a smaller effort. :slight_smile:

2 Likes

It appears like that is the only way. What I hoped was something like this:

window.addEventListener('browser_back_click',self.go_back)

def go_back(self):
   open_form(Module1.last_opened_form)

If only it was that easy :neutral_face:

1 Like

Make the effort to convert to hash routing. It does change the way you structure apps, but you’ll never write another app without it. It allows so many other cool features, such as allowing users to bookmark individual forms and go directly back to them.

2 Likes

Someday perhaps, I might get the courage to change the entire structure. I know I am missing out on many things.

If only I was aware of hash routing before starting my project :upside_down_face:

Although I just realized that I had a terrible misconception. I used to think that the values stored in Modules will be lost upon changing your url hash. Although I discovered that they don’t. This means I will not have to completely change the structure of my app.

You really only have to add a decoration to forms that are the endpoint of a URL, and change the way you send users to a different form by URL.

As part of that, though, you also have to decide what you want the URL structure of your app to be, you have to check security on forms that the user couldn’t get directly to before, etc. So there are other aspects of switching that deserve thought.

Yes indeed. But none of it appears as frightening as completely removing my heavy uses of Modules to store data.