This guide walks you through the steps of building a website using Dynamic Pages connected to a Google Sheets Collection.

Why Choose a Google Sheets Collection?

Google Sheets is a very popular, very simple tool that can be used to build tables of information. When it comes to dynamic pages, Google Sheets is ideal for building relatively simple pages that don't have image galleries. Also, because Google Sheets are easy to share, they are ideal for when you want to allow other people to update the information displayed in the dynamic page. (By contrast, with Internal Collections, if you want other people to update the information in the dynamic page, you'll need to give them access to the platform first.)

In this example, we’ll create a site's Team section. Here are the steps we’ll follow:

• Map the collection structure 
• Design the layout that will be used for the dynamic pages 
• Connect with Google Sheets and import the collection fields 
• Select the right data type for each field in the collection
• Convert the designed page to a Dynamic Page and connect the collection
• Connect widgets on the page to fields in the collection
• Use inline binding to connect parts of text widgets
• Make the pages accessible to site visitors
• Add the pages to the site navigation 
• Enable access via a Photo Gallery or List widget
• Filter/sort the content to display only what you want
• Connect your page SEO to the collection data 

Map the Collection Structure 

Let’s start by looking at the data you’re going to display. In this example, we’ll create a site with team member pages generated from a Dynamic Page. 

So, let’s map the structure that we'll want want for each page:

• Name 
• Position
• Image
• Contact details (phone, email)
• About
• Personal information (hobbies, favorite foods, family)

Design the Layout That Will Be Used for Dynamic Page

You can design the page now, to accommodate all of these elements, or design the page after you’ve compiled the content in the Google Sheets Collection. Both methods work; it really depends on what works best for you. 

In this guide, we’ll design the page first. Here’s how it looks.

Note: We won’t make every element on this page dynamic. For example:

• Names and positions are dynamic because they change for every team member. 
• Titles such as About and Fun fact aren’t dynamic because they are identical in each member's page.

Elements on the page that aren’t dynamic aren’t included in the Google Sheets collection.

Connect with Google & Import Collection Fields

Now, you'll connect with Google and import the collection fields that you want to display.

Before importing the collection, make sure the first row in your collection contains the field names.

Here's how to import the collection: 

Go to Content Library > Library > New Collection > Google Sheets.

• Click Sign in with Google. 
• Choose your account. 
• Select the relevant sheet from your Drive. 

Once selected, the collection will be imported.

Define the Fields in Duda

By default, all imported fields are set with the Text data type. You’ll need to change this selection according to the actual content of the field. 

In this example, many of the fields actually are text fields, so there is no need to change the data type, but you will need to change them for some fields, in order to connect them to widgets that are not text widgets. So, back to our example:

• Change the data type of the Image field to Image.
• Change the data type of the Phone field to Phone.
• Change the data type of the Email field to Email.

After the fields are set properly, phone and email fields can connect to buttons (Click to call or Click to email, for example).

Select the Page Item URL

Each row in the collection represents a page and has its own URL, defined as the page item URL. You can select one of the collection fields to be the page item URL. If nothing is selected, the row number will be used.

Convert to Dynamic Page & Connect Collection

Once the Google Sheets Collection is ready, you can connect it to the page we designed earlier. 

Here’s how: 

• Open the Pages panel and click the cog icon beside the relevant page. 
• Select Convert to Dynamic Page. 
• In the popup that opens, select the Team collection we’ve just set up, and click done. 

If you don’t have a designed page, you can use one of the ready-to-use pages in the Pages panel and adapt it to your collection.

Connect Widgets on the Page to Fields in the Collection

Once the page is connected to the collection, you’ll enter Dynamic Mode. While in this mode, connect the page widgets to data in the collection.

To do this, right-click the widget and click Connect to data. 

In the popup that appears, you'll see fields in the collection that could match the widget. For example, if you’ve right-clicked on a text widget, you'll see fields with text data types.

Note: Fields like phone numbers, for example, can be connected to either text widgets or buttons, as long as they are defined as Phone in Duda.

