Hi,


I have a mobile application screen with a form. When the user accidentally leaves the screen, i want a popup to be displayed with "Are you sure"? 

Does anyone have experience with implementing something like this on mobile?


Kind regards,


Bas de Jong

How do you define "leaves the screen"? Even switching to another app already kills it (and you can't do anything about it).

Bas de Jong wrote:

Hi,


I have a mobile application screen with a form. When the user accidentally leaves the screen, i want a popup to be displayed with "Are you sure"? 

Does anyone have experience with implementing something like this on mobile?


Kind regards,


Bas de Jong


Hi Bas de Jong,


I encountered the same scenario in my running project. Below mentioned are the step which I followed to achieve the required flow

1) On Common\Menu web block - Link Menu Item with an action which triggers an event with input parameter - ActiveMenu  (type - Integer)

For every menu Item you will have a Link Value (i.e. ActiveMenu Value)

2) Common\Layout Web Block

a) Introduce an input parameter called IsDataUpdated (type - Boolean) in Common\Layout Web Block

b) Defined an event in Common\Layout Web Block with ActiveMenu (type - Integer) as input parameter

c) Define an event handler for Common\Menu ---> TriggerChangeEvent 

d) Inside the above defined handler (c) 

   Trigger the event IsDataUpdated (defined in (b)) 

     if the  IsDataUpdated = True (input parmater)


    IsDataUpdated2.ActiveMenu = TriggerChangeEvent.InputParameter


3) Application Screen with form (for e.g. ScreenA)

Define a local flag variable to track the screen input value change for e.g. IsDataUpdated (Boolean Variable) and bind it with the Common\Layout input parameter ---> IsDataUpdated

Define a handler for IsDataUpdated Event --> LayoutDataUpdated


On navigating to other screen from Menu/Bottom bar section the event handler (LayoutIsDataUpdated ) get's triggered 

Within the LayoutIsDataUpdated handler action flow update the popup Boolean value  ShowPopupMsg = True

So as an input parameter of the handler you get the ActiveMenu value which is the link count value (The menu value) at which you want to navigate

In the popup you will be having two button 1) Stay  2) Discard

Discard button action will consist a switch statement with all the screens and linked to it with a condition ActiveMenu = 1 --> Dashboard

ActiveMenu = 2 --> Transaction History etc...


This is how you can achieve your requirement.

Hope you understood the above mentioned steps. Feel free to ask if you are facing any challenges in implementing/understanding the above explanation.


Note: You just have to understand the Event communication between the Layers of web blocks.

Common\Menu/BottomBar WebBlock > Common\Layout > Screen communication


Regards,

Benjith Sam

Kilian Hekhuis wrote:

I think he wants something like this. :)

How do you define "leaves the screen"? Even switching to another app already kills it (and you can't do anything about it).



Hi Jong,

You can use the action of the screen OnDestroy, there you check if the form is incomplete and having the answer you will define whether or not to display the message to the user.



Regards,

Eduardo Benites

Hi Jong,


Are you trying to achieve something like this ?

If you are, you can use the Mobile Popup widget and use a boolean variable to control its display


Also, if you want to implement something like when user wants to leave the screen you could implement the onDestroy event like Eduardo Benites suggested.
Or you could use mobile plugins like


https://www.outsystems.com/forge/component-overview/2476/android-back-button
or  https://www.outsystems.com/forge/component-overview/1805/exit-on-back


hope this helps.

Kind Regards,
Marco Mateo


Cristian Angel Puma Villalva wrote:

Kilian Hekhuis wrote:

I think he wants something like this. :)

How do you define "leaves the screen"? Even switching to another app already kills it (and you can't do anything about it).



Hi,


This is exactly like i meant. 



Eduardo Benites wrote:

Hi Jong,

You can use the action of the screen OnDestroy, there you check if the form is incomplete and having the answer you will define whether or not to display the message to the user.



Regards,

Eduardo Benites

Thanks,


I will try it out today. Not sure how i would cancel the navigation in the OnDestroy action but i will try.



Bas de Jong wrote:

Eduardo Benites wrote:

Hi Jong,

You can use the action of the screen OnDestroy, there you check if the form is incomplete and having the answer you will define whether or not to display the message to the user.



Regards,

Eduardo Benites

Thanks,


I will try it out today. Not sure how i would cancel the navigation in the OnDestroy action but i will try.



Good boy, I hope I helped you.
It will work successfully.

Eduardo Benites


Solution

Hi,

We have solved the issue by placing some Jquery javascript in the onready screen action which displays a message with a cancel and okay option, when clicking a link or a button.

We excluded our correct buttons and now it works as intended!


Bas

Solution