How to Display Rounded Numbers in UI but Retain Exact Values for Backend Operations?

💬 App Building
3

Another take on this.

  1. Create a Number Input Component:
  • Add a Number Input component to your Retool app.
  • Name it numberInput.
  1. Create a Text Component for Displaying Rounded Value:
  • Add a Text component to display the rounded number.
  • Name it roundedDisplay.
  1. Write a JavaScript Query to Handle the Rounding:
  • Create a JavaScript query that rounds the value for display purposes.
  • Name the query roundValue.
// Get the exact value from the number input
const exactValue = numberInput.value;

// Round the value to two decimal places
const roundedValue = Math.round(exactValue * 100) / 100;

// Set the rounded value to the display component
roundedDisplay.setValue(roundedValue);

// Return the exact value for further use
return exactValue;
  1. Trigger the JavaScript Query on Number Input Change:
  • Go to the numberInput component settings.
  • In the event handler, run roundValue query.
  1. Store the Exact Value for Backend Operations:
  • When you need to use the exact value (e.g., for saving to the database), reference the output of the roundValue query.
  • Example:
const exactValue = roundValue.data;

// Use exactValue in your backend operations or save to the database
1 Like