Connect Parts of Text Widgets with Inline Binding

When connecting text widgets, you don’t have to connect the entire text box. In our example, we have the title “About team member name”. The word “About” is static while the team member name changes for every person.

For this type of situation, you can connect only some of the text using inline binding. Click the About paragraph, and after the word "About" click the Connected data icon in the text box top bar. Select the field ‘Name’.

Now you have a text box that contains both static and dynamic text.

View Generated Pages

Want to take a look at the pages you've generated with your Google Sheets Collection?

Open the Dynamic Page and click the dropdown on the left side of the top toolbar. From here, you can navigate to the various page items - in this case, Team Members by name - generated from the collection in order to make sure each one looks just right.

Make the Pages Accessible to Site Visitors

Now that you’ve got all your team members set up on your site, you need to enable site visitors to access them. There are two ways of doing this: 

• Add the pages to the site navigation
• Enable access via a Photo Gallery or List widget

Both of these methods can co-exist in perfect harmony on a single site. 

Add the Pages to the Site Navigation

First, make sure there is a page or folder in the site navigation that will be the parent link for the dynamic pages you want to display. In our example, we'll place it under Our Team.

In the Pages panel, click the settings icon beside the dynamic page you want to display in the navigation.

In the context menu that appears, click Hide/Show on navigation > Show on all. 

In the popup that appears, select the parent link for these pages and then choose the field you want to display. 

To change any of this information at any time, click Hide/Show on navigation > Set nav info.

Enable Access via a Photo Gallery or List Widget

This method is ideal when displaying more than 20 dynamic pages, as site visitors can simply scroll through the images. 

Also, this method enables you to use images so people can see what they are clicking to. With team members, for example, a Photo Gallery is a great way for people to see more details about a person they recognize. They can see the person's image and name or title in the gallery, as opposed to just a descriptive word or two in the navigation. 

To do this, add a Photo Gallery or List widget to any page on your site. For this example, we suggest adding one to a site page called Our Team. 

Go to the Listings page and add a Photo Gallery widget.

Right-click on the widget, click Connect to Data, and connect it to the Team Collection.

Connect the widget's image, title, description and link to relevant fields in the collection. Make sure the Link field is connected to the Dynamic Page - in this case, the page named Team Member. If there is only one field that matches a specific content type in the collection, it may be auto-selected.

Filter & Sort What's Displayed on the Site 

When connecting widgets to the collection, you can control what the widget displays by filtering and / sorting the content. For example, you can filter team members according to department and position, and sort them according to alphabetical order.

In this example, there are two departments: Management and HR. To enable the widgets to display each department separately, do the following: 

1. Connect a Photo Gallery or List widget to the collection.
2. Click Filter and Sort.
3. Choose a filter: Select Department in the dropdown field and enter Management.
4. Now the widget will display only members of the Management team. 
5. To display everyone in this team in alphabetical order, sort accordingly. 

You can repeat this process with another photo gallery (or simply duplicate the one you just created), and select the HR team instead.

Connect Your Page SEO to the Collection Data 

Now that your Dynamic Page is connected, you can connect the page to SEO properties. In the Pages panel, click the cog icon of the Dynamic Page and select SEO. From here, you can connect the SEO title and description, as well as the social network image, to fields in your collection. This gives you different SEO properties for each of your page items; in this case, for each listing.

Voila! That’s All There Is to It

That’s how you can create a great-looking site with Dynamic Pages based on a Google Sheets Collection. 

Want to add a new team member? Just add a new row in the collection and fill the fields with content.

Want to add a new element to each team member page? First, go to Google Sheets, add a new column and fill it with content for each listing. Next, go to the Content Library > Collections, select the collection and manually add the new field. Click Refresh data to fetch the new data.

Want your client to manage their own content? Make sure they have access to the Google Sheet and they won't even have to go into the editor.

Google Sheets Collections are one of four ways that you can store data for building Dynamic Pages. For instructions on how to build collections right inside Duda, see the Internal Collections: How To.