💱 Automate Currency Conversion in Joget Using JavaScript and External API

🧩 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>

🧠 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.

Explorer @exploringmylifeworks