How to Create a Multi-Level Template Structure

This article shows you how to create a multi-level template structure that dynamically loads content on to a web page from a data set.

A multi-level structure is a series of linked pages on a hierarchy. Each level provides web visitors with a different type of information.

Here is an example.

Let's say you have a business that sells imported wine. You might design your website information pages to look like this:

1. The top-level -- categories page -- shows 3 categories of wine. Say, for instance, California, France, and Chile. A web visitor wants to learn more about French wine, so they click the France button. The France list page opens.
2. The mid-level -- list page -- shows the French wines you have in stock. The list page works like a catalogue. It lists basic information, such as name of the wine, its vintage, and a picture of the bottle. There's also a Learn More button. When a web visitor clicks this button, the details page opens.
3. The bottom level -- details page -- provides information about one product, including price and a description of the wine itself. The details page also has a Buy button.

 In sum, the multi-level structure has three levels:

1. Category page with links to list pages
2. List pages with links to one or more details pages 
3. Details page for each item (or product)

If you are familiar with web design, you probably know this multi-level page structure is common. You might also know that a website for an online business, like the wine company in our example, takes a lot of time to manage because of frequent changes in the stock and other important information like prices.

To keep up with the changes, you'd have to manually:

• update each list page to reflect stock changes 
• create and link a new details page for every new product 
• remove and delink the details page for out of stock or discontinued items
• monitor and update product information (e.g. prices) on every page

Now imagine this: you want to add a whole new category of products, say German wine in the above example. Using traditional web building tools, you'd need a considerable amount of time for web updates.

There is a better way.

 

Benefits of data-driven pages

The data-driven tool described in this article helps you manage and scale online content by creating dynamic pages. In our wine company example, we could:

• create two data sets filled with the content we want to place on web pages
• place category buttons on the categories page
• create templates for list and details pages

That's the bulk of web building work you need to create an online wine catalogue.

Looking to scale?

Add new items to an existing category in minutes. You could add a whole new category of products in about 30 minutes or less, depending on the volume of data you are handling.

  

Before you start

Building a multi-level template structure requires a bit of background reading. You need to become familiar with a few tools. They are the foundation of the multi-level template structure.

You need to create data sets. There are two options. For more information, see:

• How to Create a Data Set Online
• How to Import an Excel File into a Data Set

You need to understand how to create two kinds of template pages. For more information, see:

• How to Create a Repeater Template
• How to Create a Details Template

You should understand how to create a custom view. For more information, see:

• Creating a Custom View

Finally, you need to know how to connect web pages to a data set. That process is called data mapping. For more information, see:

• How to Map Data

 

Suggested Process

There are many ways to create a multi-level template structure. This article shows you one way. It is the suggested method because the step-by-step approach is ideal for people new to dynamic data. As you become familiar with the process, you'll discover shortcuts.

 

---

 

1  Creating data sets

The first step is to build two data sets: a core data set and a reference data set.

A data set looks like a spreadsheet. If you've worked with Excel, you'll be familiar with its columns and rows.

There are two ways to create a data set. To learn more, read:

• How to Create a Data Set Online
• How to Import an Excel File into a Data Set

For this how-to article, we create a website for a fictitious company that rents rooms to travellers.

 

1.1  Creating the core data set

The core data set contains product information. In the example image below, the core data set is called List of Rooms. It has nine items:

• 3 studio apartments (studio)
• 3 units with large rooms (large)
• 3 big apartments with windows and a nice view (window)

You can include a lot, or a little, product information in the core data set. However, the core data set must include two types of information.

 

1.1.1  Unique name

Every item (or row of information) in the core data set must have a unique name. In the above List of Rooms image, the unique names are in the Title field. Unique names organise files and are not seen by website visitors. 

 

1.1.2  Link names

The core data set must have a column with link names. In the above List of Rooms image, the link column is called Link 3. The name of the column is not important. We used Link 3 because it's easy to remember.

Link names must follow naming rules. Do not include spaces, underscores, special characters, or Chinese characters. Make sure you don't add a blank space at the end of the link name because it can cause linking errors. 

1.2 Creating custom views

