Confirmation message in JavaScript on the back button from the device

Hello friends,

I know this command in JavaScript:

document.addEventListener("backbutton", function(){}, false);

Prevents the user from being able to click the back button and I would like it as a good practice, that when the user clicks the back button, a confirmation message appears if it really wants to perform this. If it responds that yes, Black Button will return to the previous page, but if not, will continue on the same page.

For iOS the same code will work?

I do not know anything about JavaScript, so I ask for helps the friends they know.


Thanks,

Marcelo Sampaio


mvp_badge
MVP
Solution

Hi Marcelo,

For the given use case, follow the below-mentioned steps.

Steps to follow:

1) Include the dialogs plugin as the Extensibility Configurations property value for the application module as shown below (Or define the dialogs plugin as an isolated application module)

{
    "plugin": 
    {
        "url": "https://github.com/apache/cordova-plugin-dialogs.git"
    }
}

2) Under the Logic Tab, introduce OnApplicationReady Systems event

3) Within the OnApplicationReady action flow, introduce a JS node with the below script

JS Snippet:

function goToPreviousScreen(button) {
  if (button == 1) {
      history.back(); // go to previous screen, if presses "Yes"
  } else {
    return false; // No action, if presses "cancel"
  }
}

function onBackButtonClick() {
  document.addEventListener(
    "backbutton",
    function (e) {
      navigator.notification.confirm(
        "Are you sure you want to leave the screen?",
        goToPreviousScreen,
        "Warning",
        "Yes, Cancel"
      ); // you can change the button names in the place of Yes, Cancel.
    },
    false
  );
}

if ($actions.CheckDialogsPlugin()) {
  onBackButtonClick();
}


4) IMP: Re-generate the application installer file (.apk) and re-install the latest installer in the native phone device.

Final result...


Refer to the attached .oml file 


I hope this helps you!


Kind regards,

Benjith Sam

MobileLabBackBtnConfirmMsg.oml

Hello Benjith,

Thanks, Thanks very much... It worked!!!!

mvp_badge
MVP

You're welcome, Marcelo.

Glad to help you :)


Kind regards,

Benjith Sam

Hi Marcelo,

You can create custom back button block and put in place of Menu.

On Back button click, you can have a popup control with confirmations message and two buttons (Yes and No).

Now once user click on Yes-> under YesOnClick-> close the popup->redirect to previous screen.

On NoOnClick-> just close the popup and do nothing.

You can get BackOnClick action under Menu block



Dileep

Dileep,

Thanks for the explanation, but I need this in JavaScript, to learn a little more about Java.

Hi Nova,

There is no default back button in iOS we need to put customer code for back button.

and you  can call confirmation dialog and return value and execute you code accordingly.


Thanks

Shoeb

Shoeb,

I do not have any knowledge in JavaScript, could you create this job in Java so I can learn better about it?

I'm not sure if it was clear, so I'll explain better ...

In command: document.addeventlistener ("backbutton", function () {}, false);

If the user clicks (on the device button) and not the Back button from the application, this command in JavaScript, will not allow it to exit the execution screen and will not return to the previous screen.

I would like to implement this command in JavaScript a question with two options.

The question would be: "Do you really want to return to the previous screen? Time will be restarted ..." With the yes or no options.

If it responds yes, it will return to the previous screen and if it responds no, it will be on the current screen.

As I said, I do not know anything about JavaScript and I want to learn.

mvp_badge
MVP
Solution

Hi Marcelo,

For the given use case, follow the below-mentioned steps.

Steps to follow:

1) Include the dialogs plugin as the Extensibility Configurations property value for the application module as shown below (Or define the dialogs plugin as an isolated application module)

{
    "plugin": 
    {
        "url": "https://github.com/apache/cordova-plugin-dialogs.git"
    }
}

2) Under the Logic Tab, introduce OnApplicationReady Systems event

3) Within the OnApplicationReady action flow, introduce a JS node with the below script

JS Snippet:

function goToPreviousScreen(button) {
  if (button == 1) {
      history.back(); // go to previous screen, if presses "Yes"
  } else {
    return false; // No action, if presses "cancel"
  }
}

function onBackButtonClick() {
  document.addEventListener(
    "backbutton",
    function (e) {
      navigator.notification.confirm(
        "Are you sure you want to leave the screen?",
        goToPreviousScreen,
        "Warning",
        "Yes, Cancel"
      ); // you can change the button names in the place of Yes, Cancel.
    },
    false
  );
}

if ($actions.CheckDialogsPlugin()) {
  onBackButtonClick();
}


4) IMP: Re-generate the application installer file (.apk) and re-install the latest installer in the native phone device.

Final result...


Refer to the attached .oml file 


I hope this helps you!


Kind regards,

Benjith Sam

MobileLabBackBtnConfirmMsg.oml

Hello Benjith,

Thanks, Thanks very much... It worked!!!!

mvp_badge
MVP

You're welcome, Marcelo.

Glad to help you :)


Kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.