Build a Calculator in Power Apps

Do you want to calculate any numbers in Power Apps? To achieve this, you can go through the below complete tutorial. Here we will discuss how to create a simple calculator in PowerApps. Step by step we will build a calculator in Power Apps.

To do any kind of calculations (like Addition, Subtraction, Multiplication, Division), first of all, we need to create a calculator in PowerApps.

The second thing you may think is that Can PowerApps do the Calculations? Yes, you can use some formulas not only to achieve the calculations and changes appearance, but also to take action. For example, you can set the formula to the Button’s OnSelect property.

PowerApps Create Calculator

To create a calculator in the simple canvas app, follow the below steps:

Step – 1:

  • The below screenshot represents a simple calculator that I have created in the PowerApps Canvas app. This PowerApps Calculator calculates any digit by using different types of operators like Addition (+), Subtraction (-), Multiplication (*), Division (/).
  • Here in this example, you need to enter any two digits within two text input control and then you will select one operator that you want to perform. The calculation result will display in a other text box control.
  • Similarly, if you want to reset the entered digits, then you can click on the RESET button as shown below.
PowerApps Create Calculator
Build a Calculator in Power Apps

Step – 2:

  • To make this, you need to insert these below input controls and rename it as shown below.
  1. txtFirstNumber = This is the text input control where user will enter the first digit to calculate.
  2. txtSecondNumber = It is also a text input control where user will enter the second digit to calculate.
  3. txtResult = This is the text input control where it will display the calculation result of two digits.
  4. lbFirstNumber = This is a Label control that displays the string as Enter First Number (on its Text property).
  5. lblSecondNumber = This is a Label control that displays the string as Enter Second Number (on its Text property).
  6. lblResult = This is also a label control that displays the string as Calculation Result (on its Text property).
  7. lblOperator = This label shows the title (Select any Operator) to select any of the operator.
  8. btnAdd = This is a button control that helps to add any two digit value when the user will click on it.
  9. btnSub = This button control helps to subtract any two digit value when the user will click on it.
  10. btnMul = This button control helps to multiply any two digit value when the user will click on it.
  11. btnDiv = This button control helps to divide any two digit value when the user will click on it.
  12. btnReset = This button control helps to clear or reset any all the text fields when the user will press on it.
powerapps calculator
Build a Calculator in PowerApps

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 Number as like the below screenshot.
canvas calculator app
canvas calculator app

Step – 4:

  • Then you need to set a variable to 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 below screenshot.

how to create a calculator in powerapps
create a simple calculator in PowerApps

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 as:

  1. Addition (+):

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

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

Where,

  1. ResultValue = Context variable name
  2. InputNum1, InputNum2 = These are the variable names that you have specified on the text input’s OnChange property
how to create calculator in powerapps
Create a simple calculator in Power Apps

2. Subtraction (-):

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

OnSelect = UpdateContext({ResultValue: InputNum1 - InputNum2})
Create calculator in powerapps
Create calculator in power apps

3. Multiplication (*):

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

OnSelect = UpdateContext({ResultValue: InputNum1 * InputNum2})
Power Apps Create Calculator
canvas calculator app

4. Division (/):

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

OnSelect = UpdateContext({ResultValue: InputNum1/InputNum2})
Create a Calculator in Power Apps
Create a simple calculator in PowerApps

That’s 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 it’s Default property as:

Default = ResultValue

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

Calculator in PowerApps
Power Apps calculator

Step – 7:

At last, to clear the input fields, We will apply the below 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

Calculator in Power Apps
Calculator in Power Apps

Step – 8:

  • Now save and preview the app. Enter any digit in the first number and second number text boxes, and select any operator to calculate. The calculate result will display in the result text box as shown in below.
  • Once you will click on the Reset button, then all the fields will get clear.
PowerApps Create Calculator
Power Apps calculator

Also, you may like these below PowerApps Tutorials:

In this PowerApps Tutorial, We discussed how to create a simple calculator in the PowerApps Canvas app.

>