How to update currency fields in Podio using ProcFu

Podio's API presents a challenge when handling currency fields as ProcFu only handles the numeric value of currency fields in Podio, ignoring the currency type.

If your currency is changing automatically (e.g., EUR to USD), this is due to Podio's API, not ProcFu. You may need to contact Podio support to address this issue.

However, you can create a custom currency selector in your Podio app using ProcFu. Here's how:

Step 1: Fetch the Current Currency and Allowed Currencies

We will retrieve the currently selected currency and the list of allowed currencies from Podio in the Before-Render Event of the detail screen.

// Replace these with your actual values
const APP_ID = 29099197;
const FIELD_ID = 257576042;

my_variables.currency = null;
if (current_item) {
    let field = podio_item_field_get(current_item["item_id"], FIELD_ID, 1);
    let currency = field[0]["currency"];
    my_variables.currency = currency;
}

my_variables.currency_list = [];
let app = podio_app_get_raw(APP_ID);
let fields = app["fields"];

fields.forEach((field) => {
    if (field["field_id"] === FIELD_ID) {
        my_variables.currency_list = field["config"]["settings"]["allowed_currencies"];
    }
});

Explanation

Replace APP_ID and FIELD_ID with your actual values.

This script:

• Fetches the currently selected currency.
• Retrieves the list of allowed currencies from Podio.
• Stores these values in my_variables for later use.

Step 2: Create a Custom Currency Selector

Next, we will generate a dropdown to allow users to select a currency. This will be added in the On-Render Event.

function createCurrencySelect(currency) {
  const selectElement = document.createElement('select');
  selectElement.name = 'currency';
  selectElement.classList.add('pf-input');

  const currencies = my_variables.currency_list

  currencies.forEach((currencyValue) => {
    const option = document.createElement('option');
    option.value = currencyValue;
    option.textContent = currencyValue;
    if (currencyValue === currency) {
      option.selected = true;
    }
    selectElement.appendChild(option);
  });

  return selectElement;
}

const currency = my_variables.currency;
const rateField = document.querySelector('input[name="rate"]');
const selectElement = createCurrencySelect(currency);
rateField.insertAdjacentElement('afterend', selectElement);

Explanation

The function createCurrencySelect(currency) creates a select element and populates it with available currencies.

The selected currency is pre-selected if applicable.

The dropdown is inserted next to the rate field.

Remember to replace rate with the actual field name in your app.

Step 3: Save the Selected Currency

Finally, we need to manually submit the currency along with the rate when the form is submitted. This will be added in the After-Submit Event.

podio_item_fields_update(item_id,'{"rate":{"value":"'+form_values["rate"]+'","currency":"'+form_values["currency"]+'"}}')

Remember to replace rate with the actual field name in your app.

Explanation

This script ensures that both the amount (rate) and the selected currency are updated in Podio.

Change rate if your field name is different.

Conclusion

With this approach, we successfully add a custom currency selector to Podio while ensuring the selected currency is stored correctly. Since ProcFu does not natively handle currency types, this workaround provides a way to retain currency information while updating values.