Create any pattern you want and make it scroll.
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
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
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.
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)
Repeat that process for all the block feeding off the 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.
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.
Your Layout now has 2 Groups.
A small image with caption.
A big image with caption.
Creating the Pattern
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
Use your mouse to select the 2 Groups you have created.
Select 'Generate Pattern'
Give a name to the Pattern when asked.
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.
To define the scrolling area of your Pattern increase the size.
You can be more precise by using Size & Position from the Block menu.
You have completed a sophisticated development.
You are now able to scroll pretty much anything.
You can scroll Block, Layouts, Layout of Layouts...