How to Build Calculator in Power Apps?

Have you ever tried building a calculator in Power Apps? If not, No worries!

In this Power Apps tutorial, I will show you how to build calculator in Power Apps.

Any mathematical operation, including addition, subtraction, multiplication, and division, can be carried out with a calculator. To do that, we will use Power Apps to create a calculator in two distinct ways, as shown below:

Build a Calculator using Power Apps

To achieve it, follow the below steps:

How to Build Calculator in Power Apps

Here, I will show you how to build a Power Apps calculator in two ways.

Method 1:

In this example, I will explain how to create a simple calculator in Power Apps.

I created a Power Apps Canvas app and added one label control, two Text input controls, and six Button controls.

The result value will be displayed in the label control whenever the user provides the values in both text input controls and clicks on any mathematical operation button.

And if they need to reset the values, they can click a reset button.

Create calculator in the Power Apps

To achieve this, follow the below steps:

  • On the Power Apps screen, insert all the controls mentioned below, change the property, and set the formula to act.
Control NameUsed forProperty and formula
Text Label (lbl_1st Value)Here, the user will enter the 1st Digit value to Calculate Text = “Enter the 1st value: “
Text Input (txt_1st Value)This displays only the Label control nameDefault = 0
Format = Number
Text Label (lbl_2nd Value)Here, the user will enter the 2nd Digit value to Calculate.Text = “Enter the 2nd value”
Text Input (txt_2nd Value)This displays only the Label control name Default = 0
Format = Number
Text Label (lbl_ResultValue)It displays the calculated result of two values.Text = Result
Text Label (lbl_Result)This display only the Label control nameText = Result:
Button (btn_addittion)This helps to add any two numbersOnSelect = UpdateContext({Result: ‘txt_1st Value’ + ‘txt_2nd Value’})

Text = +
Button (btn_subtraction)It calculates by subtracting two numbersOnSelect = UpdateContext({Result: ‘txt_1st Value’ – ‘txt_2nd Value’})

Text =
Button (btn_multiplication)This helps to multiply two numbersOnSelect = UpdateContext({Result: ‘txt_1st Value’ * ‘txt_2nd Value’})

Text = *
Button (btn_division)This helps to divide two numberOnSelect = UpdateContext({Result: ‘txt_1st Value’ / ‘txt_2nd Value’})

Text = /
Button (btn_percentage)This displays only the Label control nameOnSelect = UpdateContext({Result: lbl_ResultValue / Resultanswer * 100})

Text = %
Button (btn_reset)If the user clicks the Reset button, it reset all the text fields.OnSelect = UpdateContext({Result: 0});
Reset(‘txt_1st Value’);
Reset(‘txt_2nd Value’);

OnSelect = RESET

Here, I will explain one code and how it performs. We have used the same code for all button controls but only need to change operations like(+,-,*,/).

Choose a Button and select the OnSelect Property.

Addition:- OnSelect = UpdateContext({Result: 'txt_1st Value' + 'txt_2nd Value'})
Subtraction:- OnSelect = UpdateContext({Result: 'txt_1st Value' - 'txt_2nd Value'})
Multiplication:- OnSelect = UpdateContext({Result: 'txt_1st Value' * 'txt_2nd Value'})
Division:- OnSelect = UpdateContext({Result: 'txt_1st Value' / 'txt_2nd Value'})

where,

  1. Result = Variable name
  2. txt_1st Value = The text input control name, where we enter the 1st value
  3. + = It performs the addition
  4. txt_2nd Value = The 2nd text input control name, where we enter the 2nd value
Build a Calculator in Power Apps

The video below represents how our Power Apps calculator performs after adding the controls.

Method 2:

In this section, I will explain how to build a calculator using button controls.

Example,

I created a Power Apps Canvas app and added two Text label controls and fifteen Button controls. Whenever the user needs to perform a mathematical operation, they can use the button controls, and then whatever the selected button value will be displayed on the first label control.

Later, when the user clicks an equal button, the result value will be displayed on the next label control.

Calculator in Power Apps

Now, we will create the above calculator step by step by using the New screen, follow the below steps to build the calculator in Power Apps.

Step 1:

Here, we will add the 9 buttons to perform the number button action to calculate the values.

Create a calculator in canvas app Power Apps

Button 1:

  • Now, in button 1, set the Text property to:
 "1"
Build a calculator in Power Apps
  • On the same button control, set its OnSelect property to:
If(
    varNumber = "0" || varToggle = true,
    UpdateContext({varNumber: "1"}),
    UpdateContext({varNumber: varNumber & 1})
);
UpdateContext({varToggle: false})

Where,

  1. varNumber = Creating a variable for all number button controls
  2. varToggle = Passing the variable name to clear the values
Build a calculator in canvas app Power Apps

Then, do the same for all the remaining 2-9 buttons by changing the text property and the OnSelect property.

ButtonsTEXT PROPERTY OnSelect Propert
Button 2“2”If(varNumber=”0″||varToggle= true ,UpdateContext({varNumber:”2″}),UpdateContext({varNumber:varNumber&2}));UpdateContext({varToggle: false })
Button 3“3”If(varNumber = “0” || varToggle=true, UpdateContext({varNumber:”3″}),UpdateContext({varNumber:varNumber & 3}));UpdateContext({varToggle:false})
Button 4“4”If(varNumber = “0” || varToggle=true, UpdateContext({varNumber:”4″}),UpdateContext({varNumber:varNumber & 4}));UpdateContext({varToggle:false})
Button 5“5”If(varNumber = “0” || varToggle=true, UpdateContext({varNumber:”5″}),UpdateContext({varNumber:varNumber & 5}));UpdateContext({varToggle:false})
Button 6“6”If(varNumber = “0” || varToggle=true, UpdateContext({varNumber:”6″}),UpdateContext({varNumber:varNumber & 6}));UpdateContext({varToggle:false})
Button 7“7”If(varNumber = “0” || varToggle=true, UpdateContext({varNumber:”7″}),UpdateContext({varNumber:varNumber & 7}));UpdateContext({varToggle:false})
Button 8“8”If(varNumber = “0” || varToggle=true, UpdateContext({varNumber:”8″}),UpdateContext({varNumber:varNumber & 8}));UpdateContext({varToggle:false})
Button 9“9”If(varNumber = “0” || varToggle=true, UpdateContext({varNumber:”9″}),UpdateContext({varNumber:varNumber & 9}));UpdateContext({varToggle:false})

The below image represents how the screen looks after adding 9 buttons to perform the number button action in Power Apps.

Build a calculator using canvas app Power Apps

Step 2:

Text Label 1:-

  • Insert Text label -> Set its Text property to:
varNumber

Where,

  1. varNumber = Passing the number variable
Calculator in canvas app Power Apps

Text Label 2:-

  • Insert another Text label -> Set its Text property to:
varCalculate

Where,

  1. varCalculate = Passing the variable of calculating values
Calculator using Power Apps

The below image represents how the screen looks after adding two Text input controls.

Create a calculator using canvas app Power Apps

Step 3:-

Here, we will insert the 5 buttons to perform the mathematical operation between a numbers button to calculate the values.

Power Apps canvas app calculator

Now we will see how to perform the mathematical operation using these buttons:

Addition:

Here, we will calculate the total of two or more numbers.

  • On the first Button control, set the Text property to:
"+"
Calculator using canvas app Power Apps
  • On the same button control, set its OnSelect property to:
UpdateContext({varCalculate: varNumber & " + "});
UpdateContext({varToggle: true});
UpdateContext({varCalcType: "Plus"})

Where,

  1. varCalculate = Setting a variable to calculate the values
  2. varNumber = Passing the number variable
  3. varToggle= Setting a variable to clear the values
  4. varCalcType: “Plus” = Setting a variable to perform the addition
How to build a calculator in Power Apps

This is how to calculate the addition function by using the number button.

Subtraction:

Now, we will find the difference between the two numbers.

  • On the second Button control -> Set the Text property to:
 "-"
How to build a calculator in canvas app Power Apps
  • On the same button control, set its OnSelect property to:
UpdateContext({varCalculate:varNumber& " - "});
UpdateContext({varToggle:true});
UpdateContext({varCalcType:"Minus"})

