725
Views
10
Comments
Solved
Image carousel from database
Question

Good Afternoon,
Im trying to make a carousel with 5 images my intent is that when I load the page I can see 5 different images loaded from the database and I want to be able to click an image to go to another web page.
Similar on what MyAnimeList has or Netflix for choosing movies to watch.

Based on some topics I've read here I was able to make 5 pictures appear on the carousel but those are the same exact picture (from the same row) and when I click on the arrow it has nothing and when I click again I have 5 same pictures from the next row. So this is not working and I have no idea how I can make that image clickable.

2019-06-15 21-39-22
Afonso Carvalho
 
MVP
Solution

You should only have 1 container with 1 image inside that TopRatedListRecord. Try leaving the first and removing the other four.

2019-06-15 21-39-22
Afonso Carvalho
 
MVP

Don't put 5 Image widgets in the same line. They'll read the Current value of your ListRecords and you'll just get 5 clones of the same image. Put one Image widget per Container inside your list.

And then use this property in the Carousel:

Your Carousel will show you 5 images at the same time, and since you have one image per ListRecords line, it will be unique.

UserImage.jpg
David Oliveira

Afonso Carvalho wrote:

Don't put 5 Image widgets in the same line. They'll read the Current value of your ListRecords and you'll just get 5 clones of the same image. Put one Image widget per Container inside your list.

And then use this property in the Carousel:

Your Carousel will show you 5 images at the same time, and since you have one image per ListRecords line, it will be unique.

See it by yourself:
https://killuah.outsystemscloud.com/MyGameList/Home.aspx?(Not.Licensed.For.Production)=

This is the only thing I have in my database

UserImage.jpg
David Oliveira

I'll give it a try, thank you very much!

UserImage.jpg
David Oliveira

I've placed every 5 images in 5 different container but it still doesnt give me the right result.
This is what happens:

Starts with nothing



Goes to 4 similar pictures


Then another one and an empty space followed by 3 similar pictures




2019-06-15 21-39-22
Afonso Carvalho
 
MVP

Hi David,

Can you share your espace?

UserImage.jpg
David Oliveira

Afonso Carvalho wrote:

Hi David,

Can you share your espace?

Of course.
https://drive.google.com/file/d/1dE2opjdeKB9BdkRan3f-t_Fsbr0eN4Tm/view?usp=sharing
Thank you for helping.


2019-06-15 21-39-22
Afonso Carvalho
 
MVP

Did you develop this outside of your Personal Environment? I can't install it as its covered by Intellectual Property Protection.

We'll have to do this the hard way. Can you validate these three things?

 - the output of the query that feeds the ListRecords (check it in debug and confirm that it's returning what you're expecting);

 - that you only have one container with one image inside the ListRecords:

 - that the image inside the container is using the Current Id of your database Image, something like this:


UserImage.jpg
David Oliveira

I did develop this on a PE, there is no way if I can share my Application with you when I have a PE?

1.
I've debugged the ListRecord, these were the results:


2, 3.

I've fixed the problem with the blank spaces on the carousel by setting Line Separator on the ListRecord to none.

2019-06-15 21-39-22
Afonso Carvalho
 
MVP
Solution

You should only have 1 container with 1 image inside that TopRatedListRecord. Try leaving the first and removing the other four.

UserImage.jpg
flash mob

That's great!! I will try it.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.