Exit back button in android

Back to Forums

Yasmeen Shaikh

Solved

Question

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.

20 Jan 2020

João Campos

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

See solution in context

23 Jan 2020

João Campos

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

20 Jan 2020

4 replies

Last reply 22 Jan 2020

Show thread

Hide thread

Yasmeen Shaikh

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

20 Jan 2020

João Campos

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:

please help on this.

Thanks

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.

20 Jan 2020

Ellakkiya

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:

please help on this.

Thanks

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

21 Jan 2020

Yasmeen Shaikh

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:

please help on this.

Thanks

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,

22 Jan 2020

João Campos

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.

20 Jan 2020

João Campos

Hi,

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

Thanks

22 Jan 2020

1 reply

23 Jan 2020

Show thread

Hide thread

Yasmeen Shaikh

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:

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
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.

23 Jan 2020

João Campos

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?

23 Jan 2020

1 reply

23 Jan 2020

Show thread

Hide thread

Yasmeen Shaikh

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.

23 Jan 2020

João Campos

Hi,

I'm glad I could help.

Happy coding!

23 Jan 2020

João Campos

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

23 Jan 2020

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

See the full guidelines