Building EMI calculator with Microsoft Power Apps (Canvas Apps)

Building EMI calculator with Microsoft Power Apps

In last posts (  Power apps : Understanding What it is and why to use it? and  Types of Power apps: Canvas Apps and Model Driven Apps, Which to choose? ) i discussed about what is power apps and types of power apps.

Now as doing practical is great way of understanding things, i thought of creating a basic EMI calculator using power apps to show-case capability of power apps.

Power app being a platform have endless possibilities and this example is just one implementation of that.

To start, got to make.powerapps.com and click canvas app from blank and give a app name and select a format.

Remember Canvas app are pixel perfect means you have to explicitly create it for phone or table as per your use. It’s not responsive UI which can change shape as per screen.

This slideshow requires JavaScript.

You’ll be in power app studio now:

You’ll see a canvas visible to work with a blank screen.

Step 1: Adding a Header

I’ll use a button which is Click on button to create a button and give it a name, drag it till very right, set position as 0,0, set radius as 0 to make edges sharp. Display mode you can change to view to that it is not clickable.

There are some more features available in powerapp which enable you to reuse components like screen header, which we’ll discuss in further posts.

Step 2: Add sliders and set labels for input

Click on slider to Add 3 sliders for loan amount, interest and tenure. You can select one slider , copy and paste to create similar. Position as per requirement.

You have setting on right hand panel to set minimum and maximum value of each slider once you select the slider.

 

 

 

 

 

 

 

Step 3: Set input field on top right of each slider

Click on Input > Text input and place 3 input boxes on each slider on right side so that user can set value of text field manually.

Click on each Input box and rename it as shown below, It’s good practice to keep a meaningful names of components so that they are easy to refer in formulas.

Step 4: Set formula to set slider’s value as default value in input fields:

Select the TextInput_LoanAmt control and select default property and value to slider_loanamt*100000

Similarly set default of other 2 textboxes values as:

TextInput_Tenure = slider_tenure

TextInput_InterestRate = slider_interestrate

By doing so, your textboxes will have default values as per slider and since they are textinput control, they allow user to manually enter value.

Step 5: Add Labels to calculate EMI, Total Payment and Interest

Click on Label and add 6 labels just under the last scroll bar as shown below to shown values of EMI, Total Payment and Interest.

Rename labels as Label default name appended by EMI, EMIValue, TotalPayment, TotalPaymentValue, Interest, InterestValue as shown below:

Step 6: Add Formulas to calculate EMI, Total Payment and Interest

As we have mathematical formula to calculate EMI = [P x R x (1+R)^N]/[(1+R)^N-1],

where

P stands for the loan amount or principal,

R is the interest rate per month [if the interest rate per annum is 11%, then the rate of interest will be 11/(12 x 100)], and

N is the number of monthly installments.

Click on Label for EMIValue,TotalPaymentValue and InterestValue one by one and in the text property of label set formulas as below:

EMIValue= Text((TextInput_LoanAmt*(TextInput_InterestRate/(12*100))*(1+(TextInput_InterestRate/(12*100)))^(12*TextInput_Tenure))/(((1+(TextInput_InterestRate/(12*100)))^((12*TextInput_Tenure)))-1),"[$-en-US]#.##")

TotalPaymentValue= Text((TextInput_LoanAmt*(TextInput_InterestRate/(12*100))*(1+(TextInput_InterestRate/(12*100)))^(12*TextInput_Tenure))/(((1+(TextInput_InterestRate/(12*100)))^((12*TextInput_Tenure)))-1)*(12*TextInput_Tenure),"[$-en-US]#.##")

InterestValue= Text(((TextInput_LoanAmt*(TextInput_InterestRate/(12*100))*(1+(TextInput_InterestRate/(12*100)))^(12*TextInput_Tenure))/(((1+(TextInput_InterestRate/(12*100)))^((12*TextInput_Tenure)))-1)*(12*TextInput_Tenure))-TextInput_LoanAmt,"[$-en-US]#.##")

The screen would look like below:

Step 7: Let’s make it more intuitive, after all we have oob components like pie charts which we can use in canvas apps:

Click on charts option from insert menu and select pie chart as below:

This slideshow requires JavaScript.

Now pie chart need a collection/table like below to show some data:-

Let’s make this collection on the fly whenever user changes the value in any TextInput or he moves the slider.
We’ll use foll formula to prepare a collection as shown in above image:

Clear(ChartData);
Collect(
ChartData,
{
Title : "Interest",
Value: Value(Text((((TextInput_LoanAmt*(TextInput_InterestRate/(12*100))*(1+(TextInput_InterestRate/(12*100)))^(12*TextInput_Tenure))/(((1+(TextInput_InterestRate/(12*100)))^((12*TextInput_Tenure)))-1)*(12*TextInput_Tenure))-TextInput_LoanAmt),"[$-en-US]#"))
}
);
Collect(
ChartData,
{
Title : "Principal",
Value: Value(Text(TextInput_LoanAmt))
}
)

 

Now to explain this formula:-

Clear(ChartData) will clear the collection

First Collect formula will add a row in collection where Title would be interest and Value would be Interest calculated by formula. Text(–,”[$-en-US]#”) is used to parse decimal to integer.

Second Collect formula will add another row in collection where Title would be principal and value would be the value entered in TextInput_LoanAmt control.

Step 8: Update collection on every change in attribute

We need to call above formula on onchange event of all 3 sliders and all 3 TextInputs to make sure Collection is updates in real time.

Now click on each slider and TextInput and set formula in it’s update property as showen below:

This slideshow requires JavaScript.

Step 9: Let’s do some magic with pie chart

Now we want to show the values in the chart so click on chart and set it’s items properties to ChartData.Value means Value column of ChartData collection which we created in step 7.

Similarly to shown interest and principal on legend, select the legend of the chart and set it’s items property to ChartData.Title which will always have 2 values i.e. “Interest” and “Principal” .

 

Now you’r chart’s color might look both green unlike the one i have shown, to fix this click on the piechart and in it’s itemColorSet property there would be many colors RGBA available. You just need to keep 2 of your choice and remove rest.

Post removal of extra RGBA codes, it’ll look as below :-

Step 10: Voila…!! Save, Test and Publish and there you have your own EMI calculator

Click on file, save and Publish to make your app live. Don’t worry, it’ll not be available to anyone unless you shared it specifically.

Now to to make.powerapps.com > apps and select EMI Calculator app:

Here is you’r first Power App in action:

Hope now you a bit about building. Try playing around other components, screens , navigation to build some multi-screen Powerapps.

Cheers..!!!