Small hints: change input value with buttons

Hi everyone,
A small tutorial - workaround, how to change value in the numeric input field with buttons (for example, change quantity).
It is not possible by default, so some small trick is needed.
Advantage of the resulting UI element - user can change the value both with buttons and with keyboard, which is great for user’s experience, especially in ecom.

4 Likes

Very nice @Victor! Thanks for contributing to the community! :slight_smile:

2 Likes

Hi @Victor / @Colin ,

Unless I am doing something wrong, but when I click on the plus sign and select Update as per video, I am only able to select “Logged in User”, no other database is showing up (I have an issue I’m trying to resolve described in another thread here, would have thought this will be the solution but doesnt seem to work either).

Is that a solution that only works with the users DB or am I doing something wrong?

Hi @tercas,

A record in Users collection is used in this example as a “temporary variable” to store and pass the value for the input box. Here is the logic: upon pressing +, you take the value from the Input, put Value+1 to TMPQty, and then update Input with value taken from TMPQty.
The sole reason for this - you can’t directly do math operations with numeric value in Input.

Of course any other collection could be used, if it is available on the particular screen. But for temporary storage I personally prefer to use Users’ collection (it is like an imitation of session storage).

As for your other topic, it’s a different story, I will reply there later.

Hi @Victor,

thanks for your response. The logic makes sense completely. I was trying to say that while you mention that any other collection could be used, I am not able to see any other collection, except for the ‘Logged in user’. I have a number of other DB collections set up, but none of them are listed when I select Add action > Update… Am I missing a step somewhere?

Tercas

Hi @tercas,

You can use other collections, if the data is available on that screen :slight_smile: see here, for example - very good Adalo team video: https://www.youtube.com/watch?v=dWJWNXn3RPc