Skip to main content

Supported products

Requires one of the following products or higher.

  • Content Hub -Professional

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. Multilevel dynamic pages take this concept further, allowing you to create up to five levels of pages within one dynamic template.

Each dynamic page includes its own unique, SEO-friendly URL, and offers page-specific analytics.

  • In your HubSpot account, navigate to Marketing > Files and Templates > HubDB.

  • Click the name the table that will act as the parent for any other tables that will be used for your nested child tables.

  • In the top right, click the Actions dropdown menu, then select Manage settings.

  • If you haven't yet enabled the table for dynamic pages, click to toggle the Enable creation of dynamic pages using row data switch on, then select the columns to populate the page data.

  • Click to select the Allow child tables and Automatically create listing pages for child tables checkboxes.

    hubdb-manage-settings-child-tables

  • Click Save.

With your changes saved, you'll then see a Child table column added to the table. In this column, use the dropdown menu to select another HubDB table to pull data from.

In the parent table, use the Child table column dropdown menus to select tables to pull data from.

You can only select tables that are enabled for dynamic page content creation. If you've enabled a table for dynamic page creation but aren't seeing it in the Child table dropdown menu, ensure that you've clicked Publish in the child table.

hubdb-menu-parent-table

In the above example, the first row will be pulling its food data from the Foods child table, which contains data about available foods, as shown below.

hubdb-food-child-table

When setting multilevel dynamic pages, the page paths for each row in the child table will be parent_path/child_path. For example, the page path for the banana row will be page_path/foods/banana.

By turning on the Automatically create listing pages for child tables setting, HubSpot will also automatically create intermediate listing pages for the child table rows (page_path/foods and page_path/beverages).

If you would rather have those intermediate routes not resolve and return a 404 page, deselect the Automatically create listing pages child child tables checkbox in the table's settings.

Through child tables, you can create up to five levels of pages with one dynamic template. You can configure each level by using the dynamic_page_route_level HubL variable. The top-level template starts at a value of 0 and increments for each table layer.

For this tutorial, the goal is to list the child rows and group them by parent category. The example code below does the following:

  • First, it retrieves the category rows using dynamic_page_hubdb_table_id.
  • Then, the hs_child_table_id property of each category row retrieves the table IDs of the child tables.
  • Last, it uses those table IDs to list the child rows under each parent category.

After populating the top-level template, you'll then need to define templates for the subsequent levels in a similar fashion.

While building out your templates, it can be useful to access parent table data within child templates. For example, when our example page resolves to foods/banana, the dynamic_page_hubdb_row variable will be set to the banana row. However, you may want to access data from the food row. You can use hs_parent_row value on the dynamic_page_hubdb_row to retrieve the parent row:

Continue building out templates for each needed level. Then, you'll need to l ink the parent table to a page.

The final step is to create a page from the multilevel template and link the top-level parent table to the page. To do so, you'll create a page, then access its settings. In the Advanced Options settings of the page editor, click the Data source dropdown menu and select the Parent table.

dynamic-pages-dropdown-menu