Pop-up Confirmation Boxes

Hey guys I’m building a simple app that tracks and stores start/finish/break times on our manufacturing line within a google sheet.

It’s super basic, the user scans a kanban QR, it takes them to a product information screen with start/finish/pause buttons, when they press a button it stores the kanban ID, SKU, and time/date in a google sheet via connector.

I literally just want a pop-up confirmation box so people aren’t mis-clicking and saving extra data we don’t need.

There are a couple work arounds that involve extra steps and more inputs.
However this app is meant for the production floor, more steps and extra inputs cost time and in turn cost money.

1 Like

image

We use a single input next to the button as a workaround. It’s still an extra click regardless. A pop-up would be nicer.

3 Likes

hello @Ryne appreciate your suggestion and thanks @schexb for providing a potential solution!!

just to confirm, are you aware of the Show Message Action?? this displays a little “toast” at the bottom of the screen for a couple of seconds:


alternatively (this involves a couple of Actions, but is fast for the User), you can add an If Conditional, and only running the Connector Function if a certain condition has been met that is switched in the Action. you can then also make the button transparent once it’s been clicked, here’s a quick demo:



as you can see, the button dissappears once it’s been clicked:

let me know if this would work for you!!

2 Likes

Hi @Ryne,

I know you mentioned being aware of workarounds with extra steps, but I wanted to speak at a high level about the approach I typically take.

What I usually do is take the step where action is taken, copy it, and build a separate confirmation step. The action step button would then be setup to Go to Step > Confirmation and the confirmation step would have two buttons, typically “Cancel/Back” or “Submit/Save”. The cancel will clear any elements and Go to Step > Previous where as the submit button will store your data as designed right now.

To add to the UI element here to make it appear as a pop-up, you can take the copied step and add a semi-transparent layer to the surface (I typically use a Rectangle asset and make it R: 0, G: 0, B: 0, A: 0.5). This has the added bonus of making background elements not selectable from the confirmation window. On top of the semi-transparent layer, I’ll add another Rectangle asset to serve as my “pop-up” modal, which will host the two button I mentioned, along with any instructions.

A simple example of this is:

Let me know if that helps!

Grant

4 Likes

Thank you Grant!

This accomplished pretty much exactly what I wanted, and it was easy to set up!

2 Likes