Repeating Region (2)

In the previous lesson, we saw how we can add a repeating region to a template.

In this lesson, I will explain how we can add the various items to a new page that is linked to this template.

We had already seen how we can attach a template to a new page in Lesson 47.
In this example I’ll show you how it can be different.

In the “Files” panel, select the “Assets” tab. In the menu on the left, click “Templates” button.
This gives a list of all templates that we had already made.

Right-click the template “products” and select “New From Template” in the drop-down menu.

This gives us a new page which is provided with the template “products”.
I save this page under the name newcatalog.html

As you can see in the image below, we have a few buttons next to the repeat region at the top. We have the plus sign and minus sign and we have a downward and an upward pointing arrow.
The plus sign is to add rows (ie products).
The minus sign is used to remove rows from tables.
With the arrow keys, we can change the order of the rows (ie products).

OK, we’re going to add some products.
In the various “editable regions”, product title, product price and product description, type the details of the product.
The photograph in this case is correct, so I click the plus sign to add another product.

For the next product, I type again in the various “editable areas”, but here, we must also adjust the photo.
First, select the picture, then click the “search for file” button in the properties window. Navigate and select the image relevant to the product and click the OK button.

This changes the picture.

Once all items are inserted, you can see the result in the Browser.

This aside, before I looked at the result in the Browser, I had slightly changed the layout of the “product” template. Top row is slightly darker and the prices are right aligned.
In the next lesson, let’s see what we can do about pages that are linked to the “product” template, but that are not yet modified to display the products.

Attention!
Do not forget to adjust the display of the “Catalog” in the navigation bar for this new page. If I look at the picture above, I have apparently forgotten.
If you do not know how to do this, read the lesson 49 again.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats