[OutSystems UI Mobile] Mobile patterns - Carousel dots missing

[OutSystems UI Mobile] Mobile patterns - Carousel dots missing

  
Forge Component
(32)
Published on 4 Oct (3 weeks ago) by OutSystems R&D
32 votes
Published on 4 Oct (3 weeks ago) by OutSystems R&D

Hi all.

Regarding the carousel pattern, I am displaying the content using a list widget and I am getting a weird behavior.

Imagine that I have a list of items in my homepage. Whenever I enter a detail page (that has the carousel widget in it) is works fine, but when I go back and enter another item's detail screen, the carousel dots are not displayed and I am not able to "navigate" to the next carousel item.

Any ideas?

Thanks.

Maria

Hello mariap,

Can you provide an OML to us to take a look?
This is probably a small problem in the logic, or something related to the refresh, but unless someone had this exactly same problem and knows the cause (I never had this problem), only looking to an example we will be able to help. 

The example can be a simpler one. Also, sometimes, when we try to reproduce the error we find the solution :)

Cheers,
Eduardo Jauch

Hi Eduardo.

I tried to make a simpler version of the oml so that I could make it available here, but I am not being able to reproduce the bug in the simpler version.

I noticed that the dots inside the dots container are missing, and I am also concerned that it might have something to do with the carousel's javascript event listeners or something. Do you think that using the OnDestroy could help?

Thanks

Hi Mariap,

Did you enable the Dots options on Carousel? The Carousel pattern have some option to enable / disable functionalities and behaviors.

I created a basic example to you. Take a look on attached file.

Hi,

I haven't changed the default values.

Can it have something to do with fetching the informations that I want to show?

Thanks

Hi,

I don't know how you have the logic made but it can have influence. You can also have some CSS that is hiding the Dots container.

if you had an example of what you have done, it was cool because I saw what you really have.

Thanks

The carousel works fine the first time that it appears on the detail screen of an item. It is when I select another item and enter the new screen that it is no longer working. The css is fine because I am only changing colors, pretty much. And everything is fine in the first time I open the screen.

I can't share the my module and I am not being able to reproduce the bug on the simpler example, that's why I am trying to understand what can be causing this. 

The detail screen receives the Item Id, fetches some data related to a Local Item and then I have an action that gets me a list of other details that I assign to a local list so that I can use in the carousel informations.

Any ideas?


Solution

Ok, did you use the Carousel Update action? try to use that after execute actions.

Solution

bmarcelino wrote:

Ok, did you use the Carousel Update action? try to use that after execute actions.


That solved it! 

They say that mobile displays the information according to provided data but I guess that it isn't always that simple. In this specific case I had to use the "CarouselUpdate" inside the "OnParametersChanged" because the list with the data was an input parameter of the web block that contains the carousel.

Thanks for your help and patience,

Maria