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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.