HubL Reference

Table of contents
Close

Let's Build A Team Page with HubDB

In this tutorial, I’ll show you how to create a team page like this one on HubSpot’s COS. We will use HubDB. 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 2 hours
  • Some prior knowledge of HubSpot's COS, html and css will be needed to customise your team page

Create your HubDB table

  1. Go to HubDB, either by clicking here and signing in, or by going to app.hubspot.com/hubdb/XX (replace XX with your portal ID).

  2. Create a new HubDB table by clicking "Create a new table".

  3. You now have an empty data table. Name the table “Team”. This will be where you’ll store details about your team.

    Each row of the HubDB table will represent one person on your team page. 
    Notice that each row has an “ID”. This is the unique ID that we assign each item in your data table. The ID is automatically generated and cannot be edited. Later on, you might want to use this ID to request a specific item from your data table.
    Each column of the HubDB table will represent an attribute of the team member, like their name, photo or title.

  4. Now we’re going to add some structure to the data table. Let’s start with giving each team member a name. Add your first column by clicking the “+Add column” button.

  5. Set the fields as shown, with Column label and Column name set to “Name”, and Column type to “Text”.
    HubDB_addColumn.png

  6. Click “Add column” to finish adding the “Name” column. You’ll see the new column appear in your HubDB table.

  7. Now add the remaining columns, as follows:
    • Team Member Image (Image)
    • Team Member Title (Text)
    • Department (Select) - you can set the department options to choose from. For example, "Marketing”, “Product” and “Sales”
    • Team Member Description (Rich Text)

Your table will look like this:

Screen Shot 2016-11-08 at 10.57.49 PM.png

 

Populate and publish your table

  1. Now we can fill the table with data! There are two ways to get data into a HubDB table - you can type directly into the table, or you can import a csv file. If you’d like to add in your own data, click “Add Row” to get started.

  2. To use the data in your new table on a page, you’ll need to Publish your data table. As a reminder, this makes the data in your table publicly available, so make sure that you don’t store sensitive information like usernames, passwords or customer information in a HubDB table. Once you’re ready, hit “Publish” on your data table.

Congratulations, your HubDB table is now live and ready for use across the COS!

Create new custom module


We're going to use a custom module so that we can easily add team members to any page. To create a new custom module, go to the Design Manager and select “Custom Modules”. Give the new module a name. This will show up as a module in the editor so something descriptive, like "Team Section", is a good choice.
newCustomModule.png

Copy and paste the following code into your new custom module:

{# Get Team Members from HubDB #}
{% for row in hubdb_table_rows(YOUR_HUBDB_TABLE_ID, options)%}

<img src="{{ row.team_member_image.url }}" width="500" {% if row.team_member_image.width > row.team_member_image.height %} class="landscape" {% endif %} alt="{{ row.Name }} Headshot">

{{ row.Name }}

{{ row.team_member_title }}

{{ row.team_member_description }}

{% endfor %}
Now fill in the details of your HubDB table by replacing YOUR_HUBDB_TABLE_ID with your HubDB table ID. Your table ID can be found in the URL app.hubspot.com/hubdb/<portalID>/table/<tableID>. Our editor helps you to identify any lines of codes with errors by marking them with an “X”.
 
You can check your progress at any time by switching to the “Preview” tab.

Using your custom module

To use your custom module, add it to any page template, then use that template when creating a new page for your site. You can find more information on adding a custom module to a template here.