CMS Development

VoytechMedia
Contributeur

HubDB dynamic rows generating

Résolue

Hello,

I am wondering if it would be possible to generate items from my HubDB table after certain button being clicked.
To be more specific - I do not want to generate all the items rightaway and display/hide them w css class but dynamically generate them after button being clicked. This way my webpage is optimized.

I built a blog with categories once but all the thumbnails are generated immediately and being shown/hidden after filtering. I am looking for more optimal way to build such blog/resources page https://www.ziflow.com/blog

Another example is here https://www.toriihq.com/resources but again - elements are loaded just after DOM is loaded and I want them to load dynamically.

0 Votes
1 Solution acceptée
dannio
Solution
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

HubDB dynamic rows generating

Résolue

 @VoytechMedia  you can use an ajax call to grab the hubdb rows via:
GET /cms/v3/hubdb/tables/{tableIdOrName}/rows
https://developers.hubspot.com/docs/api/cms/hubdb


This requires no authentication if the table is set to public. If it's not public, it will require a key, in which case you will need a serverless function to make the call as you will need to hide your authentication key

 

Once you get the data via the call, just append HTML to the parent container. something like:

  

 

 

html = "<div>" + data.columns['name'] + "</div>";
parent_container.insertAdjacentHTML('beforeend', html)

 

Voir la solution dans l'envoi d'origine

8 Réponses
Kevin-C
Expert reconnu | Partenaire solutions
Expert reconnu | Partenaire solutions

HubDB dynamic rows generating

Résolue

 Hey @VoytechMedia 

 

Before looking at a JS solution my first thought would be to look into lazy loading or potentially just off loading all of the concern to the browser!

 

What I mean by that is that most modern browsers will actually lazy load an image if its parent container is hidden! So you can hide the content and this tells the browser "this is a non-blocking resource" and should be deprioritized in the critical rendering path.

 

This example shows that concept in action. 

 

Also see lazy loading on MDN.

 

Thoughts?

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
VoytechMedia
Contributeur

HubDB dynamic rows generating

Résolue

Thank you very much for response @Kevin-C 

I already implemented similar solution here https://www.ziflow.com/blog
Where we had about 150+ blog posts available but it is causing to render tremendously (in my opinion) long HTML code - even if content is lazy loaded. 
This page have 400 inbound links as the final outcome which apparently may cause its SEO being not optimal. 

Note from Hubspot while examining above page with Optimize tab:
"Page has less than 300 outbound links 

Too many outbound links creates a bad experience for your visitors and may cause search engines to view your page as low-quality or as spam. Your page has 401 links (including your navigation menus, for example). Aim for less than 300 outbound links."

I think your solution is great for pages with less content, what do you think? Or shouldn't I care that much about it?
Much thanks for helping me!! 🙂 
0 Votes
dannio
Solution
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

HubDB dynamic rows generating

Résolue

 @VoytechMedia  you can use an ajax call to grab the hubdb rows via:
GET /cms/v3/hubdb/tables/{tableIdOrName}/rows
https://developers.hubspot.com/docs/api/cms/hubdb


This requires no authentication if the table is set to public. If it's not public, it will require a key, in which case you will need a serverless function to make the call as you will need to hide your authentication key

 

Once you get the data via the call, just append HTML to the parent container. something like:

  

 

 

html = "<div>" + data.columns['name'] + "</div>";
parent_container.insertAdjacentHTML('beforeend', html)

 

VoytechMedia
Contributeur

HubDB dynamic rows generating

Résolue

Thank you for response @dannio 
This looks like the way to go but my another question would be - Is it possible to parametrize these HubDB requests?
For example if I had table columns such as ID, Name and Category of item. I would like only grab items of "Tech" Category and Name containing f.e "ex" letters. 
I know I could filter all the JSON data once I request rows but more optimal would be adding parameters to request itself. 

EDIT: I see that adding queries is possible here https://developers.hubspot.com/docs/api/cms/hubdb#filtering-and-sorting-table-rows

So for example /cms/v3/hubdb/tables/{tableIdOrName}/rows?name__contains=ex&category__eq=Tech should make it work.

Additionally, is it possible to limit amount of requested rows for example to 10? From 5th to 15th

0 Votes
dannio
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

HubDB dynamic rows generating

Résolue

@VoytechMedia I see you found the answer already. Yes, it's basically the same as how you query when using hubl functions. Just add the query to the end of the request and it should work the same way.

BarryGrennan
Guide

HubDB dynamic rows generating

Résolue

You could do something with ajax and the HubDB api

 


profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

 

 

Jaycee_Lewis
Gestionnaire de communauté
Gestionnaire de communauté

HubDB dynamic rows generating

Résolue

Hi, @VoytechMedia 👋 Thanks for reaching out! Let's see if we can get the conversation going. Hey, @stefen @SJaeger @himanshurauthan @dannio, do you have any experience with projects like @VoytechMedia is describing?

 

Thank you! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

VoytechMedia
Contributeur

HubDB dynamic rows generating

Résolue

Thank you!

 

0 Votes