Scrolling Everything.

Create any pattern you want and make it scroll.

Another example:

Let's say we want to scroll a layout made of a small and a big image with captions. A classic app design.

Also we want to use a Data Source to feed the content into this Pattern

In effect we want the pattern shown here.

Picture and captions are coming from a data source.

1. Create the Canvas.

First we need to create the Layout we want to scroll.

To that effect will use Canvas Layout. Canvas Layout is required to create your scrolling pattern

Create your app, select Canvas.

Drag & drop the first image

Resize the image the way you like it.

Add the caption (text) under the first image

Position the Text block under the image Block the way you like it

2. Associate to a Data Source

Each Block needs to get Data from a Data Source.
In this example we are using a Cloud Collection from the Puppy App.

To install that Cloud Collection, select the Puppy App
 from your dashboard and install it in you account.

Select 'Connect' tab to view the Collection

The collection has a one Record per row. It includes a Name, an Image and a Sound.

Associate the Collection to your app using

You should now see the collection as part of the Data Source available to your app.

Hover over the Image and Right Click.
Select to Edit Image 1

In the right hand side panel, Select Image Source under 'Specific' tab.
In Image Source Pop up window, Select Data Source.
In the Puppies (Cloud Collection) Data Source, select the image field: Puppy.photo.medium (Cloud collection automatically resize picture for mobile here we decided to use the medium size)

We will also associate the Text Block to the right data source.

Repeat that process for all the block feeding off the data source.

3. Grouping

Grouping is the most important concept to understand

A Group of Block will use the same Record in a Data Source.
That is fundamental when you iterate against a Data Source.

Grouping Blocks in Studio

Select the Blocks to Group
Right Click to bring the Contextual Block Menu

Select 'Group' from the Menu to Group the Blocks together.

Name the Group.
It becomes a myBlock which you can reuse later on.

Repeat the same operation a second time to create a second Group.
Drag an Image, a Text and Group them together, just make them bigger to match the design above.
Or choose any design of your choice!

Create a second group.

Again, each group will match one record in your data source.

Your Layout now has 2 Groups.

A small image with caption.

A big image with caption.

Creating the Pattern

We now have 2 Groups each made of an image and a caption.
Each Block from these group feeds from a Data Source, we have linked them that way.

Now we are ready to create a Pattern with that design.

The Pattern will iterate agains the Data Source

Each Group will bring the data from one record from the data source.

Generate Pattern

Use your mouse to select the 2 Groups you have created.

Right click to bring the Block Menu.

Select 'Generate Pattern'

Give a name to the Pattern when asked.
Done.

Congratulation you are very close to scrolling any pattern you like vertically or horizontally

Connect Data Source to Pattern

We have one last thing to do and that is to plug a data source into the pattern.

On the Navigation Panel Hover over the newly created Pattern structure.

Click to Select

This brings the Block Configuration Panel on the right hand side.

Select the 'Specific' Tab.

Choose Data Source.
We are using the Puppies Cloud Collection as a Data Source.

You can choose the scroll to go horizontally or vertically.

Update.

To define the scrolling area of your Pattern increase the size.

You can be more precise by using Size & Position from the Block menu.

------------------------

Congratulations.
You have completed a sophisticated development.

You are now able to scroll pretty much anything.
No Limit.

You can scroll Block, Layouts, Layout of Layouts...

Learn More

Scrolling Pattern Video

Layouts

Scrolling Pattern