How to create calculator in PowerApps

In this Power Apps tutorial, we will discuss how to create calculator in PowerApps. PowerApps create calculator example that will show a simple calculator.

Create calculator in PowerApps

Now, we will see how to create a simple calculator in Power Apps.

First, we will create a canvas app from the PowerApps.com site.

If you are new to PowerApps Canvas App, check out the below URLs:

Here create an app and you may choose Phone layout or Tablet layout.

create calculator in powerapps
Create an app in Power Apps

Then, add below controls in your screen: TextBox and Label from Power Apps input controls.

You can change the name of your control to recognize the control easily. Below is my screen which looks like after adding TextBox and Label.

Here I have set the background Image as black Image and changed the button color to orange and Textbox to blue.

Build a calcular in power apps
create calculator in powerapps

Next click on the first textbox and go to the Onchange property and set the variable as N1. This means whatever the value you enter in the textbox, it will store in the N1 variable.

You can visit Microsoft site to know more about, how to create a variable in PowerApps.

powerapps create calculator
powerapps create calculator

The same step you have to follow here, go to the Onchange property of your textbox and Set the value in the N2 variable. This means whatever the value you enter in the textbox, it will store in variable N2.

how to create a simple calculator in Power Apps
create calculator in powerapps

Next click on the Plus button and go to the OnSelect property and store the N1 and N2 value in a result variable. So do the same for the other button as well.

+ button -> UpdateContext({result: N1 + N2 });
- button -> UpdateContext({result: N1 - N2 });
* button -> UpdateContext({result: N1 * N2 });
/ button -> UpdateContext({result: N1 / N2 });
powerapps create calculator
Build a calculator in power apps

Next go to the Output Textbox and set the result in Textbox property Text.

create calculator in powerapps
create calculator in PowerApps

After set everything, Run the apps and see the output as below.

How to create calculator in PowerApps
Power Apps calculator

This is a simple Power Apps calculator.

You may like following Power Apps tutorials:

In this tutorial, we will discuss how to create a simple calculator in Power Apps.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>