Resource Listing

[Woodsy]

Hi, I'm trying to create a resource page that list out our company resources. Similar to the tutorial here: https://designers.hubspot.com/docs/tutorials/how-to-build-a-real-estate-listing-with-hubdb

I have created the database in HubDB and have published it and referenced the table ID in the code created in the custom module. When I copy the code into the custom module there is a lot of code warnings.

I would also like to filter by a couple of the columns so that I can see how that works but at the minute I can't get the table to pull through into the custom module.

How the two versions of the design manager affect HubDB? I am current ly in the old design manager as this tutorial was written a while ago. Does the above tutorial not work in the current / new design manager?

I would be really grateful if there is someone in this forum who has implemented a searchable / filterable resource listing that could share the basic code and same HubDB table.

Thanks,

James

[AJLaPorte_diagr]

Hi @Woodsy (James),

On line one of your statement, youdon'tt need the curly braces around your table id. So it should read

{% set table = hubddb_table_rows(848816, queryparam) %}

Likewise, it looks like you currently don't have any query params set. I would add above this line: 

{% queryparam = "" %}

This way the statement would know that the current queryparam is empty.

For all the other items in your {% for %} loop, you would want to use the following syntax to show the information in the columns. 

{{ row["name_of_hubdb_column"] }}

Essentially, the name of your column should be there. You can find that name by going into the dropdown on the column and choose edit column. You'll then see the readable name you choose for the column as well as the reference name (usually with underscores) for the column. 

I hope this helps. If you have any additional questions, please let me know. 

-AJ

[Woodsy]

Thanks, thats pefect. 

I have a order column (numbers) in my hubdb numbered 1,2,3,4,5 etc... How would I use this to order the resources? So if I change the order numbers in my hubdb to 2,5,3,1,4 the listing would reorder to always pull 1,2,3,4,5.

[AJLaPorte_diagr]

Hey James,

See here for a list of the parameters you can use: https://developers.hubspot.com/docs/methods/hubdb/v2/get_table_rows

You'd be looking to use the "orderBy" parameters. So for your code, it would be similar to:

{% set queryparam = "&orderBy=column_name" %}

likewise, you can also do this directly in your get_table_rows call by just adding that instead of the queryparam variable so it would look like this:

{% set table = hubddb_table_rows(848816, "&orderBy=column_name") %}

-AJ

[Woodsy]

Thank you so much for this.

To display all the selected items in a multiselect per listing do I use .choices?

[AJLaPorte_diagr]

When displaying items out, I've done as follows:

{% set primaryCat = hubdb_table_column( 8888888 , "multi_select_column_name").options %}

{% for choice in primaryCat %}
    ID: {{ choice.id }}
    Name: {{ choice.name }}
{% enfor %}

This way you can loop through them and even use some if/unless clauses if needed to show certain ones differently. 

[Woodsy]

Hi there I'm having trouble implementing the code to get the multi select column of the hubdb to show all the selected items per row. The multi select column is named tags.

My code is:

{% set table = hubdb_table_rows(848813, "&orderBy=resource-order") %}

{% if table == [] %}
    <p class='align-center'>Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
{% else %}
  {% for row in table %}
  
 <a href="{{ row["listing_url"] }}"> 
<div id="resource-listing" >
    <div class="{{ row["type"].name }}">
        <div class=resource-thumbnail><img src="{{ row["thumbnail"].url}}"></div>
            <div class="resource-details">
              <h2>{{ row["resource"] }}</h2>
              <p><b>Focus area:</b> {{ row["focus"].name }}</p>
              <p>{{ row["description"]}}</p>
              <div class="button"><a href="{{ row["listing_url"] }}">Details</a></div>
            </div>
    </div>            
</div>
</a>
  {% endfor %}
  {% endif %}

 If I add the following line of code

<p>{{ row["tags"]}}</p>

The webpage shows this:

[{id=4, name='Client Success'}, {id=6, name='Engagement'}, {id=9, name='PRM'}, {id=11, name='Partner Ecosystem'}, {id=13, name='Personalized Experience'}]

I would be extremely grateful for any help implementing this.

Thanks

[AJLaPorte_diagr]

For the tags try adding:

<p>
{% for tag in row["tags"] %}
   <span class="tag">{{tag.name}}<span>
{% endfor %}
</p>

This should give you an output of:

<p><span class="tag">Client Success</span><span class="tag">Engagement</span><span class="tag">PRM</span><span class="tag">Partner Ecosystem</span><span class="tag">Personalized Experience</span></p>

