After the creation of the page, you have to select the HubDB table under page settings.
Checking if the HubDB table has a dynamic setting and has data then print variable data.
{% if dynamic_page_hubdb_row %}{{ dynamic_page_hubdb_row.hs_name }}{{ dynamic_page_hubdb_row.webinar_image.url }}{{ dynamic_page_hubdb_row.webinar_name }}{{ dynamic_page_hubdb_row.webinar_date|datetimeformat('%a, %e %b %Y') }}{{ dynamic_page_hubdb_row.location['lat'] }},{{ dynamic_page_hubdb_row.location['lon'] }}{% if dynamic_page_hubdb_row.sold_out == 1 %}Sold out{% else %}Seats available{% endif %}{% endif %}
Connect to another table to your main HubDB table.
The for loop to render foreign rows is accessed via the internal "Column name" field value set on the Foreign ID column.
{% if dynamic_page_hubdb_row %}{% for speaker in dynamic_page_hubdb_row.speakers %}{{speaker.photo.url}}{{speaker.name}}{{speaker.bio}}{% endfor %}{% endif %}
Add the video player widget
Find out more: https://designers.hubspot.com/how-to-add-videos-to-dynamic-pages-in-hubdb
{% if dynamic_page_hubdb_row %}{% video_player "embed_player" player_id="{{dynamic_page_hubdb_row.video}}" %}{% endif %}
The listing has 3 parts which are Filter, items list, and Pagination:
See the Pen HubDB List by bachot (@bachot) on CodePen.