Welcome, Guest Login

Support Center

Creating a Scrolling Pattern

Last Updated: Oct 08, 2015 04:43PM EDT

Creating a List View fed by a data source -- Setting up Pattern

These are the steps to create a Pattern in the Editor:

Step 1: Create a new view (For this example I am using a Canvas Layout)

Step 2: Drag in an Image Block into the Canvas. Name this block anything you want (I name the block My Image)

Step 3: Drag in a text block above the Image Block. Set the size and position of these blocks as you wish. Name the Test block so you will have it saved under "My Blocks" for later use. (In this example I named my block "My Title")

Step 4: Select Both blocks by clicking below them on the canvas. Without letting Go drag the selector box that will appear over the two blocks you have in the canvas. the boxes will have a dotted line around them, which will let you know if you have successfully selected them.

Step 5: Right Click the selected blocks and choose "Group" This will create a block you can access under My Blocks. Name it whatever you like. (For this example I named the block "My Group")

Step 6: Right Click the Group you just made (Make sure you are at the parent Directory Level. To do this Right click the Canvas and choose Edit Canvas as a precaution. Alternatively you can click on "Canvas" in the page view column on the left of the editor.) Now right click the group and choose "Generate Pattern." As it did with the Group block we created, a custom block will be placed in the "My Blocks" Section. This time however it will not immediately place the new Pattern Block you created into the Canvas View. You will need to right click the Group and hit remove. Then Drag in the Pattern Block from the My Blocks tab in the left of the builder.

Step 7: Now we need to edit the Title Bar to point to our data source. Right Click the Pattern and choose to Edit "Text: My Title." Then Point the text to the Data Source column where you have the Text you want displayed. After this do the same thing for the Image Block except point to column with the image you want displayed.

Step 8: Edit the Pattern so it will display all of the content in our data source. Right click the Canvas and choose to Edit Pattern Block. Select the Data Source you want the Pattern to choose from. Then set the record to start at 1.(In screen shot below notice in the view on the left how the page setup should look. The hierarchy should be View "First"/Canvas/Pattern:My Pattern/Canvas:My Canvas/Blocks)

Step 9: Make sure you set the size and position of the Pattern block to fill as much of the screen as you want. For Me I set the bottom edge constraint to be 0 and top edge constraint to be 0 so that the pattern will fill the screen. Then you can Generate the build and the result should look something like the image below.


To Go a bit deeper add your group block in twice:

Dragging in the same Group twice in the Pattern allows you to position the block in different spots on the canvas and create a more diverse Page Layout. Make sure to hold down the SHIFT key when you drag in the named MyBlock to reuse the original block in the view. If you do NOT hold down the SHIFT key you will create a duplicate set of blocks.

The Result will look like this:


Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found