Let me know if this helps. If it doesn't you can try setting a variable before the for loop like so:

{% set tagList = row["tags"] %}
<p>
{% for tag in tagList %}
   <span class="tag">{{tag.name}}<span>
{% endfor %}
</p>

-AJ

[Woodsy]

Hi, I tried adding the code which worked. I wanted to add a background color behind each tag with margin right to separate them so that they appear in blocks.

I ended up with a row of tags with the background running across all of them with no spacing between each and there was extra blocks of background color at the end of the last tag. Looking at the outputted code all the <spans> are nested within each other.

The code I am using:

<style>
    #resource-listing {
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 0 rgba(0,0,0,.5);
    cursor: pointer;
    margin-bottom: 20px;
    }
    
    #resource-listing:hover {
        box-shadow: 0 1px 15px rgba(0,0,0,.1);
    }
    #resource-listing a p,
    #resource-listing a ul {
        color: #666;
    }
    
    
    #resource-listing .resource-thumbnail {
        width:250px;
        float: left;
        
    }
    #resource-listing .resource-thumbnail img {
        max-width: 100%;
    }
    #resource-listing .resource-details {  
        padding-left: 20px;
        overflow: hidden;
    }
    #resource-listing .resource-details h2{  
        margin: 0;
        padding-left: 0;
    }

    #resource-listing .tag{  
    background-color: #2cb194;
    color: #fff;
    padding: 5px 10px;
    margin-right: 10px;
    }
    
</style>


{% set table = hubdb_table_rows(848813, "&orderBy=resource-order") %}

{% if table == [] %}
    <p class='align-center'>Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
{% else %}
  {% for row in table %}
  
 <a href="{{ row["listing_url"] }}"> 
<div id="resource-listing" >
    <div class="{{ row["type"].name }}">
        <div class=resource-thumbnail><img src="{{ row["thumbnail"].url}}"></div>
            <div class="resource-details">
              <h2>{{ row["resource-title"] }}</h2>
              <p><b>Resource:</b> {{ row["resource"].name }}</p>
              <p><b>Focus Area:</b></p>
              
              {% set tagList = row["tags"] %} <p> {% for tag in tagList %} <span class="tag">{{tag.name}}<span> {% endfor %} </p>
            
              <p>{{ row["description"]}}</p>
              <div class="button"><a href="{{ row["listing_url"] }}">Details</a></div>
            </div>
    </div>            
</div>
</a>
  {% endfor %}
  {% endif %}

I then started to play with changing the code to display the tags in a list:

<style>
    #resource-listing {
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 0 rgba(0,0,0,.5);
    cursor: pointer;
    margin-bottom: 20px;
    }
    
    #resource-listing:hover {
        box-shadow: 0 1px 15px rgba(0,0,0,.1);
    }
    #resource-listing a p,
    #resource-listing a ul {
        color: #666;
    }
    
    
    #resource-listing .resource-thumbnail {
        width:250px;
        float: left;
        
    }
    #resource-listing .resource-thumbnail img {
        max-width: 100%;
    }
    #resource-listing .resource-details {  
        padding-left: 20px;
        overflow: hidden;
    }
    #resource-listing .resource-details h2{  
        margin: 0;
        padding-left: 0;
    }
    #resource-listing ul{  
        list-style-type: none;
    list-style: none;
    padding-left: 0;
    }
    #resource-listing li{  
        display: inline;
    background-color: #2cb194;
    color: #fff;
    padding: 5px 10px;
    }
    
</style>


{% set table = hubdb_table_rows(848813, "&orderBy=resource-order") %}

{% if table == [] %}
    <p class='align-center'>Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
{% else %}
  {% for row in table %}
  
 <a href="{{ row["listing_url"] }}"> 
<div id="resource-listing" >
    <div class="{{ row["type"].name }}">
        <div class=resource-thumbnail><img src="{{ row["thumbnail"].url}}"></div>
            <div class="resource-details">
              <h2>{{ row["resource-title"] }}</h2>
              <p><b>Resource:</b> {{ row["resource"].name }}</p>
              <p><b>Focus Area:</b></p>
              <ul class="tag">{% for tag in row["tags"] %}
                  <li>{{tag.name}}</li>
              </ul>
              
                {% endfor %}
            
              <p>{{ row["description"]}}</p>
              <div class="button"><a href="{{ row["listing_url"] }}">Details</a></div>
            </div>
    </div>            
