Calling Hubdb for a Glossary

[Woodsy]

Hi, I have crated a Hubdb with 331 items. I am looking to create a glossary page that is built by pulling in the data from this tabel.

I have coded the from A to L:

<div class="a-z">

 <div class="set">
 <h3 class="letter">A</h3>
 <ul class="word">
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=A") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

 <div class="set">
 <h3 class="letter">B</h3>
 <ul class="word">
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=B") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

 <div class="set">
 <h3 class="letter">C</h3>
 <ul class="word">
 {% set queryparam = "letter=C" %}
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=C") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

 <div class="set">
 <h3 class="letter">D</h3>
 <ul class="word">
 {% set queryparam = "letter=D" %}
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=D") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

 <div class="set">
 <h3 class="letter">E</h3>
 <ul class="word">
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=E") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

 <div class="set">
 <h3 class="letter">F</h3>
 <ul class="word">
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=F") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

 <div class="set">
 <h3 class="letter">G</h3>
 <ul class="word">
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=G") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

 <div class="set">
 <h3 class="letter">H</h3>
 <ul class="word">
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=H") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

 <div class="set">
 <h3 class="letter">I</h3>
 <ul class="word">
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=I") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

 <div class="set">
 <h3 class="letter">J</h3>
 <ul class="word">
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=J") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

 <div class="set">
 <h3 class="letter">K</h3>
 <ul class="word">
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=K") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

 <div class="set">
 <h3 class="letter">L</h3>
 <ul class="word">
 {% set glossary = hubdb_table_rows(module.hubdb_id, queryparam= "letter=L") %} 
 {% for glossary in glossary %}
 <li><a href="">{{ glossary.name }}</a></li>
 {% endfor %}
 </ul>
 </div>

</div>

Unfortunatly nothing is being pulled into K or L so I am assuming that I am hitting the limit for the number of calls to the Hubdb.

Is there a way for me to build this so that I call from the Hubdb once and then display the data via queries for each letter rather than calling the Hubdb for each letter.
The database has a column for item name and a column for the letter that it is grouped to.

Thanks

[Anton]

Hey @Woodsy,

yeah - you’re most likely are hitting the object limit of the hubdb_table_rows function, which is set to 1000.
Also, here’s an easier code for you, which doesn’t rely on the “letter” column in HubDB but rather checks for the first letter of the entry and sorts it automatically.

{% set table = hubdb_table_rows(module.hubdb_id) %}
{% set alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] %}

{% for letter in alphabet %}
 <h2>{{ letter }}</h2>
 {% for row in table %}
 {% if row.name is string_startingwith letter %}
 {{ row.name }}
 {% endif %}
 {% endfor %}
{% endfor %}

best,

Anton

[nickdeckerdevs1]

Yeah, I was looking at this and using starting with instead of an actual matching value will go much further!
Nice work @Anton

[Woodsy]

Hi @Anton
Thanks for sharing with me. All the data is now being pulled through.

[Woodsy]

Hi @Anton I am trying to create dynamic pages from this Hubdb. When one of the listed words is clicked on a dynamic page is created. Am I able to created a dynamic page from this module by adding the code in the module. This would then replace the list with a title and description.

{% if dynamic_page_hubdb_row %}
 <h1>{{ dynamic_page_hubdb_row.hs_name }}</h1>
 <p>{{dynamic_page_hubdb_row.description}}</p>
{% elif dynamic_page_hubdb_table_id %}

<!-- Listing Code-->

