Stat card value to display a sum

[jleech1992]

Hello there,

Bare with me as I'm learning the ropes but I am currently trying Budibase and unable to achieve something that's probably simple.

I have created a stat card labelled 'Total Sales' and in the value section, I'm trying to get it to display the sum of how many units there are in the 'RS Units' column in the table I have created in the data section of Budibase. (I have fake data in the table)
I am using ChatGPT as a guidance and so far it has provided unsuccessful coding whether it is Bindings or JS coding, the results I keep getting is either '0' or 'Error whilst executing JS'.

It would be greatly appreciated if an expert could help me to achieve this.

Table name in data section: Business Finance Data
Row name: RS Units

Thanks in advance.

[mikesealey]

Hi @jleech1992

I've been looking into this for you. Don't worry about not being able to achieve something simple, it's only simple when you know the answer! Also a quick note on rows vs columns - rows go horizontally across the table (think rows of seats in a theatre), and columns go vertically (Like the columns of the Parthenon) .

The way I've tackled this is by using a Data Provider component, and putting the Stat Card inside that. Set the Data Provider to fetch from your table using the Data option.

Component Tree

Data Provider Settings

Then, in the Value field of your Stat Card switch to JavaScript.
let rows = $("New Data Provider.Rows")
This gets all of the rows in the table you set in the data provider, as an array of objects. You can see what it looks like by clicking on your Data Provider in the bindings menu and hovering over "Rows"

let total = 0
This variable will be used to tally up everything in your RS_Units column

rows.forEach(row => {
  total += row.RS_Units
})

This forEach() function loops through the array of objects and adds the RS_Units number to the current value of total

And lastly, make sure you are returning the value you want to display with
return total

The overall JavaScript function should look similar to this, but be mindful that your variables, table names, and components may have different names.

I also changed the column name "RS Units" to "RS_Units" in the table, so that prop-drilling would be easier (see Line 5)

I hope this helps get you on your way. In the meantime be sure to have the Budibase documentation and JavaScript documentation nearby, and if you haven't already, come and join us on the discord server.