The next step is to create custom views in the core data set. The custom view tool uses a filter to group similar items into one package. We don't describe how to create custom views here because that was explained in another article. If you are not sure how to create a custom view, see:

• Creating a Custom View

In our core data set, we created three custom views, one for each product type.

• The first custom view, called studio view, shows the 3 studio apartments in the data set:

 

 

• The second custom view, called Large view, shows the 3 large units in the data set:

 

 

• The third custom view, called window, shows the 3 window apartments in the data set:

 

1.3  Creating a reference data set

The core data set is finished. Now we need to create a reference data set. The purpose of the reference data set is to create a connection to the custom views in the core data set. 

Each custom view in the core data set must be manually added to the reference data set. If, for instance, you have three custom views in the core data set, then the reference data set must have three items (or rows).

A reference data set must have three columns of data.

 

1.3.1  Unique name

Give each item in the reference data set a unique name. Use a naming convention that helps you quickly understand its content.

In our room renting business, we created a reference data set called Room type reference. In the image below, we placed the unique names in the Title column. You can use any column. You can also use any name you like, as long as it is unique and the field type is Text.

 

Not sure about the field types in a data set? Read How to Create a Data Set Online.

 

1.3.2  Reference-type column

The reference data set must have a reference-type column. In the Room type reference image above, our reference column is called Custom view reference. 

To create a reference column:

1. Scroll to the right side of the data set and then click the green Add New Field button. The Add New Field panel displays.

2. Enter a unique field name.
3. Click the box below Type. A drop-down menu displays.

 

4. Select Reference. A new tab displays.
5. Click the box below Referenced Data Set. A drop-down menu displays.

 

6. Select the name of the core data set which you created earlier in Step 1.1  In this example, we select List of Rooms.

 

7. Click OK. The panel closes and the column is added to the reference data set. 

 

Adding custom views

Now that you have created a reference-type column, select the matching custom view for each item.

1. Click the first cell in the reference column. A drop-down menu displays the custom views that you created in the core data set.
2. Select the custom view that matches the product in the row. 
3. Repeat for all rows in the reference data set.

In the image below, we select the custom view called studio view because it matches the product name in that row (Studio apts).

 

1.3.3  Link column

Finally, the reference data set must have a Text-type link column with a unique name. In the Room type reference image below, the link column is called Link. The name of the column is not important. We used Link because it's easy to remember and unique.

 

• Link names -- unlike Titles -- should not use spaces, underscores, special characters, or Chinese characters. Make sure you don't add a blank space at the end of the link name because it can cause linking errors.

 

2  Creating a category page

The next step is to create a category page with a Repeater component. In many cases, the category page is your landing page, but that is not always the case.

• Below is a basic explanation of how to create a Repeater template. Review How to Create a Repeater Template if you need detailed instructions.

To create a Repeater template:

1. Open the web page that will hold the category buttons.
2. Drag the Repeater component to the page.
3. Hover the mouse pointer on the Repeater component and then click the Edit icon. The component opens.
4. Drag a button component to the Repeater component.
5. Add other components, as required. 
6. Add design and styling, as required.

The image below shows the structure of our Repeater template on the category page. This template has three components:

• 1 Heading component
• 1 Image component
• 1 Button component (Learn more!)

 

2.1  Connecting to the reference data set

The next step is to connect the Repeater component to the reference data set. 

1. Hover the mouse pointer on the Repeater component and then click the round Settings button. A new panel displays.

 

2. On the Repeater Settings panel, click the Edit icon on the Data View line. The Connect with Data panel displays.

 

3. On the Connect with Data panel, select the reference data set you created in Step 1.3. In this example, we select Room type reference.
4. Click OK.

 

2.2  Mapping data

Now it's time to connect the components inside the Repeater template to columns in the reference data set. We also need to create a button. 

 

2.2.1 Mapping components

We don't describe how to map components here because that task is explained in another article. If you are not sure how to map components, see How to Map Data.

 

2.2.2  Creating a button link

The button on the category page takes website visitors to a list page. Even though we have multiple categories (e.g. types of properties), we create just one template button. That's one of the advantages of using the data-driven tool.

1. Hover the mouse pointer on the button component. The toolbar displays.
2. Click the Settings button in the top left corner. The Button Settings panel displays.

 

