+ Start a Discussion
Sai Karthik KVSSai Karthik KVS 

How to create an mortgage calculator (which should get display on the left side of the home page - Under create new or somewhere nearer to it)which should be integrated to salesforce?

Best Answer chosen by Sai Karthik KVS
Nithesh NNithesh N
Try this, you need to add Mortgage formula in the java script
 
<apex:page showHeader="false" sidebar="false">  
    <html>
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />                      
            <apex:slds />  <!-- SLDS style sheet -->
        </head>
        
        <body>                        
            <div class="slds-scope"> 
                
                <div class="slds-page-header">                    
                    <div class="slds-grid">                                               
                        <div class="slds-col">                            
                            <h1 class="slds-page-header__title" title="Review"> Mortgage Calculator</h1>
                        </div>  
                    </div>
                </div>
                <br/>
                
                <div class="slds-p-horizontal--small slds-grid">
                    <div class="slds-form--stacked">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="inputSample2">Loan Amount:</label>
                            <div class="slds-form-element__control">
                                <input type="text" id="inputSample2" class="slds-input" placeholder="" onchange="calc()" />
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="inputSample2">APR %</label>
                            <div class="slds-form-element__control">
                                <input type="text" id="inputSample3" class="slds-input" placeholder="" onchange="calc()" />
                            </div>
                        </div>  
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="inputSample2">Term</label>
                            <div class="slds-form-element__control">
                                <input type="text" id="inputSample4" class="slds-input" placeholder="" onchange="calc()" />
                            </div>
                        </div>
                        
                    </div>        
                </div>
                <br/>
                
                <div class="slds-tile slds-m-horizontal--small">
                    <div class="slds-media__body">
                        <div class="slds-tile__detail slds-text-body--small">
                            <dl class="slds-list--horizontal slds-wrap">
                                <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">Monthly Payment :</dt>
                                <dd class="slds-item--detail slds-truncate" id ="MonthlyPayment" ></dd>
                                <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Number of Payments :</dt>
                                <dd class="slds-item--detail slds-truncate" id="NumPayments"></dd>
                                <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Total Interest :</dt>
                                <dd class="slds-item--detail slds-truncate" id="TotalInterest"></dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            
            <script>
            function calc() {
                var loanAmount = document.getElementById("inputSample2").value;
                var APR = document.getElementById("inputSample3").value;
                var term = document.getElementById("inputSample4").value;
                document.getElementById("MonthlyPayment").innerHTML = loanAmount*10; //Change it Accordingly
                document.getElementById("NumPayments").innerHTML = term*12; //Change it Accordingly
                document.getElementById("TotalInterest").innerHTML = loanAmount*12; //Change it Accordingly
                
            }
            </script>
        </body>
    </html>
</apex:page>

 

All Answers

Nithesh NNithesh N
You can create the calculator (in Visualforce) and add it in Visualforce Area Home Page Component and
Then Add the component to the left sidebar in the Home Page layout.
Sai Karthik KVSSai Karthik KVS
Nithesh,

Thank you and can you please help me with VF page. Thank you so much
Nithesh NNithesh N
What are the requirements and fields required ? And What object is it being Associated with?
Sai Karthik KVSSai Karthik KVS
Nitesh,
Above is the exact requirement and I just want that to integrate with home page?User-added image
I need it in that way. Can you please help me out? - Lead object .
Thank you and appreciated.
Nithesh NNithesh N
The Way I see it, It doesn't need to be associated with any object right? Just a formula based Application ?
Sai Karthik KVSSai Karthik KVS
Yes, it doesn't need any object
Nithesh NNithesh N
Got it ! Let me Try
Sai Karthik KVSSai Karthik KVS
Thank you so much Nithesh.
Nithesh NNithesh N
Try this, you need to add Mortgage formula in the java script
 
