Hi All,

I am working on outsystems android.

I want to know how to display a popup to exit the app on pressing device's back button.

I found component on forge, but was not compatible.

Is there any other way, through JS or some other solution.



Thanks,

YS.


Hi Yasmeen,


You can create an event listener to detect if the device's back button was pressed. Like this:


document.addEventListener("backbutton", onBackButton);

function onBackButton(e){
  //display popup
}


Try this and let me know if it works.


Best regards,

João Campos

João Campos wrote:

Hi Yasmeen,


You can create an event listener to detect if the device's back button was pressed. Like this:


document.addEventListener("backbutton", onBackButton);

function onBackButton(e){
  //display popup
}


Try this and let me know if it works.


Best regards,

João Campos


Hi Joao


Can you please tell me where to add this event.

Actually the scenarios is mentioned below which I want exactly:

If user taps device back button while on login screen, the app should ask him whether he is sure about exiting the app. "Are you sure about exiting the app?"
If he taps device back button while on Home screen, the app should behave the same way as above
If he navigates to other pages from Home screen, the device back button should work as back and take the user to last screen he accessed, till he reaches to first
screen (Home Screen) 


please help on this.


Thanks

YS

If I understood correctly, you want to have this behaviour on every screen of your application. So, I think you can create a block and put your popup inside. And on block's Initialize action you can call the javascript to create the event and open the popup in the callback function.

You can call this block in the layout block of your application.

Yasmeen Shaikh wrote:

João Campos wrote:

Hi Yasmeen,


You can create an event listener to detect if the device's back button was pressed. Like this:


document.addEventListener("backbutton", onBackButton);

function onBackButton(e){
  //display popup
}


Try this and let me know if it works.


Best regards,

João Campos


Hi Joao


Can you please tell me where to add this event.

Actually the scenarios is mentioned below which I want exactly:

If user taps device back button while on login screen, the app should ask him whether he is sure about exiting the app. "Are you sure about exiting the app?"
If he taps device back button while on Home screen, the app should behave the same way as above
If he navigates to other pages from Home screen, the device back button should work as back and take the user to last screen he accessed, till he reaches to first
screen (Home Screen) 


please help on this.


Thanks

YS

I didn't read the last part. So instead of the solution I gave below you just need to put the javascript on Login and Home OnInitialize actions. You replace the comment //display popup with the call to your popup. On the other screens you don't need to do anything, since it will have the default behaviour of going to the previous Screen.


Yasmeen Shaikh wrote:

João Campos wrote:

Hi Yasmeen,


You can create an event listener to detect if the device's back button was pressed. Like this:


document.addEventListener("backbutton", onBackButton);

function onBackButton(e){
  //display popup
}


Try this and let me know if it works.


Best regards,

João Campos


Hi Joao


Can you please tell me where to add this event.

Actually the scenarios is mentioned below which I want exactly:

If user taps device back button while on login screen, the app should ask him whether he is sure about exiting the app. "Are you sure about exiting the app?"
If he taps device back button while on Home screen, the app should behave the same way as above
If he navigates to other pages from Home screen, the device back button should work as back and take the user to last screen he accessed, till he reaches to first
screen (Home Screen) 


please help on this.


Thanks

YS

 Hi Yasmeen Shaikh,

 As per your requirement, 

you can use the Android back button plugin 

https://www.outsystems.com/forge/component-overview/2476/android-back-button

In the handler layoutonandroid backbutton ...

 1.Assign the pop variable to true on the homescreen

 2. For other screens, you can navigate according to your requirement.

orelse

As João Campos said, you can use the below javascript 

document.addEventListener("backbutton",didback)
function didback(event)
{
    $actions.Logout();

}

In logout action assign the pop variable to true

Ellakkiya Selvadurai wrote:

Yasmeen Shaikh wrote:

João Campos wrote:

Hi Yasmeen,


You can create an event listener to detect if the device's back button was pressed. Like this:


document.addEventListener("backbutton", onBackButton);

function onBackButton(e){
  //display popup
}


Try this and let me know if it works.


Best regards,

João Campos


Hi Joao


Can you please tell me where to add this event.

Actually the scenarios is mentioned below which I want exactly:

If user taps device back button while on login screen, the app should ask him whether he is sure about exiting the app. "Are you sure about exiting the app?"
If he taps device back button while on Home screen, the app should behave the same way as above
If he navigates to other pages from Home screen, the device back button should work as back and take the user to last screen he accessed, till he reaches to first
screen (Home Screen) 


please help on this.


Thanks

YS

 Hi Yasmeen Shaikh,

 As per your requirement, 

you can use the Android back button plugin 

https://www.outsystems.com/forge/component-overview/2476/android-back-button

In the handler layoutonandroid backbutton ...

 1.Assign the pop variable to true on the homescreen

 2. For other screens, you can navigate according to your requirement.

orelse

As João Campos said, you can use the below javascript 

document.addEventListener("backbutton",didback)
function didback(event)
{
    $actions.Logout();

}

In logout action assign the pop variable to true

Hi All,

I have used the javascript as ScreenType is input parameters
if($parameters.ScreenType === 1) {
        var confirmDialog = confirm("Are you sure you want to exit the application?");

        if(confirmDialog) {
            navigator.app.exitApp();
        }
   
    return;
}

if($parameters.ScreenType === 2) {
    $public.Navigation.navigateBack(3);
   
    return;
}

when I am go to menu and select homescreen -> homescreen will displayed and if I want to pressed back button device on android it gaves correct message as "Are you sure you want to exit app?" and when click ok it's exit

But for second scenario when I want to select menu ->homescreen2 will displayed screen but when back button pressed it does not show confirmation box and message.

above requirement is likewise (Menu -> select screen1 ->it displayed screen-> ask message are you sure want to exit app?
same for second menu -> select screen2 -> it displayed screen-> ask message are you sure want to exit app? -> app closed.

for both I want to do..


Kindly help on this

Thanks and regards,

YS


Hi,


Can you share the file so I can try to understand what's missing?


Thanks

João Campos wrote:

Hi,


Can you share the file so I can try to understand what's missing?


Thanks

Hi Joao,

Steps which is implemented:

  1. If user taps device back button while on login screen, the app should ask him whether he is sure about exiting the app. "Are you sure about exiting the app?"  : It is working
  2. If we taps device back button while on Employee Report screen, the app should ask him whether he is sure about exiting the app. "Are you sure about exiting the app?" : It is working

3.If he navigates to other pages from Employee Report screen, the device back button should work as back, and take the user to last screen he accessed, till he reaches to first screen (Employee Report)  : For that I am not able to find the solution.



Hi Yasmeen, 


To make sure I understood everythin, the problem is when you click on back button and he doesn't go back to previous screen? He just shows the popup on every screen?

João Campos wrote:

Hi Yasmeen, 


To make sure I understood everythin, the problem is when you click on back button and he doesn't go back to previous screen? He just shows the popup on every screen?


Hi Joao

Yes you are right. Thanks a lot for sharing knowledge.

It's working now.

Hi,

I'm glad I could help.


Happy coding!

Solution

Hi Yasmeen,


If you don't mind to mark it as a solution, to let the community know that the topic is closed and solved :)


Thanks

Solution