Using a JS binding to sum all "active" app states

[hawkinsjon]

I am using app states in my Budibase app as storage for the facets and filters selected by a given user. When the user returns to this app, and their filter preferences have been retained since the last session (I have all filter app states set to persist), I'd like to create a visual indicator to remind them. This indicator would just be a count of the number of filters being used at the given moment.

To do so I needed to find a way to sum up all of my active app states. I needed to define "active" because as you know a app state can exist/not exist, can exist with no value, or exist with a value. Additionally, if an app state contained multiple, comma-delimited values, I still needed it to just count as 1 (not many) at the time it's being added to the other active app states.

I reached out for help on the BB discord chat and was given an elegant solution from @andz-bb. To make sure others have a chance to benefit from this, I'm sharing his work now. Thanks again Andrew Thompson.

if you know the keys for each state you could use a JS binding like this to return the count:

const state = [$("State.state1"), $("State.state2"), $("State.state3"), $("State.state4"), $("State.state5")]
return 'count: ' + state.filter(Boolean).length

I'm just creating a new array with each state value I want to count. If the state value is undefined or another falsey value I filter it out, and then return the length of the filtered array. Here it is in action:

[andz-bb]

thanks for the writeup and the kind words @hawkinsjon! 🚀