[OutSystems UI Mobile] Troubleshooting strange behaviour in the mobile carousel

[OutSystems UI Mobile] Troubleshooting strange behaviour in the mobile carousel

  
Forge Component
(33)
Published on 4 Oct by OutSystems R&D
33 votes
Published on 4 Oct by OutSystems R&D

There are inconsistencies that we have encountered with the carousel.


The main issues found are:

  • The dots are not appearing in some instances
  • There is a querySelector error thrown
  • The carousel does not slide when there are more than one image
  • The CarouselNext and CarouselGoTo are not working as expected


The attached OML has test cases that we have created to validate and repeat the issues that we have found.


All the carousels are using the same configuration. Each test uses an image taken with the camera which is appended to the image list that is used in the carousel.


Test Findings:

Test1a - No dots, does not swipe, swiping works after the phone is rotated from portrait to landscape and back to portrait.

Test1a1 - Expands on Test1a; the CarouselNext does not advance the carousel after a new image is added.

Test1a2 - Expands on Test1a; take three pictures, swipe to the first picture, CarouselGoTo list length for the fourth picture advances to the second last picture. Same behaviour for subsequent pictures that are taken after swiping back to the first picture.

Test1b - No issues.

Test1b1 - The CarouselNext does not advance on the second picture but advances for subsequent pictures.

Test1b2 - Take three pictures, swipe to the first picture, CarouselGoTo list length for the fourth picture advances to the second last picture. Same behaviour for subsequent pictures that are taken after swiping back to the first picture.

Test2a - Cannot read property 'querySelector' of null on the first picture.

Test2a1 - Expands on Test2a; the CarouselNext does not advance the carousel after a new image is added.

Test2a2 - Expands on Test2a; take three pictures, swipe to the first picture, CarouselGoTo list length for the fourth picture advances to the second last picture. Same behaviour for subsequent pictures that are taken after swiping back to the first picture.

Test2b - No issues.

Test2b1 - The CarouselNext does not advance on the second picture but advances for subsequent pictures.

Test2b2 - Take three pictures, swipe to the first picture, CarouselGoTo list length for the fourth picture advances to the second last picture. Same behaviour for subsequent pictures that are taken after swiping back to the first picture.


The sub-variant 'b' tests using CarouselGoTo exhibit the same behaviour when using Count or forcing the max value to the total number of images in the list.


Hello Ouen,

Thank you for such a detailed post, the team will look into these issues and we'll get back to you as soon as we're able to solve them.

Also, Silk UI is supported by OutSystems, which means that if this is urgent for you and your project, you may open a support ticket. Either way, we're going to look into it :)

Best regards

Processing Upload...

Hi Ouen,

After view your example OML with all your use cases with Camera Plugin, I saw the images added to the carousel, always staying on the first element Carousel and gave a JS error. Please add this CSS snippet to place the carousel elements in the correct positions:

.carousel .carousel-container-content .OSFillParent {
    display: inline-block;
}


For call the next element or the GoTo global actions you need to set a timeout because after append elements, the carousel need some time to update. For now, the carousel doesn't have a OnUpdate event. I gave 150ms of timeout but you have to adjust to the time that you may need.

 Take a look to this example:

setTimeout(function(){
    $actions.CallNext() //on this action please drag the Carousel global action
},150);

The carousel was changed so that the dots would work properly using the camera plugin. In the attached file that has the fix for the carousel and also made all these improvements in your example.

The dots fix and elements in the carousel, will come out in the next release of SIlk UI Mobile.

I hope it helped solve your problem.

Regards