Build Dynamic Pages with HubDB

Last updated:

A dynamic website page is a CMS page whose content changes based on the path of the URL requested by an end user. HubDB already allows you to store, filter, and display data in your HubSpot website pages. With dynamic pages, HubDB allows you to create a page for every row in your table. Each dynamic page includes its own unique, SEO-friendly URL, and offers page-specific analytics. You can reference more detailed HubDB documentation here.

You’ll need:

  • CMS Hub Professional or Enterprise.
  • Some prior knowledge of HTML and CSS.

1. Create a HubDB Table

To create a new HubDB table:

  • In your HubSpot account, navigate to Marketing > Files and Templates > HubDB.
  • In the upper right, click Create table.
  • In the dialog box, enter the table label and name, then click Create.

With the table created, you can set it to be used for dynamic page content:

  • In the upper right, click Actions, then select Manage settings.
  • In the right panel, click to toggle the Enable creation of dynamic pages using row data switch on.
  • You can optionally select the meta description, featured image, and canonical URL of the individual dynamic pages. If you leave these values empty, each page will inherit the respective values from its parent page.
  • Click Save to save your changes.
hubdb-table-settings-sidebar-save

After you update your table settings, the Page title and Page path columns will be added to the table.

  • Page title: the name of this page as seen in the HTML title tag.
  • Page path: the last segment of the URL for the dynamic page created by each row in the table. 

The following table is an example modeled after an "About us" page for members of an executive team.

HubDB table with dynamic pages enabled

This table will be used to create dynamic pages with paths ending in cfo-ninja, ceo-jeff, cto-bristow, and pd-hugo.

Please note: though you have to enter page paths as lowercase, the resulting URLs are case insensitive. In the example above, when someone navigates to /CEO-Jeff they will see the same page as /ceo-jeff instead of a 404 error.

When you're ready to use the data from your table to start building out your pages, click publish in the top right.

2. Create a Template

After you publish your table, you can reference its data in a new template.

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the left sidebar menu, navigate to the folder that you want to create the template in. To create a new folder, in the upper left click File, then select New folder. Then, click File, and select New file.
  • In the dialog box, use the dropdown menu to select HTML + HubL as the file type.
  • Click Next.
Creating a new HTML + HubL Template
  • In the File name field, enter the name of the template.
  • Under File location, you can change where the template is located in your design manager by clicking Change.
  • Click Create to create the template.

This template acts as both the listing page listing all rows and its the individual detail page for each row, similar to how blog templates can be used for both listing and post detail pages.

When a dynamic page is set to use this template and the end of the URL matches the path column, you can access the dynamic_page_hubdb_row and dynamic_page_hubdb_table_id variables in the template. For example, for building an executive profile page, the code below demonstrates how you can use fields from the dynamic_page_hubdb_row to display an executive's info:

  • hs_name: the associated Page title for the HubDB row.
  • name: the executive's name.
  • role: the executive's role.
{% if dynamic_page_hubdb_row %} <h1>{{ dynamic_page_hubdb_row.hs_name }}</h1> <h2>{{ dynamic_page_hubdb_row.name }}</h2> <h3>{{ dynamic_page_hubdb_row.role }}</h3> {% endif %}

Next, you can add handling for the case in which someone loads your dynamic page (without any additional paths from your table). Usually, this is used as a listing page, for listing links to the pages for the rows in your HubDB table. Replace your code with:

{% if dynamic_page_hubdb_row %} <h1>{{ dynamic_page_hubdb_row.hs_name }}</h1> <h2>{{ dynamic_page_hubdb_row.name }}</h2> <h3>{{ dynamic_page_hubdb_row.role }}</h3> {% elif dynamic_page_hubdb_table_id %} <ul> {% for row in hubdb_table_rows(dynamic_page_hubdb_table_id) %} <li><a href="{{ request.path }}/{{ row.hs_path }}">{{ row.hs_name }}</a></li> {% endfor %} </ul> {% endif %}

The code inside the elif block iterates over all the rows in the executive's table and displays each entry in a list, with a link to their unique path.

The preview for this template will be blank because it relies on the context of the page to set the dynamic_page_hubdb_row or dynamic_page_hubdb_table_id variables.

To test the template, you can temporarily add this line above your code. Don’t forget to remove it before the template is published.

{% set dynamic_page_hubdb_table_id = %}

The resulting preview will render a list of links, one for each entry in the HubDB table.

Sample of preview of page

Remove the test line if you added it. When you're ready to test out your template in a new page, click Publish changes in the top right.

3. Create the Dynamic Page

To create a dynamic page from your template:

  • Select the template you created, then click the Actions dropdown menu at the top of the finder.
  • Select Create page.
  • In the dialog box, select Website page, then enter a page name.
  • Click Create page.
  • At the top of the page editor, click the Settings tab.
  • Click Advanced Options to expand additional settings.
  • Scroll down to the Dynamic pages section, then click the Data sources dropdown menu. Select the HubDB table you created.
screenshot of create page from template modal

On your new page, click the Settings tab. Give your page a title and URL. This URL will be the base URL for your dynamic page.

Scroll down to and click on Advanced Options. From the Table for dynamic pages dropdown menu, find the HubDB table you created earlier and select it.

Advanced options in page settings for linking to HubDB table

Click the Settings tab and fill in the details for the base page. You’ll need to enter a page title value in the base page and a meta description.  When you’re finished, click Publish. Your page is now ready to view.

4. View Dynamic Page Performance

Now you can visit your new dynamic page and all of its paths, as defined by your HubDB table.

If you set your page URL to http://your.company.com/executives, the page with URL http://your.company.com/executives will display a directory of executives. The page with URL http://your.company.com/executives/ceo-jeff will display the details for the CEO, Jeff.

These URLs (after analytics processing completes) will appear in the analyze section of your website pages dashboard. Each distinct URL with visits will be listed and you’ll be able to click its title to see detailed information and analytics. You might need to access your pages from outside your development network for them to show up in analyze if you’ve excluded your IPs in your reports settings.

More HubDB focused tutorials

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.