Detect route change

Frappe Framework App Development
1

How can I update my HTML Dom whenever the route changes. I see no event for this.

Usecase:
I want the users of my frappe app to dynamically modify the css of certain doctype-forms, doctype-lists and the workspace. So my basic idea is to update a css class on the body tag so that they can write their own css in my Settings Doctypes CSS field (of type code - css) .

2

I’m not aware of any event linked to route changes in Frappe, but you should be able to listen to click and keypress events.

Something like this? Detect React Route Change in Vanilla JavaScript - Raja Osama - Medium

3

Cool, with this found a way to do this!
Let’s see, if they introduce keyboard-shortcuts to change the route at some point, then my solution breaks… :frowning:

Thanks for now! :smiley:

4

I know that this is old but maybe someone will find it helpful.

You can check route changes through the router module built into frappe

frappe.router.on('change', () => {
    // do something
})

you can use it in the app_include_js hook

and if you would like to call it only when the page is loaded you can for example do something like this:

$(window).on('load', page_loaded);

function page_loaded() {
    frappe.router.on('change', () => {
        // do something
    })
}

i think it wont make a different since the router will detect the change even when the page is loaded.

you can also get your current route using frappe.get_route()

2 Likes