Build a Calculator in Power Apps [Step-By-Step]

While working on an Expense Claim app in Power Apps, I wanted to add a calculator feature so users can quickly perform basic math operations (such as addition, Subtraction, Multiplication, and Division) without leaving the app. This makes the app more helpful and saves time.

In this tutorial, I will explain how to build a calculator in Power Apps step by step.

Power Apps Create Calculator

So let’s get started!

Step – 1:

The screenshot below shows a simple calculator I made in Power Apps. It can do addition (+), subtraction (-), multiplication (*), and division (/).

In this example, you enter two numbers in the boxes, choose an operator, and the result will appear in another box.

To clear the numbers, click the RESET button, as shown below.

Step – 2:

To create this, insert the input controls below and rename them as indicated.

Control	Description
txtFirstNumber	Text input control where the user will enter the first digit to calculate.
txtSecondNumber	Text input control where the user will enter the second digit to calculate.
txtResult	Text input control that will display the calculation result of two digits.
lbFirstNumber	Label control that displays the string as Enter First Number
lblSecondNumber	Label control that displays the string as Enter Second Number
lblResult	label control that displays the string as Calculation Result
lblOperator	Label that shows the title (Select any Operator) to select any of the operators
btnAdd	A button that helps to add any two-digit value when the user clicks on it
btnSub	A button that helps to subtract any two-digit value when the user clicks on it.
btnMul	A button that helps to multiply any two-digit value when the user clicks on it.
btnDiv	The button control helps divide any two-digit value when the user clicks on it.
btnReset	A button that helps to clear or reset all the text fields when the user presses it.

Step – 3:

Next, select the First Number Text input box and format the field value as Number (go to Properties -> Format -> Select Number).

Similarly, select the Second Number Text input box and format the field value as a number, as shown in the screenshot below.

Step – 4:

Next, you need to set a variable for both the text input fields (First Number and Second Number). For this, we will use the OnChange property of both the controls.

Select the First Number Text input control and apply the below code on its OnChange property as:

OnChange = Set(InputNum1,txtFirstNumber)

Where,

1. InputNum1 = Specify a variable name
2. txtFirstNumber = Text input control name where you will enter the first digit

In the same way, select the Second Number Text input control and apply the below code on its OnChange property as:

OnChange = Set(InputNum2,txtSecondNumber)

Where,

1. InputNum2 = Specify a variable name
2. txtSecondNumber = Text input control name where you will enter the second digit

Refer to the screenshot below.

Step – 5:

Now we will work on the various types of Button controls that I have used to perform any operations. Here, I have used four buttons to perform four operations:

1. Addition (+):

Select the Addition button (+) and set the following formula on its OnSelect property:

OnSelect = UpdateContext({ResultValue: InputNum1 + InputNum2})

Where,

• ResultValue = Context variable name
• InputNum1, InputNum2 = These are the variable names that you have specified on the text input’s OnChange property

2. Subtraction (-):

Select the Subtraction button (-) and set the following formula on its OnSelect property as:

OnSelect = UpdateContext({ResultValue: InputNum1 - InputNum2})

3. Multiplication (*):

Select the Multiply button (*) and set the following formula on its OnSelect property as:

OnSelect = UpdateContext({ResultValue: InputNum1 * InputNum2})

4. Division (/):

Select the Division button (/) and set the following formula on its OnSelect property as:

OnSelect = UpdateContext({ResultValue: InputNum1/InputNum2})

That’s what we have put all the formulas on all the buttons.

Step – 6:

After all, to view the calculation result in the Result box, we need to set the created context variable to its Default property as:

Default = ResultValue

In the Calculation Result box, the user can view the output of two digits.

Step – 7:

At last, to clear the input fields, we will apply the following formula on the RESET button’s OnSelect property as:

OnSelect = UpdateContext({ResultValue: 0});
Reset(txtFirstNumber);
Reset(txtSecondNumber);
Reset(txtResult)

Where,

txtFirstNumber, txtSecondNumber, txtResult = Text input control names

Step – 8:

Now save and preview the app. Enter any digit in the first and second number text boxes, and select any operator to calculate. The calculated result will display in the result text box as shown below.

Also, once you click the Reset button, all fields will be cleared.

Also, you may like some more Power Apps tutorials:

• Show/Hide Button Based on Condition in Power Apps
• Power Apps LastSubmit()
• Power Apps Gallery Row Number
• Power Apps Start Timer On Button Click
• Create Hyperlink Button in Power Apps

I hope this post helped you create your calculator in Power Apps. It’s a fun and easy way to get comfortable with building apps. Give it a try, and feel free to add your own ideas to make it even more helpful!