34
Views
3
Comments
Solved
[OutSystems UI] Carousel - Add options 'focus' and 'drag' to the SplideConfigs structure
outsystems-ui
Reactive icon
Forge component by Gonçalo Martins
Application Type
Reactive

Hi Team,

I would love it if the options 'focus' and 'drag' were added to the SplideConfigs structure of the Carousel so that I could set them. It would make the carousel much more aesthetically pleasing in my opinion.

Thank you in advance!

Cheers,

Orçun Yilmaz

Solution

Hello @Orçun Yılmaz 

First of all, thank you for your feedback.
As we announced when we released these features will be added iteratively and according to priorities and we'll add all options we can as soon as we'll be adapting the code to support that (probably we'll have a new iteration in Q1 2023).
Meanwhile, you can use our javascript API to achieve that.

Cheers,
GM

Hey Gonçalo,

Ah, I haven't looked far enough to find that announcement. Thanks for the swift reply! 

Looking forward to the see the options available in a next update.

Cheers,

Orçun Yilmaz 

Looking at SlideJs documentation I can see on the current version that on the JavaScript we can set the focus property like so:

new Splide( '.splide', {

  focus  : 'center', 

} );

link: https://splidejs.com/guides/options/#focus 

The current version of the client action SetSplideConfigs that comes with OutSystemsUI does not include the focus property and some other properties already available on the SlideJs options page. 

I tried to use the JavaScript API like so:

OutSystems.OSUI.Patterns.CarouselAPI.ChangeProperty(Carousel.Id, "focus", "center")

but kept getting an error:

{"code":"OSUI-API-06001","isSuccess":false,"message":"changeProperty - Property 'focus' can't be changed."}`

The best option at this point is to replicate the SetSpliderConfigs client action from OutSystemsUI to your own environment. (for this example i'll call it CustomSetSpliderConfigs) 

Also replicate the SplideConfigs structure from OutSystemsUI to your environment and add the properties you need. (i'll call is Str_CustomSplideConfigs) 

Adapt the CustomSetSpliderConfigs to use the Str_CustomSplideConfigs  structure where you added the options you need.

Now just create an Initialize action on the Carousel and call the CustomSetSpliderConfigs you created and set the value for the options you want. This should do the trick.

And make sure the property names are written correctly because it's case sensitive.

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