Using the Scroll view component

Scroll view is a layout container that is used to make scrollable views. In other words you can have multiple interactive components in a single line. Below you can see an example of a configured Horizontal scroll view component. You can scroll left and right, revealing more elements.

Building the layout

Start by placing a scroll view component in the desired place on the canvas. Additionally, drag a Container component inside of it. This container will serve as a base for the list item. Now place anything you want to be present in a single item of the scroll view inside that container. For this guide, we will use an Image and Title view components. The layout tree should look the following way:

Next, to make the Scroll view Horizontal, navigate to the properties tab and set the 'Horizontal scroll' to "True". On the Layout tab, set the 'Layout' to be horizontal as well. If you want to make the Scroll view component vertical, simply reverse the instructions and set everything to follow the vertical format.

When it comes to container configuration, you are free to customize it the way you want your items to look like. In case you want to achieve the same result as presented in the example, set the container layout to vertical and align both Image and Title to the center. Your component should then look like this:

Repeating the scroll view list item

Next, we will need some data to repeat the list item from to finalize our scroll view. For that purpose, we can use a variable to store image URLs and text. In this tutorial, we’ll use a page variable. If you want to populate the scroll view with data from a data resource, you can use a data variable instead.

To create a page variable, navigate to the Variables view in Composer and open the 'Page variables' tab. Click on 'Add page variable' and enter a name. Set the 'Variable value type' to be a 'List' and 'List item type' to be 'Object'. That way, the variable becomes a list of objects.

To complete the page variable setup, we need to add properties to our list that are going to correspond to the elements in our list view. Practically, you will have to add a property for each item in the container. Since in this guide we have configured an image and a title, let's add them as the properties like so:

Lastly, we have to bind the list item properties to our view components. Navigate back to the view canvas and select the container. In the Properties tab, bind its 'Repeat with' to the page variable you have created.

The Title's 'Content' should now be attached to current.name. As for the image, make its 'Source' current.image.

Populating the scroll view with data

To make the scroll view work, we have to populate the list of objects with an actual data. We will do so by using a 'Set page variable' flow function. You are free to attach it to any event, but in this guide we will use the 'Page focused' event to populate the data once the page is opened.

Make sure that the 'Variable name' in the 'Set page variable' flow function is set to the page variable we created. For the ‘Assigned value,’ use the ‘List of values’ binding type in the binding editor and add some names and image URLs to the list.

Advanced data binding

If you have prior experience in programming, you can bind the assigned value to a formula in Javascript object format. Kindly find an example below:

[{"id": "0","title": "Orange","image": "<url>"},{"id": "1","title": "Apple","image": "<url>"},{"id": "2","title": "Lemon","image": "<url>"}]