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:

To achieve it, follow the below steps:

Table of Contents

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.

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.

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

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.

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.

Button 1:

• Now, in button 1, set the Text property to:
`` "1"``
• 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

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

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

Step 2:

Text Label 1:-

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

Where,

1. varNumber = Passing the number variable

Text Label 2:-

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

Where,

1. varCalculate = Passing the variable of calculating values

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

Step 3:-

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

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:
``"+"``
• 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

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:
`` "-"``
• 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

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:
`` "*"``
• 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

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:
``"/"``
• 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

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:
``"="``
• 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

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.

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"``
• 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

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: