Data Binding from a scroller? Thumbnail/Image Carousel?

Question
#1

Hey all! I’m brand new to AppGyver and developing in general, so forgive me if my terminologies might not be right here.

I’ve been inspecting AppGyver after I ran into some problems with Thunkable and trying to find any possible workaround for binding data from a scroller to elements on the page. From what I’ve gathered it seems like UIScrollView would be the option to use if it were available in AppGyver.

In the example below, the blue box contains a scroll column. The scroller contains avatar images from a database. As the user scrolls through the options I’d like the data from the object in the center, the red box, to automatically bind to the elements on the page; the 4 text fields and large right image (highlighted in red).

EDIT: My current thinking is

  1. Stack three image carousels together and try to configure them to scroll vertically. This might help with the data binding (I hope!).
  2. Set the first image that appears in each carousel as 1, 2, 3… respectively giving the illusion that three a one single element
  3. Increase the container height and z-index on the center carousel enough to overlap the other two. Then and add some logic so that whenever the user scrolls up or down on the center carousel the top and bottom carousels change accordingly.

Would this work? And if so, I noticed that image carousels don’t seem to support swiping, the user has to tap the arrows. This makes the user experience kinda clumsy. Is it possible to use some Javascript or something to make them scroll?

floater picker (starter tier)
floater picker (starter tier)390×844 265 KB

#2

Hi! I’m afraid it’s not possible to track which component is at what position in the scroll view that we currently have – you could create a custom image carousel (and there is one if you check out the Marketplace), but it would have to be click- and not scroll-based.

#3

Thanks Mari! :raised_hands:t5:

I’m testing it with this one. Is it the same one you mentioned?

image
image1139×620 47.7 KB

I noticed what you mentioned about being click-based which makes the user experience feel kinda clumsy. Do you know if its possible to use javascript to make it scrollable?

If not, would it be possible to build this in webflow and display this page in the app as a progressive web app? Again, novice here so I don’t know if PWA is the right term but basically can I make this page appear as part of the native app without the browser bar etc?

Sorry for all the questions. Ive just built my whole project in Thunkable before realizing I can’t edit the code for the little tweaks I need it to do and trying to avoid the same problem with AppGyver!

#4

That’s the one! I gues you could try displaying it with the Web View component, but I’m not sure how smoothly it will integrate as I haven’t tried it myself.

#5

I am trying to use this component Image carousel. did you manage to implement, if you do , do you mind to share your steps?