{% set table = hubdb_table_rows(module.hubdb_id) %}
{% set alphabet = ["3","A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] %}

<div class="a-z">

{% for letter in alphabet %}

<h3 id="{{ letter }}" class="letter">{{ letter }}</h3>

 <div class="set">

 <ul class="word">

 {% for row in table %}
 {% if row.name is string_startingwith letter %}

 <li><a href="{{ row.hs_path }}">{{ row.name }}</a></li>

 {% endif %} 
 {% endfor %}

 </ul>

 </div>

{% endfor %}
</div>

<!-------------->

{% endif %}

Or do I need to create a page template and add the code and module? Thanks

[Anton]

Hey @Woodsy,

if you’re building a dynamic page with HubDB (with subpages and such). I would recommend to build a whole template instead of a module.

The template will have the code for the “listing” as well as the “detail” page.

Here’s an example:

<!--
 templateType: page
 label: HubDB Glossary
 isAvailableForNewContent: true
-->
{% extends "../layouts/base.html" %}

{% block body %}
{% set table = hubdb_table_rows(module.hubdb_id) %}
{% if dynamic_page_route_level == 0 %}
	{# drop something like a hero module here #}
{% set table = hubdb_table_rows('213456789') %}
{% set alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] %}

{% for letter in alphabet %}
 <h2>{{ letter }}</h2>
<ul>
 {% for row in table %}
 {% if row.name|title is string_startingwith letter %}
 <li><a href="{{row.hs_path}}">{{ row.name }}</a></li>
 {% endif %}
 {% endfor %}
</ul>
{% endfor %}
{% elif dynamic_page_route_level == 1 %}
 {# drop something like a hero module here #}

<div class="container">
<div class="row">
<div class="column">
{{ dynamic_page_hubdb_row.content }}
</div>
</div>
</div>

{% endif %}
{% endblock body %}

best,

Anton

[Woodsy]

Hi @Anton I have set up a template page and have atached it to a new website page.

This is the code view:

This is the view of the page using the template.html file:

As you can see from the above image the listing isn’t showing. I have added the correct HubDb ref number. The base header and footer are being pull through from the template but not the listing code. Do I need to include anything further to get the listing to display like it did when it was just a module?

Thanks

James

[Woodsy]

Hi @Anton
I couldn’t get the code that you suggested to work so thought I might be able to add the A-Z as a module into the html template:

<!--
 templateType: page
 isAvailableForNewContent: true
 label: Glossary 2200A
-->
{% extends "./layouts/base.html" %}

{% block body %}

{% dnd_area 'dnd_area'
 label='Main section',
 class='body-container body-container--1801a'
%}

{% set table = hubdb_table_rows(module.hubdb_id) %}

{% if dynamic_page_route_level == 0 class='row-fluid' %}

{% dnd_section full_width=true %}
		{% dnd_module path="../modules/Hero" %} {% end_dnd_module %}
	{% end_dnd_section %}

{% dnd_section full_width=true %}
		{% dnd_module path="../modules/Glossary" %} {% end_dnd_module %}
	{% end_dnd_section %}

{% elif dynamic_page_route_level == 1 %}

{% dnd_section full_width=true %}
		{% dnd_module path="../modules/Hero" %} {% end_dnd_module %}
	{% end_dnd_section %}

<div class="container">
<div class="row">
<div class="column">
{{ dynamic_page_hubdb_row.content }}
</div>
</div>
</div>

{% endif %}

{% end_dnd_area %}

{% global_partial path='./partials/footer-cta-banner.html' %}
{% endblock %}

The page is now pulling the module when loading but how do I connect the a-z list so that it opens the corosponding item title and description in a dynamic page?
Thanks
James

[Woodsy]

@Anton

I have got the glossary list showing and am trying to add a dropdown filter and keyword search. I am trying to make them both update the list in realtime rather than having to press a submit button. Could you have a look at the code and let me know how I would implent the above? Thank you in advance for any help.

<!--
 templateType: page
 isAvailableForNewContent: true
 label: Glossary 2200A
-->
{% extends "./layouts/base.html" %}

{% block body %}

{% if dynamic_page_hubdb_row %}

<!-- Content Page -->
<h1>{{ dynamic_page_hubdb_row.hs_name }}</h1>
<p>{{dynamic_page_hubdb_row.description}}</p>
<!-------->

{% elif dynamic_page_hubdb_table_id %}

<!-- Hero -->
{% dnd_area "body_dnd_area" %}
 {% dnd_section
 background_image = {
 'backgroundPosition': 'MIDDLE_CENTER',
 'backgroundSize': 'cover',
 'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
 },
 max_width=1000,
 vertical_alignment='MIDDLE'
 %}
 {% dnd_module path='../modules/Hero' %}
 {% module_attribute "html"%}
 This is your main headline.
 Use this space to tell everyone about what you have to offer.
 {% end_module_attribute %}
 {% end_dnd_module %}
 {% end_dnd_section %}
{% end_dnd_area %}
<!-------->

<!-- A-Z Filter Buttons -->
<div class="a-z_filter">

 <div class="">

 </div>

 <div class="a-z_filter_outercontainer">
 <div class="a-z_label v1"><p><strong>Find terms by letter:</strong></p></div>
 <div class="a-z_filter_container">

 <div class="a-z_label v2"><p><strong>Find terms<br>by letter:</strong></p></div>

 {% set table = hubdb_table_rows(module.hubdb_id) %}
 {% set alphabet = ["3","A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] %}
 {% for letter in alphabet %} 
 <a class="a-z_button" href="#{{ letter }}">{{ letter }}</a>
 {% endfor %}

 </div>
 </div>
</div>
<!-------->

<!-- Dropdown and Search Box that will update the list in realtime with no need to press a submit button-->
<div>
 <form id="form_id" method="get" >
 {# Category2 filter #}
 <div>
 <h3>Keyword Filter:</h3>
 <select name="category2" form="form_id" onChange="this.form.submit()">
 <option value="show-all">Show All</option>
 dropdown list pulled from HuBdb category2 column
 </select>
 </div>
 {# Search filter #}
 <div>
 <input name="publication" type="text" id="search-by" class="autocomplete" value="" placeholder="Search by keyword">
 </div>
 </form>
</div>
<!-------->

<!-- A-Z Listing -->
{% set table = hubdb_table_rows(module.hubdb_id) %}
{% set alphabet = ["3","A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] %}

<div class="row-fluid a-z">

{% for letter in alphabet %}

<h3 id="{{ letter }}" class="letter">{{ letter }}</h3>

 <div class="set">

 <ul class="word">

 {% for row in hubdb_table_rows(dynamic_page_hubdb_table_id) %}
 {% if row.name is string_startingwith letter %}

 <li><a href="{{ request.path }}/{{ row.hs_path }}?hs_preview=AyQeGSab-190730271634">{{ row.name }}</a></li>

 {% endif %} 
 {% endfor %}

 </ul>

 </div>

{% endfor %}
</div>
<!-------->

{% endif %}

<!-- CTA Banner-->
{% global_partial path='./partials/footer-cta-banner.html' %}
<!-------->
{% endblock %}