Increase/Decrease a value with one click
Learn how to increase a value by +1 or decrease it by -1 using buttons in Power Apps
Recommended:
• Have followed the introduction to Power Apps
Topics covered in this tutorial:
• The Set formula
• The Text property
• The OnSelect property
• Resetting a quantity to 0
Welcome to this tutorial where we will learn how to increase or decrease the value in a text field very simply.
Start by adding a button by clicking on Insert, then Button.
In the Text property of the button, write:
"+1"This will differentiate the button that will increment our value by +1 from the one that will decrease it.
In the OnSelect property of the button, write the formula:
Set(varNumber, varNumber + 1)If you have followed the Help Desk series, you now know that the Set function is used to create a variable. But why ask to assign to the variable varNumber (which is empty) its own value +1?
In fact, Power Apps recognizes this variable as a Number type, and it will automatically set the value to 0 if you haven't given it an exact number initially.
Continue with the tutorial, and you will discover the result shortly 😉
Right-click on your button, then Copy.
Right-click again elsewhere on your screen and then Paste; we will now tackle the -1 button.
Change the Text property of this second button to:
"-1"Then its OnSelect property to:
Set(varNumber, varNumber - 1)
Our two buttons are now correct; we will now add a Text label.
In its Text property, add the name of our variable:
varNumber
Finally, before checking if our formulas have worked well, let's add a Reset icon to reset the value to 0.
Place it below the Text label, for example, then go to its OnSelect property.
Write the following formula:
Set(varNumber, 0)This formula aims to reset the variable's value to 0 immediately.
You can now preview your app and click on the different buttons to see the number change.
As you can see, despite not giving a value to our variable, Power Apps immediately set the value to 1 when you clicked on the +1 button.
The Reset icon also works correctly, resetting the value to 0 in one click.
