Create Horizontal Scroll (Swipe Like) Row

Thanks for your patience.

Here is a very flexible solution. Briefly, I added an additional column “Master Column” which eliminates the extra space issue of the original (and BRILLIANT) solution. Instead of creating multiple “scroll items” as outlined in the original solution, I’ve created just one call ScrollTemplate which will be cloned (see below). I also made the form Scrollable to accomodate multiple rows.

You are still stuck with square list elements. Because of the z Rotation that makes this solution work, changing the size and the shape of the template is tricky. Plan to use squares or spend a lot of time fiddling around with margins, padding, etc.

The start event triggers a loop through a JSON tree (this could easily be moved to a button).

The key is the JSON tree.


The "Parent’ object “APP Shows” is a list. Each item in the list contains an Object (show). Each show represents a ROW to be created in the form. The NAME property is used for the row label (lblContainer). Each SHOW object has a list CHARACTERS. Each character object will be mapped to the cloned Scroll template.

Then the Fill List Block will use the CHARACTER object (regardless of how many there are), to generate a new label, image, or button component within the template.

Here is a GIF from this simple tree. But it could have any number of SHOWs, CHARACTERs, and CHARACTER properties.

Here is a remixable project lnik
https://x.thunkable.com/copy/8282b1f9a313e25493dacdd29a0447ad

1 Like