Calculated Value in Datagrid

Ask us anything
1

Hi all!

I have a datagrid with two columns that a user can edit, and a third read-only column which is the product of the first two user-editable columns.

What’s the best practice for the calculation? Do it in WeWeb and then send the calculated value to Xano? Or have Xano do the calc and then return it to WeWeb?

Thanks!

2

You can use a custom readonly column on your datagrid.
Then drag and drop a text inside the flexbox which appears when toggling the column type to custom.
Bind the text content to your formula :slight_smile: (context.item will contain your row)

If the calculation is easy (just a product), it’s always best to do it in front, to avoid corrupted data in the back (someone sending a value which is not the formula you want from the two others). Its also avoid storing too many data.

Note: it can be usecase when you want to have this column in the back (for sorting per ex), but in this case i advice that your post endpoint do the math before saving the data, not the front.

2 Likes
3

Worked perfectly thanks @aurelie! :star_struck:

4

And just to show you what I ended up with, I used the incredible AI co-pilot to generate some custom JS to format the output with a $, commas and two decimal places. Worked first time! Amazing.

image
image451×530 37.5 KB

1 Like
5

Awesome to see folks using the AI tools. When I have a project it fits, I’ll be sure to check it out.

1 Like
6

@aurelie I did end up calculating the product in Xano as I will need it for other purposes. It’s ok to calculate the sane thing in two places? Why not just have Xano calculate it and return the total to the front end? Or have the front-end submit the calculated value to Xano? Either way it just feels wrong to calculate it twice. Am I overthinking?

7

If finally you end up needed it on the database, I advise you to have it handle by the backend only.

  • The get should return the product
  • The edit should only accept the two others parameters, and your backend will do the maths before pushing in the database
  • in your datagrid you mark this column as read-only (no edit), and you can go back to a normal text column or keep the custom one but bind to the field of your backend instead of doing maths.

A reason to do the maths in front would be to have instant feedback while editing the other values (so you see the result before the backend process it). Can be a good user experience depending on your workflow.

Edit: I just watch your video, and I think you have the correct approach (modulo the eventual user feedback when editing). Only suggestion: I am not an expert in xano, but maybe do the maths and make only one update to the DB instead of push/read/push again (do not know if possible)

1 Like
8

Thanks again @aurelie. Yes in this case doing it in the back-end seemed correct. I will see if I can streamline the API further per your suggestion.

9

Hi Aurélie,

I have the same request with showing a calculated field based on 2 editable fields in the datagrid.
The datagrid is populated through a collection from Xano.
I added a custom column to show the total which is a product of the 2 editable fields.
So the number display field has the following formula: item.data.quantity * item.data.unit_price.
But when I edit the quantity or unit_price the total doesn’t change which is logical because the data in the collection is not changed until you click save after editing.
How do I make the total change when the quantity and unit_price are changed without updating the collection?
User story reason: creates an offer with several cost lines, wants to review the cost lines and make some changes. Wants to see the total change per line when he makes some changes. If he is satisfied, he clicks save and only then the collection is updated with the new values.

image
image563×303 17.2 KB