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

App Building
1

Hello everyone,

I’m looking for a way to manage number inputs in Retool where the user interface displays a rounded number, but the backend retains and processes the exact value entered by the user.

For instance, if a user inputs a value like 0.23674, the UI might display it as 0.24, yet the original, unrounded value should be preserved for database storage and subsequent calculations. Does anyone have insights or solutions on how to implement this? I need to ensure that the precision of the user's input is maintained throughout the system, even though a simplified, rounded version is shown in the frontend.

Thank you for your help!

5 Likes
2

Hi @Valentin,

It depends on which components you're using. Not knowing much about it your app or flow, here is one first suggestion:

Both the number input component and the number column type in a table component have a decimal setting that can be dynamic, you could have a switch that enables user to edit the value and automatically changes the number of decimals:

image
image1876×600 80 KB

if edit is enabled:

image
image1381×543 51.4 KB

Hope this points you in the right direction and feel free to share more about your app and flow.

You can use the inputvalue in the number Input component. and changesetArray in the table component to fetch the actual input of the user and create an success action on your run query that updates yoru back end to put your edit button back to false and numbers back to 2 decimals

image
image960×480 55.9 KB

1 Like
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