One of the most powerful features of HubSpot CMS is HubDB. You can use it to create rows of data in a table that can be used dynamically on a web page. There are some complex use cases documented in HubDB developer’s page, like an Event Registration module, or even a dynamic map of shop locations. However, I find it most useful in more practical uses: to eliminate tedious updates to the website.
When you create a HubDB table, you can add different column types. This gives you a lot of flexibility when it comes to the data type you wish to capture and use. Data types include:
- Text
- Rich Text (data stored is HTML the HubDB UI provides a text editing interface)
- URL
- Image
- Select (single select drop-down)
- Multi-Select (multi select drop-down)
- Date
- Date and Time
- Number
- Currency
- Checkbox (Yes, No or True, False)
- Location (latitude, longitude coordinates such as 42.36, -71.11)
- Foreign ID (cross reference another HubDB table)
- Video (video hosted on HubSpot)
Now let’s look at use cases. When I first joined Embed International, there were a few pages that needed very regular updating of data. “Meet the Team” page needed regular updates with job title changes, employees leaving or joining, and even photos. If we were to do them manually, it required changes not only of the data, but also the layout and order of appearance. What if all I needed to do was to update a table of the staff with text, images, links, order of appearance, and the page automatically updates itself with the data? That’s where HubDB comes in handy.
The basic required fields of employee name, job title, image URLs were at first created. We then realised the order of appearance would need a number to represent so that we can sort by ascending order. And in case there was a change in the status of the employee, we wanted a way to “hide” it from being displayed, marked for removal later.
Updating the table was much easier and faster for content editors, than manually adding modules into flex columns, then editing them, and then re-ordering them.
Isn’t this a much neater way of managing updates of your website?
Implementing HubDB requires some coding. The simple way to think about it is you are replacing attributes in the HTML with the row information by querying the hubDB Tables.
Example: we are replacing the image URL with
url(‘{{ row.grey_image.url }}’)
, querying the “Grey image” row for the image URL.
We also need to give instructions in Hubl to loop the query until you reach the last row. For example:
{{ row.staff_name|replace(’ ', ‘-’)|lower }}-{{loop.index}}" data-filter="{{ row.staff_sort_order }}
, which inserts the staff name in ascending order sorted by the “staff sort order” number.
If you are not a developer, you probably can get a contractor to do it easily. We had a contractor get this done in just under 4 hours.
We also ended up turning another 2 pages that required regular updates to Dynamic pages with HubDB.
One was the Partners and Association page, where the same challenges of regular, tedious updates were present. Whenever a partner changes some details, leaves or a new partner joins, we had to update and re-order them according to alphabetical order. Looks like another perfect use case for HubDB!
We had a partner type field that was a single select drop down to display the card in the right “partner” or “association” sections.
The last page we converted was the Trade Show Schedules page. We frequently had to add/remove/edit event details, especially during the Covid period. My colleague handling events was able to update all events on her own, without asking me to add and rearrange them. This saved a lot of time from pretty mundane website information maintenance.
In this table, we had a “CTA” column to change the CTA button text, and a “Hide Event” checkbox, in case it was an event we did not want to list now, but would do so in the future.
This is just 3 simple HubDB use cases that you can consider for your company. Since HubDB data can also be updated by API, you could have an external system update the tables, and then display the data dynamically on your pages.
For example, you want to display all of your customer locations (numbering thousands) all over the world on a map in your website. You could push the location data to your HubDB from your application via API, and then display the locations in your website.
Or you could sync car rental availability from your car rental management system to HubDB, to display availability by car models, or sync property data to HubDB to display units for sale or rental by district. The possibilities are endless.
Do you have an interesting use case of HubDB in your company? Please reply and share your amazing experience with HubDB with the community!