</div>
</a>
  {% endfor %}
  {% endif %}

This worked perfectly but for some reason the first tag is in a unordered list and the others that follow are not within the <ul> but are just in <li> after

The html that I pulled from the compiled webpage is:

<ul class="tag">
                  <li>Client Success</li>
</ul>
                  <li>PRM</li>
                  <li>Partner Portals</li>
                  <li>Personalized Experience</li>

My question is how do I get all the tags to appear within the <ul> so that they follow each other horizontally?

Thanks

[AJLaPorte_diagr]

Your markup for the UL is close but its off a little. Change to this:

   <ul class="tag">
         {% for tag in row["tags"] %}
                  <li>{{tag.name}}</li>
         {% endfor %}
    </ul>

you want the for loop to be inside the <ul> tags.

With the way you have it now, you are closing the UL too soon.

[Woodsy]

Perfect, it worked a treat.

If I want to display 10 items per page with paging and next and previous arrows is there an example that you could share with me that would help me implement this fuctionality?

Thanks

[AJLaPorte_diagr]

Hi @Woodsy,

Sorry for the delay. Here is a sample of code that was shared on the HubSpot developer slack channel from Stefen Phelps (@stefenp😞

<!-- Pagination Logic -->
{% set per_page = 36 %}
{% set page_number = 1 %}
{% set total_pages = (table_rows|count / per_page)|round(0, 'ceil')|int %}
{% set offset_posts = request.query_dict.page * per_page %}
{% set queryparam = "&limit=" ~ per_page ~ "&offset=" ~ offset_posts|urlencode %}

{% set table = hubdb_table_rows(XXXXXX, queryparam) %}

<!-- Previous / Next Links -->
{% if request.query_dict.page %}
	{% set page_number = request.query_dict.page|int %}
{% endif %}
{% if page_number > 1 %}
	<a href="{{ request.path }}?page={{ page_number - 1 }}">Previous</a>
{% endif %}
{% if page_number < total_pages %}
   <a href="{{ request.path }}?page={{ page_number + 1 }}">Next</a>
{% endif %}

This is what I've used as a starter when doing pagination. If you are not apart of the developer slack channel, I highly suggest you join it. There are many of us on there who help with many issues that users run into. You can signup for the slack channel here:

https://join.slack.com/t/hubspotdev/shared_invite/enQtMzcyNDQzNDE0MDgzLTdiMjZhMTgwNGRiNDM1ZDk5NDE4OD...

[Woodsy]

Hi, I have got the following code but am unsure how to get the following to work.

Filter by one or both filters and search the whole of the database based.

I would like the listing before it is filtered to be ordered "&orderBy=resource-order" (which currently works) and only show ten items at a time.

I am very interested to see how this is coded but I don't have the knowledge at the minute to make this work.

<!-- set the filter by drop down -->

<div class="resource-filter-container">
<form id="form_id" method="get">
   
    <div class="resource-filters">
        <h4>FILTER BY RESOURCE: </h4>
        <select name="resource-type" form="form_id" onChange="this.form.submit()">
            <option value="show-all">Show All</option>
            
                {% set types = hubdb_table_column(848813, "resource-type").options %}
                {% for choice in types %}
                {% set type_list = type_list~choice.id|list%}
                {% if choice.id == request.query_dict.type%}
                <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
                {% else %}
                <option value="{{ choice.id }}">{{ choice.name }}</option>
                {% endif %}
                {% endfor %}
            
        </select>
    </div>
    
    <div class="resource-filters">
        <h4>FILTER BY AREA: </h4>
        <select name="area" form="form_id" onChange="this.form.submit()">
            <option value="show-all">Show All</option>
            
                {% set types = hubdb_table_column(848813, "area").options %}
                {% for choice in types %}
                {% set type_list = type_list~choice.id|list%}
                {% if choice.id == request.query_dict.type%}
                <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
                {% else %}
                <option value="{{ choice.id }}">{{ choice.name }}</option>
                {% endif %}
                {% endfor %}
            
        </select>
    </div>
    
    
    <div class="resource-search"  style="resource-filters">
        <h4>Search: </h4>
        <input name="resource" type="text" id="search-by" class="autocomplete" placeholder="Search our resources" style="">
        <input id="submit-button" type="submit" value="search" class="webinfinity-button" style="">
    </div>
</form>
</div>





        

{% set table = hubdb_table_rows(848813, "&orderBy=resource-order") %}

{% if table == [] %}
    <p class='align-center'>Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
{% else %}
  {% for row in table %}
  
 <a href="{{ row["listing_url"] }}"> 
<div id="resource-listing" >
    <div class="{{ row["type"].name }}">
        <div class=resource-thumbnail><img src="{{ row["thumbnail"].url}}"></div>
            <div class="resource-details">
              <h2>{{ row["resource-title"] }}</h2>
              <p><b>Resource:</b> {{ row["resource-type"].name }}</p>
              <p class="focus"><b>Focus Area:</b></p>
              <ul class="tag">
         {% for area in row["area"] %}
                  <li>{{area.name}}</li>
         {% endfor %}
    </ul>
            
              <p>{{ row["description"]}}</p>
              <div class="button"><a href="{{ row["listing_url"] }}">View Resource</a></div>
            </div>
    </div>            
</div>
</a>
  {% endfor %}
  {% endif %}

Thanks for any assistance.

I have added the following but am in need off assistance to get it all working together.

<!-- set the filter by drop down -->

<div class="resource-filter-container">
<form id="form_id" method="get">
   
    <div class="resource-filters">
        <h4>FILTER BY RESOURCE: </h4>
        <select name="resource-type" form="form_id" onChange="this.form.submit()">
            <option value="show-all">Show All</option>
            
                {% set types = hubdb_table_column(848813, "resource-type").options %}
                {% for choice in types %}
                {% set type_list = type_list~choice.id|list%}
                {% if choice.id == request.query_dict.resource-type%}
                <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
                {% else %}
                <option value="{{ choice.id }}">{{ choice.name }}</option>
                {% endif %}
                {% endfor %}
            
        </select>
    </div>
    
    <div class="resource-filters">
        <h4>FILTER BY AREA: </h4>
        <select name="area" form="form_id" onChange="this.form.submit()">
            <option value="show-all">Show All</option>
            
                {% set types = hubdb_table_column(848813, "area").options %}
                {% for choice in types %}
                {% set type_list = type_list~choice.id|list%}
                {% if choice.id == request.query_dict.area%}
                <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
                {% else %}
                <option value="{{ choice.id }}">{{ choice.name }}</option>
                {% endif %}
                {% endfor %}
            
        </select>
    </div>
    
<!--     
    <div class="resource-search"  style="resource-filters">
        <h4>Search: </h4>
        <input name="resource" type="text" id="search-by" class="autocomplete" placeholder="Search our resources" style="">
        <input id="submit-button" type="submit" value="search" class="webinfinity-button" style="">
    </div>
 -->

</form>
</div>

<!-- sets the different query parameters using submitted input for hubdb query -->

{% set queryparam = "&orderBy=resource-order" %}
{% if request.query_dict.resource-type in ["1", "2", "3", "4"] %}
{% set queryparam = queryparam ~ "&resource-type="~request.query_dict.resource-type|urlencode %}
{% endif %}
{% if request.query_dict.resource-type == "show-all" %}
{% set queryparam = queryparam %}
{% endif %}
{% if request.query_dict.area in ["1", "2", "3", "4"] %}
{% set queryparam = queryparam ~ "&area="~request.query_dict.area|urlencode %}
{% endif %}
{% if request.query_dict.area == "show-all" %}
{% set queryparam = queryparam %}
{% endif %}


{% set table = hubdb_table_rows(848813, queryparam) %}

{% if table == [] %}
    <p class='align-center'>Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
{% else %}
  {% for row in table %}
  
 <a href="{{ row["listing_url"] }}"> 
<div id="resource-listing" >
    <div class="{{ row["type"].name }}">
        <div class=resource-thumbnail><img src="{{ row["thumbnail"].url}}"></div>
            <div class="resource-details">
              <h2>{{ row["resource-title"] }}</h2>
              <p><b>Resource:</b> {{ row["resource-type"].name }}</p>
              <p class="focus"><b>Focus Area:</b></p>
              <ul class="tag">
         {% for area in row["area"] %}
                  <li>{{area.name}}</li>
         {% endfor %}
    </ul>
            
              <p>{{ row["description"]}}</p>
              <div class="button"><a href="{{ row["listing_url"] }}">View Resource</a></div>
            </div>
    </div>            
</div>
</a>
  {% endfor %}
  {% endif %}
  

[Woodsy]

Thanks, that worked perfectly. How would I create a filter dropdown that would filter by those tags?

Thanks