Form items inside a Reorder list

I have a form with an images section. I’ve put these images in the native Reorder List (with custom css to make it horizontal).

I want to use the item.index’s and pass those as sortOrder when submitting the form, but I also want to use the checkbox so users can select which items they want to include in this specific submission.

Problem: When clicking the checkbox inside the reorder list, nothing happens / gets logged. When I place it outside the list (as you can see in the screenshot) I get an input that’s true/false.

Hoping anyone has a solution for this.. Maybe it’s a bug?

1 Like

Hi Nealzie :waving_hand:

Did you check Sam’s video?

Did it help?

Edit : ok I did now find how to make a property inside the component and bind the object of the item to it so that I have everything available inside the component

Hi Agustin,

Thanks for your reply, and thanks @sam1 .

Yes I watched it several times over and over to get a grasp of it, but It actually made things even harder to understand, haha.

First, my repeated list consists of an object I get through Xano. When I turn the first div under the repeated list into a component, I lose all the data that the item was made of and can’t figure out how to get that data available inside of the component.

I did manage to connect a variable to the checkbox inside the component. Strangely enough when using the data log, I only see the variable being updated on 1 of the checkboxes, however to test I connected a popup to the same workflow, which pops up on both checkboxes so I guess the variable gets updated on both too.

So feels like one small step closer but not quite there yet.

ok so I might be in over my head right now…

The goal is, to

  • have the user select the image they want to include in the ad through the checkbox
  • reorder the way they want it

So the reordering happens outside of the component, and the checkbox is inside the component.

Right now, when reordering, I have a javascript that gives me an object with the images in that order:

// Map through the updated list and create array with index
return event?.['updatedList']?.map((item, index) => ({
    ...item,
    sort_order: index
})) || []

But for the life of me, I wouldn’t know how to then pull the value of the variable ‘selectedImage’ from inside my component (I checked the 'available outside component) and add that value to this array with the matching object.

Any guidance in the right direction would be much appreciated!