Mobile Carousel
Question
Application Type
Mobile

I want to create a Mobile Carousel and when a set the position Interger (2) than Its Working For specific Position

Result:


But I want to create local variable and assign value at run time and pass than value in position than  set the position:

Result Like This But I want Prev Result??


Mobile Carousel  and web Carousel  is different???


Thanks


mvp_badge
MVP
Solution

Hi Mansur,

For your latest use case, as Tousif suggested in the previous reply, you will have to use the CarouselGoTo client action in the Button OnClick handler action flow.

Refer to the attached oml.


Kind regards,

Benjith Sam

Caro.oml

Solution

Firstly Thank You so much @Benjith Sam sir,

Hi all ,

I had a dropdown and its store three list of date value( Current week , prev week and next week), by default Current week selected and  Carousel position value set the current date and next and prev week Carousel position start from 0 Index.

but there is a bug in Carousel widget so CarouselGoTo  is not working fine:

so @Benjith Sam  suggest me other solution:

1. create a client action and add one input paramter : position and dataType is Integer:


2. create another client action like this:

2.1 set the if condition value:

2.2 if return false value than set CarosuleGoTo Prop like This:

2.3 if return true value than set IndexOf prop like this:


2.4 write  js code:

2.5 set js prop like this:

position:


Thanks

Mansur

Hello,

You have to take dependency firts there are few Client actions available for Carousel from OutsystemsUI Module.

  • Then You have to create a local variable of integer type, that will hold the value of the position of carousel item, that you would like to set.
  • After that assign the value that variable to your carousel widget property by going to advance option and it will show you the the option to setposition.
  • Then there is a event on the widget OnInitialize on that you need to assign the value to your local variable that you have created.
  • And below that you have to use a client action Carousel Go To and and on that pass the widget id and your variable.

I have attach an oml have a look

Sample

I hope this will help.

Best Regards,

Tousif Khan


testMobileCarouselApp.oml

I used the same logic but still not work please check my oml

Caro.oap

Whats the issue with that,
 I am not able to check your file due to Intelectual property,

What would you like to achive and what error you are facing can you please give me a brief.


Hello,

Have you tried setting the default value of the PositionCar variable to 5, instead of using the OnInitialize and CarouselInitialized client actions?

That way you won't even need the Position temporary variable.

One other thing, what version of Outsystems UI are you using?

Please check the attached OML for reference. I just changed the source of the aggregate to the Users entity, just for having some test data.

I hope this helps.

Best regards,

Paulo Moreira

Caro.oml

I already  tried setting the default value it is working but my req is I have a local variable at OnInitialize  than have some value and we want to insert that local variable Carousel set position


Hi Mansur,

Attached a new version of the OML, where the value of the PositionCar variable is set on the Initialize event of the page.

It works just the same.

Hope this helps.

Best regards,

Paulo Moreira

Caro.oml

When I removed PositionCar default  value Than Your Oml is not Working SO can you please check Once

Thanks

Hi Mansur,

Have you checked the latest version of the OML I attached on my last message? Both the OMLs I attached work fine on my side.

Also, what version of Outsystems UI are you using?

Thank you.

Best regards,

Paulo Moreira

Hi sir

Its working but I have a Query , I have a button and after click that button i want to change Carousel Position Value;

first  time onInilized we set the Position Value and after that we click the Button and set anther Value , its is possible??

Please check my Oml

Caro (1).oml

mvp_badge
MVP
Solution

Hi Mansur,

For your latest use case, as Tousif suggested in the previous reply, you will have to use the CarouselGoTo client action in the Button OnClick handler action flow.

Refer to the attached oml.


Kind regards,

Benjith Sam

Caro.oml

Solution

Firstly Thank You so much @Benjith Sam sir,

Hi all ,

I had a dropdown and its store three list of date value( Current week , prev week and next week), by default Current week selected and  Carousel position value set the current date and next and prev week Carousel position start from 0 Index.

but there is a bug in Carousel widget so CarouselGoTo  is not working fine:

so @Benjith Sam  suggest me other solution:

1. create a client action and add one input paramter : position and dataType is Integer:


2. create another client action like this:

2.1 set the if condition value:

2.2 if return false value than set CarosuleGoTo Prop like This:

2.3 if return true value than set IndexOf prop like this:


2.4 write  js code:

2.5 set js prop like this:

position:


Thanks

Mansur

mvp_badge
MVP

You're welcome, Mansur.

Glad to help you :)


Kind regards,

Benjith Sam

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