Mapping over input fields in List-view component

App Building
,
1
  • Goal:

I'm creating a form where some of the fields are dynamic. There's a multi-selector where you can add "Sales People" to the form. Right below the selector, i have a listview that takes and displays the selected items.

Each row in that list view has an input field, to enter a percentage. Of course, all percentages must sum to 100%.

I'm trying to add validation to the percentage input fields so that, if they don't sum to 100% the user won't be able to submit the form.

  • Steps: I have the multi-selector and the list view. The data is correctly selected and displayed, but I can't find a JS expression that sums the percentages on the validation property of the percentage input.

The problem is that I can find an array with the data but I can't find an array with the views (with the input field inside) to map/reduce over.

  • Details: Self-hosted retool v3.52.1

  • Screenshots:
    Screenshot 2024-08-22 at 17.17.15

2

Hi @Javi_V,

It's a bit different accessing the values from a listView in components outside the listView itself. For starters, you'll want to "Enable instance values", which is an option on the listView itself.

image

That will populate the the instanceValues property of the listView with an array of values for each item in the list.

Assuming your input is called numberInput1 and your listView is names listView1, you can then leverage loDash's sumBy method to easily sum up all the values in your dynamic inputs.

{{ _.sumBy(listView1.instanceValues, "numberInput1")  }}

You could then adjust this for your forms button, but putting something like {{ _.sumBy(listView1.instanceValues, "numberInput1") !== 100 }} in the button's disabled property.