Countdown timer in sample app

Kirk_Masden · 03-20-2022 02:54 AM

I've made a sample / template app that shows how one can use a gif to implement a simple 30-second countdown timer:

https://www.appsheet.com/templates?appGuidString=bd3c764b-8515-44a6-bcd5-d757c7729802

I've used gifs in my apps before but this time I did something different. Instead of following the precedure I've described here . . .

https://www.googlecloudcommunity.com/gc/Tips-Tricks/Demonstrate-how-to-use-your-app-with-gifs/m-p/39...

. . . I put the gif I made directly on my server and the accessed it via an img src=tag in a virtual column of the LongText type. This has two advantages:

1. The placement inside HTML in a LongText column makes it possible to make the gif quite small. In an image column (which was the only choice before we were give access to HTML), it would be pretty big. Now the countdown clock looks like this:

2. The second advantage is that with the "normal" gif address (before HTML became accessible, only a special way of accessing gifs on Google Drive would work), I can append text as follows:

The text I have appended following a question mark is a version of the time (18:32:34) and I've set up the app to add different text based on the time every time the gif is to be accessed. This causes AppSheet to treat the URL as a completely new one, which means that it always starts at 30 seconds and then begins counting down.

So, that's where I am now. Here's my question. When the 30 seconds run out, can I make things happen on the detail view? For example, can I make a message say "Time's up!"? Or, can I make the question box disappear? I'm not used to working with bots so instead of wasting a lot of time trying to figure it out, I thought I'd just ask.

I would be honored if those of you who happen to be interested in this question would copy my sample and try to tweak it.

Thanks!

P.S. I plan to repost this later as a tip, but I wanted to see if it's possible to improve the implementation a bit before I do so.

Joseph_Seddik

First, THANKS A MILLION!

I could think of one way, hopefully it would work.

First we add a new timestamp column with an initial value of NOW(). The value of this column will be set once the form is open, and can be reset with an Edit or through the Reset action.

Then, in the Valid if field of the answer column, we can add an expression like:

NOW() - [timestamp] <= "000:00:30"

And set the error message appropriately.

Kirk_Masden

Thanks!! Actually, I tried something like this but it didn't work. If I do something in the app (submit an answer, as my sample app is currently configued) then I get feed back about the timing as follows:

However, if I don't do anything and am just looking at the screen, I don't think anything will change. As far as I can tell, this is how AppSheet works -- we can make it react to what the user does but it doesn't seem to be possible, even with a bot, to make it change what one sees on the screen via a timer alone. I think this is the idea behind the "Timers can't wait" post:

https://www.googlecloudcommunity.com/gc/Feature-Ideas/Timers-cant-wait/idi-p/312371

It's been over a hear since this post was put up, and it's gotten a good deal of support, but I don't think a timing bot is available at this point.

I can make things happen on Google sheets via timers. I wonder if the using Google script in AppSheet is a possibility?

Joseph_Seddik

Yes, we have to wait till the user writes something, but if the timers expires before, nothing will happen unless he starts writing. Combined with your solution, for me it would be OK, since the user is able to see the timer counting down then turning red, nice 🙂 so he wouldn't be surprised, and on typing the first letter, he will get the error message.

Regarding GAS, did you see this recent announcement? Hopefully I’d be able to have sometime experimenting with this new feature.

https://www.googlecloudcommunity.com/gc/Announcements/Apps-Script-Tasks-are-now-available-in-Preview...

Suvrutt_Gurjar

Hi @Joseph_Seddik, Yes , GAS integration seems promising. At this moment two aspects possibly limit GAS usage for this use case

1) No return values from GAS functions are supported.

2) GAS time triggers are typically in minutes- minimum 5 minutes? So seconds timers will be a challenge?

However even without Appsheet supported GAS feature, people have used GAS in Appsheet apps. So possibilities always exist.👍

Kirk_Masden

Thanks to @Suvrutt_Gurjar and @Joseph_Seddik for your very informative responses.

In regard to GAS, I asked a couple of questions about templates using GAS here:

https://www.googlecloudcommunity.com/gc/Announcements/Apps-Script-Tasks-are-now-available-in-Preview...

If someone makes a template / sample app that utilizes Google Apps Script, will the script be copied when the template is copied? Or, will it need to be added manually to the template / sample app after it has been copied? Also, is there a template / sample app that utilizes Google Apps Script? If there is such an app and if all I have to do is copy it and then start "looking under the hood" that's what I'd like to do.

A sample app would really help me understand what GAS can do.

Suvrutt_Gurjar

Hi @Kirk_Masden ,

I will definitely explore the GAS feature more and revert when I have worthwhile information to share.

I am sure @Joseph_Seddik and all other colleagues will also share their insights in coming days.

Kirk_Masden

Thanks!

SkrOYC

It's a great implementation. I had no idea we can use <img> tag on the rich text mode of longtext eventhough it's mentioned on the post:

About the counter and a reaction based on a time frame, it's one of the challenges of AppSheet.

I hope this will be supported in the future with real time database support. But I don't think it'll be anytime soon since it was not on the upcoming changes mentioned by the AppSheet team. I think I saw that on the february office hours

Kirk_Masden

Thanks! Generally speaking, I prefer to avoid using <img> because larger images are not shrunk to fit on the screen. If one has tiny images (as the countdown numbers) I think that <img> in a LongText column may actually be preferable because it says space. Come to think of it. I have some spots in an app of mine where image columns are eating up more space than they really need to perhaps I'll consider using LongText html columns there.

SkrOYC

Yep, I was thinking about that since inline style (or any kind) is not an option.

But I think this is good for Quickchart or other services where you can tweak the size of the image

Kirk_Masden

Personally, I'm using QuickChart in a image column, not in HTML, because I want the charts to fill the screen but not overflow. I may be mistaken but I'm assuming that any size might be a little small on some screens and/or a little too big on others.

Joseph_Seddik

I agree, unless the underlying structure is doing active image processing to generate the right sizes, it is almost impossible to have the perfect size that fits all.