Carousel Navigation

  

I read some of the other Carousel threads in the forum but could not find a way to do what I need.


Here is what I need:

  1. A ScreenAction that takes the user to a specific Carousel Item (given the item index)
  2. A ScreenAction that takes the user to the NEXT Carousel Item  
  3. A ScreenAction that takes the user to the PREVIOUS Carousel Item

You see, the user is interacting with form elements on each Item and once they complete a specific action, I will call the ScreenAction to take them to the appropriate Carousel Item (index).

I know I could use a TAB - but - that doesn't give me quite the UX that we want.

Think TurboTax type experience ... that is what I am going for. The user is asked one or more questions or perhaps fills in some info and once completed will automatically "swipe" to the next Carousel Item.

How can I do it?

Thanks!

Hi Bruce,

To help you, first i need to know the version of your Silk Mobile because we have a new Carousel with all these features.

However i created a small example with the features of the new carousel that I think solves what you want, please see the attached file.


Check also the version of Silk Mobile that you have installed, if not last, here you have the latest version: https://www.outsystems.com/forge/component/1385/silk-ui-mobile/

Thanks

First, I am running ServiceStudio 10.0.302 so all the SilkUI modules should be the latest and greatest - yes?

SilkUI Mobile appears to be v 1.1.1 and SilkUI Web appears to be v 3.1.0 when I look at their eSpace in ServiceCenter.


HOWEVER, I should have clarified that my app is a responsive web app - not a pure mobile app. You see, we are focusing first on a robust responsive desktop/tablet/phone experience. Our business model is such that customers will interact occasionally with us around once a month. Thus, most users prefer a responsive experience that does not require an app download.

ANYWAY, since we are creating a responsive web app, is there an enhanced Carousel that I could use or some method in the SilkUI Web (aka WebPatterns)?

Anyway to control the WebPatterns Carousel programmatically?

Thanks!

Hi Bruce,

The Carousel on Silk Web works with jQuery owl 1.3.3.

To create an action that takes the NEXT or PREVIOUS element on Carousel you just call the function next or prev. Please take a look on documentation: https://github.com/cdnjs/cdnjs/tree/master/ajax/libs/owl-carousel/1.3.3

There are many functions that you can use to give a great experience to your users.

Thanks!

That sounds promising - but - I am not quite sure how to call the next or prev functions.

I don't see those as actions in the Carousel widget. So far, I have been able to stay away from custom JavaScript so I'm not sure ... do I need to create some JS code and somehow call it from my Screen Action?

Sorry to be so dense, but I'm just not seeing how to call the "next" and "prev" functions.

Anyone out there have thoughts on my last comment on June 9th? I don't understand how to call the "Next" and "Prev" methods on the carousel.

Bruce Buttles wrote:

Anyone out there have thoughts on my last comment on June 9th? I don't understand how to call the "Next" and "Prev" methods on the carousel.

I have been looking around for beginner-level examples of how to populate and use the carousel. Search through here shows very little and in the docs shows nothing...

Lee Hammond wrote:

Bruce Buttles wrote:

Anyone out there have thoughts on my last comment on June 9th? I don't understand how to call the "Next" and "Prev" methods on the carousel.

I have been looking around for beginner-level examples of how to populate and use the carousel. Search through here shows very little and in the docs shows nothing...


Hi Lee,

You already can do this?

Regards

Paulo Torres wrote:

Lee Hammond wrote:

Bruce Buttles wrote:

Anyone out there have thoughts on my last comment on June 9th? I don't understand how to call the "Next" and "Prev" methods on the carousel.

I have been looking around for beginner-level examples of how to populate and use the carousel. Search through here shows very little and in the docs shows nothing...


Hi Lee,

You already can do this?

Regards

Yes, thanks, Paulo. I figured it out.