Experiencing an issue?

How to Create a Details Template

This article shows you how to create a Details template page. The Details template is a tool that pulls content from a data set and dynamically places it on multiple pages created by the template. 

The Details template works like this.

  • On a single web page, we create a page layout with components.
  • Instead of placing content inside components, we link the components to columns in the data set.
  • When we publish, we create a new page for every item in the data set. Each page has the same layout but different content.

The Details template is different from the Repeater template in two ways: build and output.

  • Building a Details template does not require a special component. In contrast, the Repeater template uses a component called the Repeater.
  • The output of a details template is multiple pages - one page for each item in the data set. In contrast, the Repeater template generates a single page that shows all items in the data set.

Use the Details template page to display content by itself or as part of a multi-level template structure.

Key steps

Here are the key steps you need to follow to create a Details template: 

  1. Open a page.
  2. Connect the page to a data set.
  3. Drag components to a web page.
  4. Map the components.
  5. Customise components.
  6. Preview.
  7. Publish.

More information

After creating a template page, you need to link the components to columns of information in a data set. This linking process is called mapping. For more information, see:

Are you interested in a different type of template structure?

  • Select the Repeater template if you want a single web page with a list of items in the data set.

Are you interested in using advanced template techniques to create an engaging user experience?

  • Learn how to create a multi-level template structure here.

 

 

1  Opening a page

You can create a Details template on a new page or an existing page. In this example, we create a new page to display rooms for rent.

  1. Go to the Website Content page.
  2. Click the Create page button. A new page displays.

crteate-1a.png

 

  1. Select Create a Blank page. A new panel displays.
  2. In the new panel, enter a unique page name.

page-2.png 

  1. Click Save.
  2. The new page opens in the Edit Content area.

 

2  Connecting to a data set

Next, we connect a web page to a data set. In this example, we connect our City Rental Properties page to a data set called Rooms for Rent.

  1. Scroll up to the top of the page and then click the Connect with Data button. The Connect with Data panel displays.

connect-1.png

 

  1. The left side of the Connect with Data panel shows your data sets. Scroll down the list and select the data set you want to connect to this page. In this example, we connect to the Rooms for Rent.

connect-1a.png

 

  1. Click OK. The panel closes and the Edit Content displays.   

connect-3.png

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

connect-3.png

 

2.1  Connecting the Settings page to a data set

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.

set-1.png

  1. Scroll down to the Page URL heading.
  2. Type the name of the link column in the data. As you type, the autofill function might suggest a name. In our example, the link column name is Link.

link-6a.png

 

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

link-7a.png

 

  1. Select the column that contains the unique name for each item in the data set. In our example, the correct column is Name.

link-8.png

 

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

link-9a.png

 

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

set-6a.png

 

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.

link-11a.png 

 

At the top of the page, click Save and then Publish.

pub-1.png

Every time you change a template or data set, publish the affected pages. Saving, but not publishing, does not make the changes live.

  

3  Adding components to the page

Up to this point, we have created a blank page that is connected to a data set. Now it's time to build the template by placing components on the web page. 

  1. Drag the components you need to the web page.
  2. Move the components around to customise template layout.

For this example, we created a simple template by placing five components inside a column component:

  • The left column holds 1 Heading component and 2 Text components.
  • The right column holds 1 Heading component and 1 Image component. 

col-5a.jpg

 

4  Mapping components 

The next step is to connect each component on the page to a column in the data set. This connection process is called Data Mapping. 

The mapping process described below works for most components. Mapping Image components requires an extra step. See Section 4.1 below for details.

  1. On the web page, hover the mouse pointer on a component. The component toolbar displays.
  2. In the top-right corner of the toolbar, locate the mapping icon. It looks like a set of CDs with a red dot. The red dot indicates the component is not mapped to a data set.

car-6.png

  1. Click the mapping icon. The Map to a Column panel displays.
  2. Scroll down the panel and locate the data field you want to connect to the component.
  3. Click the field and then click OK. The panel closes.
  4. Repeat mapping for each component on the page.

map-1.png

 

After you finish mapping, hover the mouse pointer on the component. There are two visible changes:

  • the mapping icon has a green dot which indicates the component is connected to a data set column
  • the default text inside the component (i.e. Click here to edit ...) is replaced with the name of the data set column

name-1a.png

 

4.1  Mapping images

Mapping an Image component requires an extra step because the toolbar is different. As shown in the image below, the toolbar on an Image component does not have a mapping icon. 

car-8.png

 

A different mapping approach is required because images contain a lot of data. In addition to the image file, the mapping system needs to manage Alt Text (always recommended for SEO), links, and captions.

  1.  Click the cloud icon on the Image component. The Image Settings panel displays.

car-9.png

 

  1. On the Image Settings panel, click the mapping icon at the top of the panel (not the icon in the middle of the panel). The Map to a Column panel displays.

comp-4a.png

 

  1. On the Map to a Column panel, select the image field.

com-5.png

 

  1. Click OK. The Image Settings displays again. The top mapping icon now has a green dot.

comp-6.png

 

  1. Click OK.
  2. To test the image mapping, click Preview at the top of the Edit Content page. An image appears in the Preview page. 

4.2  Mapping inline text

You can also place text inside a component and then link those words to a field in the data set. That process is called inline text mapping.

To learn how to map inline text, see

 

5  Customising components

You can customise the design and appearance of any component. To learn more about customising components, see:

 

6  Previewing your work

To see your work before publishing, use the Preview tool.

  1. Scroll up to the top of the Edit Content page.
  2. Click Save and then Preview. The Preview panel displays.
  3. See how your template page displays on desktop and mobile devices.
  4. Return to the Edit Content area and make changes, as required.
  5. Repeat Preview process.

The image below is a preview of one item in the Rooms for Rent data set. No customization or style elements have been added yet.

preview-3.png

 

7  Publishing your work

When you're satisfied with the template page mapping, text styles, design, and layout, scroll up to the top of the Edit Content page and then click Publish. For more information about publishing, see:

Related articles