3. On the Button Settings panel, click the Link tab. The Link panel displays.

 

4. On the Link panel, click the data set icon. The Map to a Column displays.

 

5. On the Map to a Column panel, select the link column. That is the column you created in Step 1.3.3. In our example, we created a link column called Link.

 

6. Click OK. The Link panel displays. The data set icon now has a green light.

 

7. Click OK on the Link panel. The panel closes and the Edit Content page displays.
8. Click Save on the Repeater component.

 

2.3  Previewing the template

Scroll up to the top of the Edit Content page and click Save and then Preview. The image below shows our template in preview mode. The buttons don't work yet.

• We used the Grid tool to display content on a horizontal line. 

 

 

3  Creating list pages

The next step is to build a list template. Once published, the list template automatically creates a separate list page for each product category. Buttons on the category page dynamically link to these list pages.

The list page is the hub of the multi-level template structure. It works like a router to connect the reference data set and the core data set. To create those connections, the list template needs two tools: a details template and a Repeater template.

 

3.1  Creating a new web page

Create a new web page and give it a unique name. This web page holds the list template. In our example, we call this page City Room Types.

 

3.2  Connecting to reference data set

Next, we connect the list template page to the reference data set. 

1. Open the list template page in the Edit Content area.
2. On the top menu, click the Connect with Data button. The Connect with Data panel displays.

 

3. On the Connect with Data panel, select the reference data set you created in Step 1.3. In our example, we select Room type reference.

 

4. Click OK. The panel closes and a red bar displays across the top of the Edit Content page.

 

3.3  Customising page settings

The red bar tells you that some information is missing on the Settings page.  

1. At the top of the Edit Content page, click the Settings button. The Edit Settings page displays.

2. Scroll down to the Page URL heading.
3. Type the name of the link column that you created in the reference data set in Step 1.3.3. As you type, the autofill function might suggest a name. In our example, the link column name is Link.

 

4. Scroll down to the Page Title heading and then click the data set icon. The Map to a Column panel displays.

 

5. Select the column that contains the unique name for each item in the reference data set. You created this column in Step 1.3.1. In our example, we placed unique item names in the Title column.
6. Click OK. The panel closes and the Settings page displays.

 

3.3.1 Checking your work

When successful, the Settings page displays green checkmarks.

 

After reviewing the Settings page, scroll up to the top of the page and then click the Content button. The Edit Content page displays.

 

At the top of the Edit Content page, two changes indicate the page is connected to a data set: a green light on the data set icon and the name of the data set.

 

 

 

3.4  Adding a Repeater template

Up to this point, our list template page has a details template. On the same page, we are going to add a Repeater component. 

The Repeater component creates a list -- or catalogue -- of the products in one category. In our fictitious room renting business, for instance, we have three different properties in the Studio apartment category. 

• If you need more information about working with the Repeater component, see How to Create a Repeater Template.

Briefly, to create a Repeater template:

1. Drag the Repeater component to the page.
2. Hover the mouse pointer on the Repeater component and then click the Edit icon. The component opens.
3. Drag a button component to the Repeater component.
4. Add other components, as required. 
5. Add design and styling, as required.

The GIF below shows the structure of our Repeater template. This template has four components:

• 1 Heading component
• 1 Image component
• 1 Text component
• 1 Button component

 

3.5  Connecting to the reference column

The next step is to connect the Repeater component to the reference column in the reference data set. 

1. Hover the mouse pointer on the Repeater component and then click the round Settings button. A new panel displays.

 

2. On the Repeater Settings panel, click the Edit icon on the Data View line. The Map to a Column panel displays.

 

3. On the Map to a Column panel, select the reference column you created in Step 1.3.2. In this example, we select Custom view reference.

 

4. Click OK. The panel closes and the Settings panel displays. A green light on the data set icon indicates mapped data.

 

3.6  Mapping components

Now it's time to connect components inside the Repeater template to columns in the core data set. We also need to create a button. 

 

3.6.1  Mapping components

Map every component inside the Repeater template to the correct column in the core data set. We don't describe how to map components here because that task is described in another article. If you are not sure how to map components, see How to Map Data.

 

3.6.2  Creating a button link

