Dear Ivy Team

It seems that Ivy can't handle by default the browser back button if the UI is related to a process. Your proposed solution is to suppress the back button. Imho this is not an acceptable solution especially if everything else reacts correctly to the back button.

I would assume/expect that a Ivy process which is designed with multiple "back paths" should be able to support some kind of a "back button" behavior.

Regards John Moser

asked 18.02 at 09:23

John%20Moser's gravatar image

John Moser
61252833
accept rate: 0%

According to your advise here :

we tried to disable the back button. But it turns out that it does not work for Chrome.

Approx. 60% of our users use Chrome. We are getting like 1000 errors per day because users are hitting the back button.

-> Could you provide a solution which works 100% ?

Thanks in advance.

(03.03 at 11:14) John Moser John%20Moser's gravatar image

The hack provided here works like a charm on Chromium: https://support.google.com/chrome/thread/8721521?msgid=10849294

tested with: Chromium Version 80.0.3987.87 (Official Build) Built on Ubuntu and Axon.ivy 8.0 LTS

<script type = "text/javascript" > history.pushState(null, null, location.href); history.back(); history.forward(); window.onpopstate = function () { history.go(1); }; </script>​

If added this in my main layout xhtml and now the back button is no longer doing any harm in any of my dialogs.

link

answered 04.03 at 10:41

Reguel%20Wermelinger's gravatar image

Reguel Werme... ♦♦
9.4k21857
accept rate: 70%

edited 04.03 at 10:42

SupportIvyTeam's gravatar image

SupportIvyTeam ♦♦
1.4k99117121

We had to workaround something similar, and ended up adding these lines of JS

window.addEventListener('popstate', function(event) { window.location.replace('#{menuViewOverride.applicationHome}'); }, false); history.pushState({}, null, window.location.pathname);

Where menuViewOverride.applicationHome can be replaced with whatever logic you need to determine the navigation of the previous page.

(22.07 at 05:21) TareqK TareqK's gravatar image

I worked for this issue recently. I could share the idea. We will use "load" and "popstate" event to detect and handle the back button in general and show a custom dialog, you will have full control of the dialog, then you can disable the back button completely.

Refer the load event documentation from Mozilla: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Idea get from an answer on StackOverflow: https://stackoverflow.com/questions/18141729/browsers-back-button-click-with-confirm-box

JavaScript

var exitPageConfirmDialog = {
  confirmation: undefined,
  enabled: true,
  enable: function() { this.enabled = true; },
  disable: function() { this.enabled = false; },
  show: function() { $('#exitPageConfirmDialog').show(); },
  hide: function() { $('#exitPageConfirmDialog').hide(); },
  showCustomConfirmDialog: function() {
    // creates new history entry with same URL for the first popstate could work
    history.pushState(null, null, null);
    window.addEventListener('popstate', function() {
      if (exitPageConfirmDialog.enabled === true) {
        exitPageConfirmDialog.confirmation = $.Deferred();
        exitPageConfirmDialog.confirmation.promise()
            .then(function resolve() {
              exitPageConfirmDialog.disable();
              history.back();
            }, function reject() {
              exitPageConfirmDialog.enable();
              history.pushState(null, null, null);
            });
        exitPageConfirmDialog.show();
      }
    });
  },
  init: function() {
    $(document).ready(function() {
      // Display custom confirm dialog, when user click on back button.
      window.removeEventListener('load', exitPageConfirmDialog.showCustomConfirmDialog);
      window.addEventListener('load', exitPageConfirmDialog.showCustomConfirmDialog);
    });
  }
};

HTML

<div id="exitPageConfirmDialog" style="display: none; background-color: grey;">
  <p>Do you want to go back?</p>
  <p><button onclick="exitPageConfirmDialog.hide(); exitPageConfirmDialog.confirmation.resolve();">YES</button></p>
  <p><button onclick="exitPageConfirmDialog.hide(); exitPageConfirmDialog.confirmation.reject();">NO</button></p>
</div>
< script>
  exitPageConfirmDialog.init();
< /script>

You should add onclick in YES/NO button, this editor prevent me adding those attribute:

YES-onclick: exitPageConfirmDialog.hide(); exitPageConfirmDialog.confirmation.resolve();

NO-onclick: exitPageConfirmDialog.hide(); exitPageConfirmDialog.confirmation.reject();

Testing

  1. create 2 pages, the second page will have this script, and an input to interact with (some browser like Chrome will not execute event unless you interact with some field inside the page).
  2. open the first page, then click on a link to navigate to the second page.
  3. type some thing in the input field
  4. click on Back button, you will see the confirm message and YES/NO button (you should use style="display: none" on the dialog, I could not put it in this answer because of the editor).
  5. When click YES, you will go back. When click NO, you will stay. If you remove the YES button, you will always keep user stay on the page.

In case you want temporary disable the dialog, use

exitPageConfirmDialog.disable();

Enable again

exitPageConfirmDialog.enable();

Known issue

  1. Confirm dialog does not show if you are not interact with the page.
link

answered 10.03 at 12:15

vinh_'s gravatar image

vinh_
665714
accept rate: 40%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "Title")
  • image?![alt text](/path/img.jpg "Title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×147

Asked: 18.02 at 09:23

Seen: 397 times

Last updated: 22.07 at 05:21