<apex:page showHeader="false" sidebar="false">  
    <html>
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />                      
            <apex:slds />  <!-- SLDS style sheet -->
        </head>
        
        <body>                        
            <div class="slds-scope"> 
                
                <div class="slds-page-header">                    
                    <div class="slds-grid">                                               
                        <div class="slds-col">                            
                            <h1 class="slds-page-header__title" title="Review"> Mortgage Calculator</h1>
                        </div>  
                    </div>
                </div>
                <br/>
                
                <div class="slds-p-horizontal--small slds-grid">
                    <div class="slds-form--stacked">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="inputSample2">Loan Amount:</label>
                            <div class="slds-form-element__control">
                                <input type="text" id="inputSample2" class="slds-input" placeholder="" onchange="calc()" />
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="inputSample2">APR %</label>
                            <div class="slds-form-element__control">
                                <input type="text" id="inputSample3" class="slds-input" placeholder="" onchange="calc()" />
                            </div>
                        </div>  
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="inputSample2">Term</label>
                            <div class="slds-form-element__control">
                                <input type="text" id="inputSample4" class="slds-input" placeholder="" onchange="calc()" />
                            </div>
                        </div>
                        
                    </div>        
                </div>
                <br/>
                
                <div class="slds-tile slds-m-horizontal--small">
                    <div class="slds-media__body">
                        <div class="slds-tile__detail slds-text-body--small">
                            <dl class="slds-list--horizontal slds-wrap">
                                <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">Monthly Payment :</dt>
                                <dd class="slds-item--detail slds-truncate" id ="MonthlyPayment" ></dd>
                                <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Number of Payments :</dt>
                                <dd class="slds-item--detail slds-truncate" id="NumPayments"></dd>
                                <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Total Interest :</dt>
                                <dd class="slds-item--detail slds-truncate" id="TotalInterest"></dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            
            <script>
            function calc() {
                var loanAmount = document.getElementById("inputSample2").value;
                var APR = document.getElementById("inputSample3").value;
                var term = document.getElementById("inputSample4").value;
                document.getElementById("MonthlyPayment").innerHTML = loanAmount*10; //Change it Accordingly
                document.getElementById("NumPayments").innerHTML = term*12; //Change it Accordingly
                document.getElementById("TotalInterest").innerHTML = loanAmount*12; //Change it Accordingly
                
            }
            </script>
        </body>
    </html>
</apex:page>

 
This was selected as the best answer
Sai Karthik KVSSai Karthik KVS
Nithesh,

Awesome. Thank you so much. I've tried the above thing and I can see the output but when I'm trying to add that VF page to Home page Component (Left Side - Narrow Component) I couldn't able to see the calculator on the Home page. Any idea why it is not showing up?

Once again thank you and appreciated your help.
Sai Karthik KVSSai Karthik KVS
Nithesh,

It is showing the blank space, when I'm trying to add VF page to Home Page Component. 
Nithesh NNithesh N
Add it to the Home Page layout Setup > Customize >  Home > Home Page Layouts >  Edit >  ( Check the Component)
Sai Karthik KVSSai Karthik KVS
Nithesh,
Got it. Thank you so much for your help and appreciated. 

 
Sai Karthik KVSSai Karthik KVS
Nithesh, 

Calc is done and it's showing up in the narrow wide column in the Home page. How can we relate or link  that to the Opportunities? I just wanted to link that to the opportunities. After calculating the values, if I click over there it should redirect to the opportunities/scenarios? Is there anthing lick custom button or link we can add underneath of calculator?

Thank you and appreciated. 
Nithesh NNithesh N
We can add an button to the component to the page component, But i believe it doesn't save the existing calulation of the calculator when you redirect to the opportunities. 
Swapnil Patne 20Swapnil Patne 20
@Nithesh - thanks for sharing this, reall great tool. I have slightly modified it to suit our need so have a questions. 

Question- how do I round up the results in two decimals? for example  results for number of payments I get = 115.00200000000001 I want to display 115.00 or just 115

Please could you guide me? 

Thanks a ton.
Nithesh NNithesh N
You can use javascript functionality to tackle this...
Number((6.688689).toFixed(1)); // 6.7

Read about it here​ (https://www.w3schools.com/jsref/jsref_tofixed.asp)
MalakondaiahMalakondaiah
Hi All,

 I need object related calculator or custom button ?

Object : Account
Field : Picklist
Dob: Date

condition : picklist and dob selection need to display the cost as custom settings.

custom setting values
                age    cost
tariff1      23        7.66
tariff2     12         1.00
tariff3     10         2.33
tariff4     42        5.00

Thanks,
Malakondaiah
Daniel Probert 10Daniel Probert 10
if your looking for a simple lightning version of this as a part of upskilling on lightning this was something i thought i'd try to figure out how to do.

the code is in this repo and free to anyone that wants to use it: https://github.com/danielbprobert/mortgagecalculator-lc
Bex TerefeBex Terefe

Can someone tell me how much they paid to have this calculator created? I'm new to SF and am trying to have a calc with the following properties: 

 

1. Loan Amount

2. Term Length

3. Interest Rate

4. How many months (if any) are interest-free

5. Monthly payment. 

 

We were quoted several thousand. Can anyone develop this for us at a lower cost?

3 Creeks3 Creeks
If anyone on this thread is interested, my company just released an app on the AppExchange that does these mortgage calculations.  If you want to check it out here is the listing: https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000GXIktUAH   Thanks!