How can I make a native alert with a countdown number in it?

Getting Started Newbie Questions
#1

I’m trying to show a native alert, which shows a message saying “the session wille expire in 10 seconds”, and I want it to countdown from 10 to 0, after which the alert should disappear if no user input is given.

How can I achieve this?

I have tried:

local dismissTime = 10 local alert = native.showAlert( "Session Expiry", "This session will expire in" .. dismissTime .. "seconds", { "Extend Session", "Log out" }, onComplete ) local function updateAlert() if dismissTime \>= 1 then     dismissTime = dismissTime - 1; else     native.cancelAlert(alert) end timer.performWithDelay( 1000, updateAlert )

The above decrements my dismissTime variable, but it does not update the value in the alert, which just keeps showing 10 seconds. Any help is appreciated!

#2

Needs cleaning up, but try this:

local dismissTime = 10 local function onComplete() end local alert = native.showAlert( "Session Expiry", "This session will expire in " .. dismissTime .. " seconds", { "Extend Session", "Log out" }, onComplete ) local function updateAlert() if dismissTime \>= 1 then dismissTime = dismissTime - 1; native.cancelAlert(alert) alert = native.showAlert( "Session Expiry", "This session will expire in " .. dismissTime .. " seconds", { "Extend Session", "Log out" }, onComplete ) end end timer.performWithDelay( 1000, updateAlert, 10 )
#3

This causes the alert to close and re-open every second, which is bad UX…Any other options? The update should be asynchronous.

#4

This is not something you can achieve with the native.showAlert as there is no way to change dynamically the string after its instantiated. Your best solution would be to create the dialog yourself and then change the string on the fly.

Full disclosure here. I’ve build a dialog plugin that allow to create a dialog popup  with many visual customization. This dialog type do NOT support currently the ability to change the string after its been instantiated, but if you are interested in the plugin, I could add a new method that would let you change the message string dynamically, therefore giving you the ability to change the time.

Nick

#5

Hi paras,
I would also suggest one way where,
We can declare a runtime listener at the time we make alert & while at each hook we can update the value of text that belongs to seconds in Number.
& After that, we can stop the runtime listener easily.

Note: I didn’t try it, But m sure it will work

-Assif

#6

Nick is right, once you show the native.showDialog() you can’t update the data. There is no trick to do that. You will have to find something other than native.showDialog() to do what you want.

Rob

#7

You can also try to go with a scene designed like a pop-up & displayed in terms of showOverlay.
Referring the runtime strategy.

Assif
 

#8

Hi Nick, it would be great if you could add that functionality; I’m definitely interested.

#9

Hi Paras9, sounds good, I will get back to you quickly :slight_smile:

best
Nick

#10

Hi Paras9,

A new version of the plugin is available with a new call for the dialog. Its currently in Beta but you can use it and will wait for your feedback.

changeDialogText.gif

Hope this help,

Nick

#11

Awesome, thanks Nick! I’ll test it out and get back to you asap!

#12

Here is some sample code to see the example I show you previously

 local options = braintonikDialog.applyOptionsFromTemplate( "roundClassicGrey" ) braintonikDialog.addTransition( options, "RightToLeft" ) options.wDialog = 300 options.buttonFontSize = 12 options.buttonWidth = 100 -- we want to block all touch events braintonikDialog.addBackgroundOptions( options, true ) -- define our button callback handler local function callBack( pressedButton ) print( "Pressed button : ", pressedButton ) end -- set our different data options.titleString = "Session Expiry" options.textString = "This session will expire in 10 seconds" options.buttonHandler = callBack options.buttonName = { "Extend Session", "Log out" } -- we want to overide the default screen options.xScreen = xScreen options.yScreen = yScreen options.wScreen = wScreen options.hScreen = hScreen -- display the dialog local dialogObj, error = braintonikDialog.displayPopupDialogEx( options ) local dismissTime = 10 local function updateAlert() dismissTime = dismissTime - 1 local newTextMsg = string.format( "This session will expire in %s seconds", dismissTime ) dialogObj:changeTextString( newTextMsg ) end timer.performWithDelay( 1000, updateAlert, 10 )
#13

Needs cleaning up, but try this:

local dismissTime = 10 local function onComplete() end local alert = native.showAlert( "Session Expiry", "This session will expire in " .. dismissTime .. " seconds", { "Extend Session", "Log out" }, onComplete ) local function updateAlert() if dismissTime \>= 1 then dismissTime = dismissTime - 1; native.cancelAlert(alert) alert = native.showAlert( "Session Expiry", "This session will expire in " .. dismissTime .. " seconds", { "Extend Session", "Log out" }, onComplete ) end end timer.performWithDelay( 1000, updateAlert, 10 )
#14

This causes the alert to close and re-open every second, which is bad UX…Any other options? The update should be asynchronous.

#15

This is not something you can achieve with the native.showAlert as there is no way to change dynamically the string after its instantiated. Your best solution would be to create the dialog yourself and then change the string on the fly.

Full disclosure here. I’ve build a dialog plugin that allow to create a dialog popup  with many visual customization. This dialog type do NOT support currently the ability to change the string after its been instantiated, but if you are interested in the plugin, I could add a new method that would let you change the message string dynamically, therefore giving you the ability to change the time.

Nick

#16

Hi paras,
I would also suggest one way where,
We can declare a runtime listener at the time we make alert & while at each hook we can update the value of text that belongs to seconds in Number.
& After that, we can stop the runtime listener easily.

Note: I didn’t try it, But m sure it will work

-Assif

#17

Nick is right, once you show the native.showDialog() you can’t update the data. There is no trick to do that. You will have to find something other than native.showDialog() to do what you want.

Rob

#18

You can also try to go with a scene designed like a pop-up & displayed in terms of showOverlay.
Referring the runtime strategy.

Assif
 

#19

Hi Nick, it would be great if you could add that functionality; I’m definitely interested.

#20

Hi Paras9, sounds good, I will get back to you quickly :slight_smile:

best
Nick