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









  1. In the right hand side panel, Select Image Source under 'Specific' tab.
  2. In Image Source Pop up window, Select Data Source.
  3. 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.
 
Read more on the Theory to link Group with Data Source Record
 

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