The button on the list page takes website visitors to a details page. Even though we have multiple categories, we create just one button template. 

1. Hover the mouse pointer on the button component. The toolbar displays.
2. Click the Settings button in the top left corner. The Button Settings panel displays.

 

3. On the Button Settings panel, click the Link tab. The Link panel displays.

 

4. On the Link panel, click the data set icon. The Map to a Column displays.

 

5. On the Map to a Column panel, select the link column. That is the data field you created in Step 1.1.2. In our example, the name of the link column in the core data set is Link 3.

 

6. Click OK. The Link panel displays. The data set icon now has a green light.

 

7. Click OK. The panel closes and the Edit Content page displays.
8. Click Save on the Repeater component.

 

3.7  Previewing the list template

Scroll up to the top of the Edit Content page. Click Save and then Preview.

The image below shows the list template in preview mode. It shows three products in the Studio apartment category. The buttons don't work yet because we have not created the details template. That is the next step.

• We used the Grid tool to display content on a horizontal line. 

 

4  Creating a details template

The next step is to build the details template page. The details template automatically creates individual product pages by connecting to the custom views that you created in the core data set in Step 1.2.

Creating a details template is a four-step process.

1. Build a details template for one product category by linking to one custom view. Using our room renting business as an example, we first build a details template for studio apartments.
2. Clone the template and give it a new name (for another category).
3. Add a few customisations to the cloned template.
4. Repeat the clone-customise process until there is a details template page for every category.

 

4.1  Creating a new web page 

Create a new web page and give it a unique name. This web page holds the details template. In our example, we call this page Room Configuration - Studio.

 

4.2  Connecting to the core data set

The next step is to connect the new web page to the core data set.

1. Open the new page in the Edit Content area.
2. On the top menu, click the Connect with Data button. The Connect with Data panel displays.

 

3. On the Connect with Data panel, select the core data set you created in Step 1.1.

 

4. On the Connect with Data panel, click the box below Select a view. A drop-down menu displays. The drop-down menu shows the custom views that you created in Step 1.2.
5. Select the custom view that matches the content of this category. In this example, we create a template for studio apartments. That means we select studio view in the drop-down menu.

 

6. Click OK. The panel closes and a red bar displays across the top of the Edit Content page.

 

4.3  Customising page settings

The red bar tells you that some information is missing on the Settings page.  

1. At the top of the Edit Content page, click the Settings button. The Edit Settings page displays.

2. Scroll down to the Page URL heading.
3. Type the name of the link column that you created in the core data set in Step 1.1.2. As you type, the autofill function might suggest a name. In our example, the link column name is Link 3.

 

4. Scroll down to the Page Title heading and then click the data set icon. The Map to a Column panel displays.

 

5. Select the column that contains the unique name for each item in the core data set. You created this column in Step 1.1.1. In our example, the correct column is Title.

 

6. Click OK. The Map to Column panel closes. If mapped correctly, the Settings page displays green checkmarks.

 

4.3.1  Checking your work

After reviewing the Settings page, scroll up to the top of the page and then click the Content button. The Edit Content page displays.

 

At the top of the Edit Content page, two changes indicate the page is connected to a data set: a green light on the data set icon and the name of the core data set.

 

 

5  Publishing the template

The next step is to publish the template and create individual details pages with dynamically loaded content. 

1. Scroll up to the top of the Edit content page.
2. Click Save and then Publish.

 

3. Click the Publish Selected button on the confirmation panel.

 

4. Click OK in the popup box. The Website Content displays.

 

5. Locate the template page that you created. Click the figure next to the file name. A new Website Content page displays.

The figure next to the template page name indicates the number of unique pages that were created by the template.

 

5.1  Viewing the pages

On the Website Content page, you can see the URL for each unique details page. There is one page for each item in the category. 

The image below shows that three pages (and unique URLs) were created by the studio apartment template (called Room Configuration - Studio). This is the correct number because we have three studio apartment properties in the core data set. 

 

 

To view a details page, click a URL. The page displays in a new tab. Below is an image of one studio apartment property. The page design and layout is exactly the same for the other studio apartment properties. The content is different though. 

• Studio 1 details page

• Studio 2 details page

• Studio 3 details page

 

5.2  Editing the template

