Adding a Repeater to Your Screen

Overview

Repeaters allow you to create lists of items. You just have to design one template item and then simply repeat it as many times as you want. The repeater also gives you the flexibility to change each individual item as you like.

Teaser

At the end of this topic you will have a screen with a repeater like the one in the following picture.

In Brief

These are the main steps of the procedure.

1. Adding a repeater.
2. Adding elements to the item template.
3. Duplicating the items.
4. Editing the item template.
5. Editing single items.

Step by step

(a-1) 1. Add a repeater.

1. Use Alt+drag and then type repeater to add a repeater to your screen.

   

   You can also Alt+click to create a repeater with a default size, or drag the Repeater from the Toolbox under Lists & Pickers.

2. Edit the properties of the repeater.

   The repeater is a control, so it has its own properties. Remove the visible borders by setting the thickness to 0.

   

(a-2) 2. Add elements to the item template.

1. Click on New Item Template to create the item template, as prompted.

   This template is the basis of your final design.

   

   You are now prompted to add elements to the template.

   

2. Add an image, some text, and a line to the template.

   You can use the quick-add feature or the Toolbox to create your elements.

   

(a-3) 3. Duplicate the items.

1. Exit the edit template mode.

   Press Escape or double click outside of the item. You can also use the breadcrumb in the top left corner of the designer. The X indicates the top level.

   

2. (Optional) Set the layout for the repeater.

   The default layout is vertical, but you can also choose to repeat the items horizontally.

   

3. Duplicate the items.

   You can do this in several ways.

   • Click the + icons to add a new item before or after the selected one. The items created this way are copies of the item template.
     
   • Use Ctrl+Arrow keys. This also adds copies of the item template.
   • Drag the drop-down arrow. This creates a copy of the selected item, which may be different from the item template.
     

Now you have a repeater with some items.

(a-4) 4. Edit the item template.

If you need to make changes that apply to all the elements in the repeater, you must edit the item template.

1. Select the Edit Item Template action from the Properties Panel of:

   • the repeater
     
   • any item
     

2. Make the changes to the item.

   For example, change the font color of the title.

   

3. Go back to the repeater.

   Press Esc to exit the edit template mode.

   All the items have the new color in their titles.

(a-5) 5. Edit single items.

Now that you have a unified look for all the items, you can edit them individually to show different images or texts.

1. Double click any item of the repeater to edit it.

   

2. (Optional) Reset item template.

   If you are not happy with the changes, select the Reset Item to Template action from the Properties Panel. This will make the item you edited look like the template again.

   

Learn More

Here are some suggested topics:

• Creating Your First Screen
• Adding your First Interaction