Carousel Items on click details
Application Type
Mobile, Reactive

I have created a carousel list, when I click on a next or previous carousel button . It should show the details below container  mapped  in the list screen. Also When I move the carousel the details needs to changed according to the current carousel item.

Note: I didnt used any forge component.

Hi Irfan,

You can make this kind of flow by using Carousel's OnItemChange event. You need to handle changes with this event and you should set the current item depends on the index of the current item.

You can check the example here: https://nsahinbay.outsystemscloud.com/ReactiveDemo/Home
Also, you can check the .oml file attached.


Sincerely,
Necmettin

CarouselIndex.oml

Hey @Necmettin Sahinbay , for one scenario i.e when carousel moving from left to right ,its working 
but in below scenario its not working


1. By default on intialize i need display first carousel item data in below list . I have added Index[0] in OnIntialize . I didn't got results.
2. While moving carousel through prev,next arrows from right to left ,particular list items is not working .

Thanks in advance

Hi Irfan,

Could you please share .oml file that includess replicated your issue? It would be faster to know your issue.

Sincerely,
Necmettin 

hi @Irfan Ahamed Abdul Shukoor 

I have implemented what you expected. To achieve that please follow the below step

1.Interaction\Carousel-> it has event property "onItemChange"-> add handler client action on it

2.Handler action having input param as Index(intger value of index).


3.Create local variable with entity identifier  from which your data will get populated below

4.Asign that variable in handler action like

GetData.List[Index].Entity.Id

5.Create separate  aggregate which will execute on demand and add required entities and   filter as given

5.You will get identifier value from list which assign to carousel

6.Add filter on you list and compare entity identifier which this variable so your record will populate in container

This is working for me please look into below url

https://personal-dt37vy6p.outsystemscloud.com/Forum/Home

Please mark solution if work for you

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