Where,

  1. varCalcType: “Minus” = Setting a variable to perform the subtraction
How to build a calculator using canvas app Power Apps

This is how to calculate the subtraction function by using the number button.

Multiplication:

Here, we will calculate the product of two or more numbers.

  • On the third Button control -> Set the Text property to:
 "*"
How to build a calculator using Power Apps
  • On the same button control, set its OnSelect property to:
UpdateContext({varCalculate:varNumber& " * "});
UpdateContext({varToggle:true});
UpdateContext({varCalcType:"Multiply"})

Where,

  1. varCalcType: “Multiply” = Setting a variable to perform the multiplication
How to create a calculator in Power Apps

This is how to calculate the multiply function by using the number buttons.

Division:

Here, we will check the process of sharing a collection of items into equal parts.

  • On the fourth Button control -> Set the Text property to:
"/"
How to create a calculator using Power Apps
  • On the same button control, set its OnSelect property to:
UpdateContext({varCalculate:varNumber& " / "});
UpdateContext({varToggle:true});
UpdateContext({varCalcType:"Divide"})

Where,

  1. varCalcType: “Divide” = Setting a variable to perform the division
How to create a calculator using canvas app Power Apps

This is how to calculate the division function by using the number button.

Equal sign:

This button provides the solution for all the mathematical operations.

  • On the fifth Button control -> Set the Text property to:
"="
How to create a calculator in canvas app Power Apps
  • On the same button control, set its OnSelect property to:
UpdateContext({varCalculate: varCalculate & varNumber});
Switch(
    varCalcType,
    "Plus",
    UpdateContext(
        {
            varNumber: Text(
                Left(
                    lbl_calculate.Text,
                    Len(lbl_calculate.Text) - (Len(varNumber)+3)
                ) + Value(lbl_Number.Text)
            )
        }
    ),
    "Subtract",
    UpdateContext(
        {
            varNumber: Text(
                Left(
                    lbl_calculate.Text,
                    Len(lbl_calculate.Text) - (Len(varNumber)+3)
                ) - Value(lbl_Number.Text)
            )
        }
    ),
    "Multiply",
    UpdateContext(
        {
            varNumber: Text(
                Left(
                    lbl_calculate.Text,
                    Len(lbl_calculate.Text) - (Len(varNumber)+3)
                ) * Value(lbl_Number.Text)
            )
        }
    ),
    "Divide",
    UpdateContext(
        {
            varNumber: Text(
                Left(
                    lbl_calculate.Text,
                    Len(lbl_calculate.Text) - (Len(varNumber)+3)
                ) / Value(lbl_Number.Text)
            )
        }
    )
);
UpdateContext({varToggle: true});

Where,

  1. varCalculate = Passing the variable name to calculate the values
  2. varNumber = Passing the number button variable
  3. lbl_calculate = 1st label control name
  4. lbl_Number = 2nd label control name
  5. varToggle = Passing the variable name to clear the values
Build a Power Apps calculator

This is how to calculate the mathematical function using the equal sign button.

As per the image below, I have shown that the mathematical operation is working on the Power Apps calculator app.

Build a Power Apps canvas app calculator

This is how we can do mathematical operations between the number button values.

Step 4:

I will show you how to clear those values and perform the mathematical operation from a new one.

  • Insert another Button control -> Set the Text property to:
 "C"
Create a Power Apps calculator
  • On the same button control, set its OnSelect property to:
UpdateContext({varNumber:"0"});UpdateContext({varCalculate:""})

Where,

  • varNumber = Passing the number button variable
  • varCalculate = Passing the variable name to calculate the values
Create a canvas app Power Apps calculator

This is how we can clear the values and perform the mathematical function in the Power Apps calculator.

The video below represents how our Power Apps calculator performs after adding the controls mentioned above.

Conclusion

Here, I have shown you how to build a calculator in the canvas app Power Apps where the user can perform any kind of mathematical operation like addition, subtraction, multiplication, and division.

Moreover, I have explained how to build a calculator using two different methods:

  • By using a simple calculator
  • By using the number buttons

Also, you may like some more Power Apps tutorials: