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:

## 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.**

Control Name | Used for | Property 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 name | Default = 0Format = 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 = 0Format = 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 name | Text = Result: |

Button (btn_addittion) | This helps to add any two numbers | OnSelect = UpdateContext({Result: ‘txt_1st Value’ + ‘txt_2nd Value’})Text = + |

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

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

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

Button (btn_percentage) | This displays only the Label control name | OnSelect = 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,

**Result**= Variable name**txt_1st Value**= The text input control name, where we enter the 1st value**+**= It performs the addition**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,

**varNumber**= Creating a variable for all number button controls**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.

Buttons | TEXT 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.

**Step 2:**

**Text Label 1:- **

- Insert
**Text label**-> Set its**Text**property to:

`varNumber`

Where,

**varNumber**= Passing the number variable

**Text Label 2:- **

- Insert another
**Text label**-> Set its**Text**property to:

`varCalculate`

Where,

**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,

**varCalculate**= Setting a variable to calculate the values**varNumber**= Passing the number variable**varToggle**= Setting a variable to clear the values**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,

**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,

**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,

**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,

**varCalculate**= Passing the variable name to calculate the values**varNumber**= Passing the number button variable**lbl_calculate**= 1st label control name**lbl_Numbe**r = 2nd label control name**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:

- Power Apps Check Box Control
- Power Apps List box Control
- How to Set Default Item in Power Apps Gallery

Preeti Sahu is an expert in Power Apps and has more than 6 years of experience working with SharePoint and the Power Platform. As a Power Platform expert for Power BI, Power Apps, Power Automate, Power Virtual Agents, and Power Pages, she is currently employed with TSinfo Technologies. She is the author of the book **Microsoft Power Platform A Deep Dive.**Â She also made a big technical contribution to SharePointDotNet.com in the form of articles on the Power Platform. She enjoys traveling and spending time with her family in her spare time.