Custom Data List Viewer Horizontal Scrolling Component

Creating a Custom Data Viewer List
First, read the Thunkable documentation on the Custom Data Viewer Layout.

For this example, I only included a single image, but other components could be added as well.
Step 1. Create a column with absolute height and width of 200, vertical and horizontal alignment of center and the Advanced property of perspective “Rotate Z” of 1.5708. Then add a single image to the column with absolute height and width of 150.

Now save the column as a data viewer layout. Wait a minute or 2 for thunkable to catch up and the layout will appear.

Create a new copy of Screen 1 (see remix below) and add a data list viewer to the Scroll Container column. Click List Item Layout and select the new custom layout. Admittedly, getting all of the rows in columns in rows in columns is complicated, but it is worth it. Most importantly, note that Scroll Row has a rotate z of -1.5708. This is where the magic occurs.

Finally set up the data source for the horizonal scrollable list (for example JSON Bound Data List Viewer - No More Cloning!)

Now you have a high performance horizonal scrolling component

Remix Project
https://x.thunkable.com/copy/3c73f27320178cb1af853c35198e7541

8 Likes

Nice work, Ted!

Wonderful! You’re uncovering so many new sides to the Data Viewer Grid and list. Congratulations, and thanks for this!

Impressive! Can you explain the rotate Z value?

Ha! I wish. I simply followed the instructions on this thread Create Horizontal Scroll (Swipe Like) Row - #9 by farzam-parto

1 Like

i have changed it to Thunkable Tutorials is it ok?

Okay. I did find this:

2 Likes

Whatever that means… :crazy_face:

beautiful.
any simple way to make it row scrollable? my app when i add list new button will created.
i just want the buttons able to scrollable in row.

@drted does this solution work on both android and iOS?
Also are any of the block required in your example or just the data viewer design?

Does this work on screens in a top tab navigator

This solution doesn’t work as a web app. Has anyone figured out how to make it work on all three platforms? :slight_smile:

1 Like

Do you mean the up/down scroll works fine with you in the web app using DVL?

I haven’t tested it recently but it wasn’t working previously.

The solution posted as the first post and shown in the gif scrolls left/right. That works great on the phone but not webapp

1 Like

Yes, I know and I used it previously but in the beginning of the year I wanted to use DVL in a web app and found out that scroll (up/down) was not working and changed it to a List Viewer.

I was developing a simple app for a hair dresser and she wanted to show the hairstyles and I thought it would be nice to have it swipe side to side but it did not work not the DVL scroll option worked to book an appointment.

Wait wait
@catsarisky this solution is relying on Local Tables which are not supported in web apps.

Do you think this is the issue?

Muneer local tables work fine in webapp.

1 Like

Not according to documentation
https://docs.thunkable.com/publish-as-a-web-app-pro#unsupported-components

[I’ve successfully used localDB a lot in a project that works fine on the web, although I don’t make any changes to the data. I’m guessing that changes to the localDB don’t change, but everything that’s there when I publish the app is accessible with no problems - you can see it in action here Thunkable - all the text, the names of the image files, and the action of the buttons comes out of a local table ]

So it /does/ seem to populate the data source correctly, seen here:

What it does /not/ do is scroll correctly in the horizontal direction in the web viewer. On my phone, it looks like this (as intended):

1 Like

@catsarisky, you are correct, the solution only works on devices, no on web apps.

There are sooooooo many discrepancies between the behaviors in apps (iOS and Android) vs. Web Apps, I long ago gave up on trying to make anything but the most rudimentary app work on all 3 platforms.

1 Like