You can change the design and layout of the template.

1. Go back to the main Website Content page.
2. Hover the mouse pointer on the template page you want to change. A menu displays.

 

3. Click Edit Template. The Edit Content page displays.
4. Change the template as required.
5. Scroll to the top of the page and click Save and then Publish.
6. Repeat Step 5.1 above to find and view your published pages.  

Every time you make changes to a template, click Save and Publish. The Save button keeps changes locally but does not make them live. Changes are visible to website visitors after clicking the Publish button.

  

6  Cloning a details template

So far, we built one details template for one category -- studio apartments. That template created three unique pages, one each for the three different studio properties we rent.

In our room renting business, we have three product categories: studios, big rooms, and apartments with nice window views. We need to create two more details templates.

We can easily create a new details template by using the Clone tool and then adding a few customisations.

1. Go the Website Content page.
2. Hover the mouse pointer on a completed details template. A toolbar displays. 
3. Click the More button. A drop-down menu displays.

 

4. Click Clone. A popup box displays.

 

5. Enter the name of the new file. In our example, we use a naming convention and change the last word from Studio to Windows (which indicates product category).

 

6. Click Save. The Website Content page displays.

 

6.1  Editing the clone 

You have a new details template but some links need to change so that the published pages show the correct data.

1. On the Website Content page, hover the mouse pointer on the new template page. A menu displays.
2. Click Edit Template.

 

3. At the top of the page, click Disconnect and then click YES in the confirmation popup box. 

 

4. At the top of the page, click the Connect with Data button. A new panel displays.

 

 

5. On the Connect with Data panel, select the core data set you created in Step 1.1. In our example, the core data set is called List of Rooms.

 

6. On the Connect with Data panel, click the box below Select a view. A drop-down menu displays. The drop-down menu shows the custom views that you created in Step 1.2.
7. Select the custom view that matches the content of this category. In this example, we create a template for window apartments. That means we select window in the drop-down menu.

 

8. Click OK. The panel closes and a red bar displays across the top of the Edit Content page.

 

6.2  Customising page settings

You need to customise two fields on the Settings page: Page URL and Page Title. Go to Step 4.3 if you need to review how to make these changes.

After making these adjustments, you should see two green checkmarks on the page. 

 

6.3  Checking the component mapping

When you clone a file, the data mapping on the template components should remain intact. However, when you disconnect the data set on a page (as we did above in Step 6.1), the data mapping is gone. That means we have to map each component to a column in the data set once again.

1. At the top of the Edit Settings page, click the Content button. The Edit Content page displays.

2. Hover the mouse pointer on each component and check the data mapping links.
3. Map each component.

 

6.4  Publishing the new template  

The next step is to publish the template. That creates a new details page for each item in the category.

• See Step 5 if you need to review how to publish a template and find the details pages.

 

7  Reviewing your site

Well now, your site is done -- at least in a draft form. 

It's time to test your complete site. Click every link. Find and fix the bugs. Customise the design and layout of the components and template pages.

1. Go to the Website Content page.
2. Locate the page with the category buttons and then click the URL. The page displays in a new browser tab.

 

8  Adding a new item 

Let's say you want to add a new item to an existing category. You can finish that task in about 5 minutes. That's one of the advantages of data-driven tools.

Here is an example based on our fictitious room renting business. Our aim is to add one new property to the Windows category. Currently, we have three properties. The new total will be four.

1. Go to the Data page and open the core data set. In our example, the core data set is called List of Rooms.

 

2. At the bottom of the page, click the Add new item button. A blank row is added to the data set.
3. Add information to the cells in the new row. Make sure you use consistent naming conventions.

 

8.1  Publishing new content

New content must be published before the changes are live.

1. Go to the Website Content page.
2. Check the box next to every file that is part of your multi-level website.

3. Click Publish and then Confirm in the confirmation popup box. The Website Content page displays.
4. On the Website Content page, locate the template file with the new item.
5. Click the figure beside the file name. A new page displays.

 

6. Check the number of pages with URLs.

 

7. Open the main page of the website with the category buttons. Start clicking buttons to inspect pages and page links. Make sure the new content is added to the website.

 

In our example, the new property in the window category displays correctly on the list page and details page.