HubL Reference

Table of contents
Close

Building Dynamic Pages with HubDB

A dynamic website page is a COS 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:

  • A HubSpot account with the $300 Website Add-On
    • Portals with Website Starter or without the Website Add-On do not support HubDB
    • You can check if your portal has the $300 Website Add-On by signing in here.
  • Approximately 3 hours
  • Some prior knowledge of HubSpot's COS, HTML and CSS will be needed to customize your page

Here’s how to start using dynamic pages.

Create a HubDB Table

Go to http://app.hubspot.com/l/hubdb and click the “Create table’ button. Give your table a descriptive name. Click the “Settings” button and check “Use for dynamic pages.”

Click “Update.” You’ll now see two additional columns in your table, “Title” and “Path.”

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.

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 “jane,” “jeff,” “justine,” and “gregory.”

Make sure to publish your table before moving on to the next step.

Create a Template

Go to Design Manager and create a new coded file page using the code editor.

You can name it whatever you’d like.


This template will handle both the list of rows and viewing details for a single 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). 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.”

Create the Dynamic Page

The quickest way to create a dynamic page from your template is right in Design Manager. From the Actions menu, choose “Create page from template,” 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 HubDB Table for dynamic pages dropdown menu, find the HubDB table you created earlier and select it.


Note that your HubDB Table ID will be different than the example above.


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.

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/jane will display the details for the CEO, Jane.

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.