Counter Widget With Optional Confirmation

Sharing the custom widget I made to help our operators enter and increment numbers on touch screens. We have over 150 touch screens monitoring our process and operators need to enter numbers for defective parts, good parts, and finished boxes. I thought this could be a useful widget for others as well.

demo

I wanted an easy-to-scale counter and needed to add confirmation for the most sensitive application. I had initially implemented this with no-code buttons, but was limited with the confirmation and managing multiple elements was not always easy.

I thought a custom widget would work well. I was able to add the verification in the code and give the operator a double-check of the value to reduce mistakes. The UI and logic is now one element making it easier to manage across the multiple places and apps where I am using the widget.

I have submitted it to the library and will post a link once it is published.


Set-up:

Props:

Value - this is the value that is displayed. Connect to a local variable to save in your app

Confirmation - If you want the confirmation step. Use a static value and set this to True. You can also use a variable to set dynamically if that makes sense for your use case.

Events

PLUS - Fires when plus button is pressed. If confirmation is set to true. It will fire after the confirmation.

MINUS - Fires when minus button is pressed. If confirmation is set to true. It will fire after the confirmation.

Hey @joseph.dooher -

This is slick! Ironically, we were playing with another ‘possible with triggers’ widget this week and came to something super similar.

One thing that might be worth investigating is the hover state. Small things like changing color on hover help users better understand the current state.


Probably doesn’t make sense for a touchscreen (where hovering doesn’t exist), but you could potentially set a different background color to the button when the :white_check_mark: :x: is pressed.

Just an idea!
Pete