[IGN-4947]Prevent menu navigation by criteria

Hi,

I have a perspective view that the user updates and the user needs to click save before the updates are sent to the database. If the user attempts to navigate away from the view after making an update, I would like a “Are you sure” pop-up to show and force the user to confirm before navigating away and/or take any action that wipes out their changes. I have created the pop-up and put that logic on the view (it checks a param and puts up the pop-up under specific criteria). However, when it comes to a menu-tree and browser navigation (back button, url change, etc) I don’t see a way to throw up this prompt.

This ends up being two questions:

  • How do I block navigation on a menu tree component given a criteria?
  • How do I block navigation at the browser given a criteria?

Preferably this would include some ability to script the response, so I can call up the pop-up and deal with that logic, but blocking would suffice.

Thanks

1 Like

Right now, that's completely impossible in Perspective.
To do so you need to add a beforeunload event handler in Javascript, and we deliberately don't expose any control over the javascript loaded on the page.
It is an interesting idea though, so I filed a feature request for it.

Even if you make it technically possible for Perspective, many browsers won’t honor that event. It has been historically abused to force eyeballs on advertisements. I recommend not relying on such nags.

1 Like

Adding a beforeunload handler sounds great, thank you for submitting that.

Are there currently any hooks in the menu tree component to block or supercede a navigation request? I searched, asked colleagues, and tried a number of things, if not I would like to request a before navigation event that allows for cancelling navigation.

We have some ways of getting around this, IE creating our own embedded component, but other ideas are appreciated.

The only way to hook into the navigation in Perspective and make any sort of conditional navigation is to create your own navigation View where everything ends up using a Script Action to determine whether the navigation should take place and if so where the user should be taken.

The Navigation category of components perform pure unchecked navigation without any way for a user to interrupt the process once a selection/click has been made.

One workaround you could examine is binding or recursively writing to the enabled property of each item in the navigation component based on whether the current submission has been saved/cleared.

Thanks, I was hoping there was a better way. The two options you mentioned are the same as what my team came up with, not very elegant, but they will work.

Can we put in a feature request for the ability to have conditional navigation functionality in navigation items?

You could also just disable the Navigation Component until your condition is met.

That’s probably what we will go with, but it isn’t preferred from a UX perspective.

I obviously don’t know your requirements, but from my perspective (no pun intended) as a user, I would much prefer that the component be disabled - as opposed to remaining enabled but some back-end logic preventing any action when I click it.

If your goal is to inform users that they can’t navigate due to some condition, you could always throw some logic into the onClick Event for the component and if the component is disabled you could open a popup informing the user as to why the component is disabled.

I am looking to do a pop-up to notify the user, but I also need the pop-up not to occur when the view isn't disabled... which I think I can do in script logic, that might actually work. Probably wouldn't be able to navigate per the user's request from the pop-up, but I could disable the navigation blocking from the pop-up and they can navigate from there. I will give that a shot, should be cleaner than other methods.

1 Like