How To create a simple Canvas app calculator in PowerApps using text inputs and buttons

Scenario: after seeing in the previous post how to navigate between screens now we will see how to create a simple calculator.

Solution: go to PowerApps Studio and add a new screens on App, after, insert also 3 Text Inputs (for number 1, number 2 and the result) and 5 Buttons (for math operators and reset) like this structure:

Now, on the Text Inputs select format = number and OnChange use Set function to valorize the numbers N1 and N2:

Set(N1, TextInputNum1)

Set(N2, TextInputNum2)

On Text Input for result, you can only specify the default value with the value of the global variable result:

Now, on the 4 buttons OnSelect use UpdateContext to execute the operation (+, -, *, /):

UpdateContext({result: N1+N2})

UpdateContext({result: N1-N2})

UpdateContext({result: N1/N2})

UpdateContext({result: N1*N2})

Finally, you manage the reset button utilizing UpdateContext for reset the global variable and Reset function to reset the Text Input for number 1 and number 2:

UpdateContext({result: 0}); Reset(TextInputNum1); Reset(TextInputNum2); Reset(TextInputResult)

This is the result:

Here you can download the demo App.

Hope it helps and happy 365Power’ing!