DEV Community

Explorer
Explorer

Posted on

💱 Automate Currency Conversion in Joget Using JavaScript and External API

#joget #lowcode #javascript #automation

🧩 Overview

In many Joget applications, users enter transaction amounts in different currencies. To maintain financial consistency, it’s crucial to automatically convert these values into a standard base currency (like AED or USD).

This guide shows how to automate currency conversion inside a Joget form using JavaScript, Fetch API, and jQuery Autocomplete — all without writing any backend plugin code.

⚙️ How It Works

✅ On form load:

  • The script sets the AED amount field to zero.
  • Fetches live currency symbols from a safe exchange rate API.
  • Activates autocomplete on the currency input field.

⚙️ Whenever a user changes:

  • The currency,
  • The amount, or
  • The product name,

the script recalculates the AED value dynamically and updates the related fields (amountInAed, BalanceAmount, and exchangeRate).

💻 Full Code 

<script> $(document).ready(function () { // Initialize amount field $('#amountInAed').val("0"); let currency = ""; // Fetch all currency symbols from a safe API endpoint fetch(`https://your-safe-api-endpoint/v4/latest/AED`) .then((data) => data.json()) .then((data) => { currency = Object.keys(data.rates); // Enable autocomplete for currency input field $('#CURRENCY').autocomplete({ source: currency }); // (Optional) Populate dropdown instead of autocomplete // currency.forEach((data) => { // $("select[name='CURRENCY']").append(`<option value=${data}>${data}</option>`);  // }); }); // Trigger conversion whenever key fields change $("input[name='CURRENCY'], input[id='AMOUNT'], select[name=productName]").on("change keyup click", function () { JogetgetResults(); }); // Fetch conversion rates and update results function JogetgetResults() { fetch(`https://your-safe-api-endpoint/v4/latest/USD`) .then(currency => currency.json()) .then(JogetdisplayResults); } // Perform conversion and update fields function JogetdisplayResults(currency) { var fromRateValue = $('input[name="CURRENCY"]').val(); let total = 0; let fromRate = currency.rates[fromRateValue]; let toRate = currency.rates['AED']; total += toRate / fromRate * $("input[id='AMOUNT']").val(); total = Number.isNaN(total) ? 0 : total; // Update converted amount fields $("input[id='amountInAed']").val(total); $("input[id='amountInAed1']").val(total.toLocaleString('en-IN')); // Update balance fields $('#BalanceAmount').val((parseFloat($('[name=rembudgetAmount]').val() || 0) - total)); $('#BalanceAmount1').val((parseFloat($('[name=rembudgetAmount]').val() || 0) - total).toLocaleString('en-IN')); // Display exchange rate information let DividedValue = Number.isNaN(toRate / fromRate) ? 0 : (toRate / fromRate).toFixed(3); $('#exchangeRate').val(`1 ${fromRateValue} = ${DividedValue} AED`); $('#exchangeRate1').val(`1 ${fromRateValue} = ${DividedValue} AED`); } }); </script>
Enter fullscreen mode Exit fullscreen mode

🧠 Example Use Cases

✅ Expense Forms — Automatically convert foreign expenses into AED.

✅ Quotation Requests — Display AED equivalent of multi-currency offers.

✅ Budget Management — Show live exchange rate for spending insights.

🛠 Customization Tips

💡 Replace "AED" and "USD" with your preferred base and target currencies.

💡 You can use a dropdown instead of autocomplete by uncommenting the related lines.

💡 Adjust toLocaleString('en-IN') for your region (e.g., 'en-US' for US format).

🚀 Key Benefits

✅ Fully client-side — no backend logic needed.

✅ Reduces human error in currency entry.

✅ Provides real-time and transparent conversion.

✅ Easy to extend or modify for multiple targets.

🔒 Security Note

Always use a trusted and HTTPS-secured API endpoint to fetch exchange rates.

Avoid exposing sensitive API keys directly in client-side code.

🏁 Final Thoughts

This lightweight JavaScript solution empowers Joget users to manage real-time currency conversion directly in forms — boosting both usability and data accuracy.

Top comments (0)