Using the Scroll view component
  • 19 May 2022
  • 3 Minutes to read
  • Dark
    Light
  • PDF

Using the Scroll view component

  • Dark
    Light
  • PDF

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.

ScrollViewFood

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:

BuildingLayout

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.

HorizontalConfiguration

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:

ReadyComponent

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.

ListConfig

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:

PageVar

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.

RepeatingTheComponent

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

Note!

In current.image, substitute the "image" with the property from your object list. The image property should be set to 'image URL' in the page variable.

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.

LogicConfig

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>"}]

Following formula is presented in the javascript object format. You can see the name of the variable property and its value being presented in the "property": "value" format.


Was this article helpful?

What's Next