In this SharePoint Rest API tutorial, we will discuss how to implement Currency Converter in SharePoint Online using JavaScript and REST API.
We will build an application in SharePoint Online to check current currency value in the world.
In this application, I used Rest API to get the current value of the currency and I used JavaScript to do the calculation.
Step 1: Please look into the below screenshot. Here I used a simple script Editor Web part to build the code.
Below is the screenshot of my page.
Step 2: You can simply copy and paste the below code and used it inside a Script Editor Web part. In this code, I used Bootstrap and JavaScript as a reference.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<div class="container">
<h2>Currency Converter in SharePoint Online </h2>
<form class="form-inline">
<div class="form-group mb-2">
<input type="number" class="form-control" id="amount"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<select class="form-control" id="from_currency" required>
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD" selected>USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
</div>
<div class="form-group mx-sm-3 mb-2">
<label>convert to</label><div class="rate" id="rate"></div>
<select class="form-control" id="to_currency" required>
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR" selected>INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
</div>
<button class="btn calculate-btn btn btn-success mb-2" id="exchange">Convert</button>
</form>
<div class="result">
<p>
<span class="given-amount"></span>
<span class="base-currency"></span>
<span class="final-result" id="to_ammount"></span>
<span class="second-currency"></span>
</p>
</div>
</div>
</div>
</body>
</html>Step 3: Below is my script which can help us to build this app. Here I called api.exchangerate-api.com to get currency rate.
<script language="JavaScript">
var from_currencyEl = document.getElementById('from_currency');
var amountInput = document.getElementById('amount');
var to_currencyEl = document.getElementById('to_currency');
var to_ammountEl = document.getElementById('to_ammount');
var rateEl = document.getElementById('rate');
var exchange = document.getElementById('exchange');
var toShowAmount = document.querySelector('.given-amount');
var toShowBase = document.querySelector('.base-currency');
var toShowSecond = document.querySelector('.second-currency');
var toShowResult = document.querySelector('.final-result');
exchange.addEventListener('click', convertCurrency);
function convertCurrency(event) {
event.preventDefault();
var amount = amountInput.value;
var from_currency = from_currencyEl.value;
var to_currency = to_currencyEl.value;
var result = 0;
toShowAmount.innerHTML = amount;
toShowBase.textContent = from_currency + ' = ';
toShowSecond.textContent = to_currency;
var restUrl = "https://api.exchangerate-api.com/v4/latest/"+from_currency+"";
$.ajax(
{
url: restUrl,
method: "GET",
headers:
{
"accept": "application/json;odata=verbose",
},
success: onSuccess,
error: onError
});
function onSuccess(data) {
if(data)
{
var rate = data.rates[to_currency];
rateEl.innerText = "1"+ from_currency+" = "+rate+" "+to_currency+"";
toShowResult.textContent = (amountInput.value * rate).toFixed(2);
}
}
function onError(err) {
var response =
{
header: "error",
message: err
};
}
}
</script>Step 4: In the below screenshot , I converted the 12 USD to INR and the expected result would be 918.75 INR.
In button click, I called addEventListener to call the currencyConverter method.
Step 5: Below is one more example where I converted 70 SGD to EGP. The expected result would be 769 EGP.
You may like following SharePoint tutorials:
- How to get SharePoint list items using Rest API in Microsoft Power Automate
- Insert and Retrieve items to SharePoint Online list using Rest API
- How to get documents from document library in SharePoint using Rest API
- Display SharePoint List items in a data table using Rest API and jQuery
- Create and Delete List using Rest API in SharePoint Online/2013/2016
- Create a column in a list using Rest API in SharePoint Online/2013/2016
- How to create a SharePoint Online Chatbot using JavaScript
This is the example of creating a simple currency converter in SharePoint Online using REST and JavaScript.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
Hi tried this code but getting errors!
Please check the error in console and let me know the exact error. This code is fully tested and its working as expectd .