Carousel not working with ListRecords
Application Type
Traditional Web
Service Studio Version
11.14.14 (Build 59923)
Platform Version
11.14.0 (Build 34092)

Hey there,

I'm having a problem with the Carousel widget from Outsystems UI Web.
I've attached a module with an example of the problem.

In Webscreen1 I'm using a ListRecords within the Carousel. the Source of the ListRecords is just a list with 2 records just to force the ListRecords to iterate twice.

In Webscreen2 I'm using the same image twice inside the Carousel.

At runtime Webscreen2 shows correctly the Carousel with 2 images, but WebScreen1 doesn't.


What am I doing wrong?


Thanks in advance

TestCarousel.oml

Solution

Hi Gonçalo,

That's strange, I just tested your example and to me worked just fine. I algo changed the limit of recordos to 5 and add an extra append to the list and I got 3 images on display.

What's the version of the OutSystemsUIWeb that you are using? I'm using the 1.8.14




Hi Thiago,

I'm using Outsystems Ui Web 1.8.12.
I don't understand why you say it's working, since your print screen shows the Carousel not working.
I'm seeing 3 images vertically, and this is supposed to be a horizontal carousel.

You should only have a container and an image getting the data from the database. Not static.

Check this

https://www.outsystems.com/forums/discussion/48979/image-carousel-from-database/#Post181571

Change this to database

And put on the preparation a fetch to some entity with images, then you just need to change this attributes

the attribute to the binary data, and the file name to the name of the file.

Check the OML how I did.

carousel1.oml

Hi Márcio,

I've done as you say but the error still persist.
I've attached a new version of my test for you to see.

Please access Webscreen3.aspx and upload 2 images.
Then run Webscreen1.aspx and see that they appear 1 below the other.

I'm still missing something.

TestCarousel.oml

Solution

You need to add this class to the list records.

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