I seek your assistance in doing the following: On this page (see screenshot), the user must decide how much money to allocate per month to each goal, regardless of the goal’s value. Only the allocation amount matters and must be defined on this page. My objective is that the sum of the range inputs, cannot exceed the total budget.
Overview of variables:
The number of goals is defined by the variable: “User.Goals.Totals”. Here, the user set 2 goals
The number of goals determines the number of range inputs on the page (here, then 2)
The total budget for all goals is defined by the variable “Monthly_savings” (here 3000)
Below is a screenshot from Ally.com. It shows me going through the process of transferring money into a savings account that has buckets/envelopes. In this example, I am attempting to transfer in $1,000 USD and can divide it among the 6 buckets however I see fit. What I think Ally does well here is that they display (to use your terms) a) the maximum and b) the sum of the range inputs; doing this gives the user greater visibility “behind the scenes.” Furthermore, Ally attempts to prevent errors by showing me a message at the bottom of the allocations column, telling me how much under/over I am to my maximum—I might have expected the button to be disabled until the sum == the total I am transferring, and for the text to highlight red if I am over.
I’m sure this puts a bit more responsibility on the user to make sure everything adds up, but I think it reduces overall complexity on both you and your user, eg do you set a max value of the slider or disable goals if the maximum has been met, and from the user perspective the slider isn’t the best UI element for granularity. Plus, I imagine the complexity increases with each additional goal a user has.
I hope something in here helps! Let me know if you have any other questions, and definitely let us know how this turns out.
You can generate an array of inputs and bind that to a div with a following formula. This actually also divides the budget into the same amounts. The enforcing part is harder as mentioned by @archenia_jsanchez. You can then update these with an action like this. Where the index is the item.index from the context and the value is the event.value
Thanks the formula’s format is “accepted” now and it seems it’s getting almost there
To have it dynamic per user, I bound the “count” to the variable in my collection saying how many objectives there are (here, 2) and to the maximum budget (here 3000). And it seems the formula works
However, the range inputs do not yet. I identified 2 challenges:
I managed to put the initial value to be the result of the formula and divide the total budget into 2 (i.e. value of 1500 on both range inputs ). While this “works”, this does not automatically feed the array “goals”. I suspect it’s because of the workflow “on change”, as it does not change yet, it’s not feeding the array.
Also, oI assume the max range should be the budget minus the sum of all range inputs. So far I have put the maximum budget (here 3000). The thing is like this, the sum of the range inputs is allowed to be higher than the maximum budget.
I think you should look for other solutions, this (range selector) is very not UX friendly and quite tough to pull off to be honest. If you set the max range like this, you’ll lose the scale of the amount, it can be 10k remaining, but also 100 bucks.
Yes I did some research in complement to what you and John said and indeed range inputs are not made for what I want to do. I now use input fields and it’s much easier to control. I think I’m almost there !
One question for which I found an answer absolutely nowhere: When I land on the page, the array it’s empty while there is an “initial value” into each input fields so how can an array be populated already with the “initial value”?
Hi @MrUnfreeze,
I managed to reproduce your use case.
Here is what you can do:
First, as we cannot update locally a collection without refetching yet. You need to create an array variable that you can initialize on page load with the data of your collection. Like this:
Hi - I see a cake next to your name so happy birthday
Ok so I worked with a page triggered workflow to loop through the collection and populate information in the array and it works. I combined with a PATCH API to send data to Xano and everything seems to work well ! Many thanks for your help !
Thank you so much! @Broberto 's solution actually worked well and following his + @archenia_jsanchez advice I opted for input fields instead which are easier to manage and better for users.
This being said I have another use case where I will definitely use the range inputs, on which I will start working asap so I will let you know about your solution!
Hey, glad to have helped! Thanks, it’s not my birthday (yet) it’s just 1 year since I registered, but I’ll take this as an early bday wish I appreciate it alot.
Can’t believe you’ve only been around for a year, I feel like you’ve been so active in the community since I’ve learned about WeWeb. Appreciate all the threads you’ve chimed in on! @Broberto
I’m really grateful to hear that my presence and replies actually help you guys That’s exactly why I’m doing it, and I’ll probably keep to do so for a while :D. I remember you starting @Micah, and look at you now, a you became WeWeb Pro.
I appreciate it alot.