CMS Development

VoytechMedia
Colaborador(a)

HubDB dynamic rows generating

resolver

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 Avaliação positiva
1 Solução aceita
dannio
Solução
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

HubDB dynamic rows generating

resolver

 @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)

 

Exibir solução no post original

8 Respostas 8
Kevin-C
Especialista reconhecido(a) | Parceiro
Especialista reconhecido(a) | Parceiro

HubDB dynamic rows generating

resolver

 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
Colaborador(a)

HubDB dynamic rows generating

resolver

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 Avaliação positiva
dannio
Solução
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

HubDB dynamic rows generating

resolver

 @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
Colaborador(a)

HubDB dynamic rows generating

resolver

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 Avaliação positiva
dannio
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

HubDB dynamic rows generating

resolver

@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
Orientador(a)

HubDB dynamic rows generating

resolver

You could do something with ajax and the HubDB api

 


profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

 

 

Jaycee_Lewis
Gerente da Comunidade
Gerente da Comunidade

HubDB dynamic rows generating

resolver

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
Colaborador(a)

HubDB dynamic rows generating

resolver

Thank you!

 

0 Avaliação positiva