Welcome, Guest Login

Support Center

Scrolling Pattern

Last Updated: Nov 19, 2015 11:19AM EST

Scrolling Everything.

You can 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 LayoutCanvas 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.
 

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.


         









 

 

Congratulation.
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

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

support@eachscape.com
http://assets0.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete