Building Dynamic Pages with HubDB
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:
- HubSpot CMS
- Some prior knowledge of HubSpot's CMS, HTML and CSS will be needed to customize your page
Here’s how to start using dynamic pages.
Go to HubDB and click the “Create table" button. Give your table a descriptive name. Click the “Actions” button, click "Manage Settings", and enable “Enable creation of dynamic pages using row data.”
Click “Save” You’ll now see two additional columns in your table, “Page Title” and “Page Path.” Additionally, you can choose columns to specify the values for the featured image, meta description and canonical URL of the individual dynamic pages.
Title is the name of this page as seen in the HTML title tag. Path is the last segment of the URL for the dynamic page created by each row in the table. You’ll attach the other parts of the URL later on. If you do not select columns for featured image, meta description and canonical URL, or leave the cell blank for a given row, dynamic pages will inherit these values from the parent page.
You can add whatever data to your table that you’d like. As an example, here’s a table of an executive team.
In this example, we’ll have a dynamic page with paths ending in cfo-ninja, ceo-jeff, cto-bristow, and pd-hugo.
Make sure to publish your table before moving on to the next step.
Go to Design Manager and create a new "HTML & HUBL template".
You can name it whatever you’d like.
Similar to how blog templates can be both listing and post detail templates, this template is the listing page listing all rows and it's the individual detail page for each row. When a dynamic page is set to use this template and the end of the URL matches the path column, dynamic_page_hubdb_row and dynamic_page_hubdb_table_id variables are made available in the template. The code to display the details for a row is very simple. Insert the following code just before .
{% 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 %}The H1 tag displays the title of the page, which is also automatically inserted into the HTML title tag.
The H2 tag displays the executive’s name.
The H3 tag displays their role.
Note that if you named your columns differently than the example table above, you’ll need to adjust the attribute names to match.
Now we’ll handle 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. 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 simply 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 = <YOUR_HUBDB_TABLE_ID> %}The preview will display something that looks like this:
Remove the test line if you added it. Finally, publish the template, being sure to check “Make this template available for new content.”
The quickest way to create a dynamic page from your template is right in Design Manager. With your template selected, from the Actions menu, choose “Create page” make it a website page and give it a name.
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.
Fill in the details for the base page in the page Settings UI. 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.
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.
Thank you for your feedback, it means a lot to us.