CMS Development

shiyon
Contributor

Remove duplicate entry from HubDB table

SOLVE

Hi developers,

 

I'm creating a page to list webinars from the past few years. So I created a table in HubDB with columns -Name, Date, Year, Description and Topic. There is a dropdown in the page which filters the content based on 'Topic'. I was able to implement the function manually using jQuery, HubL code and HubDB.

 

My requirement is to remove the duplicate entry from the dropdown list.

 

Please check my code below:

    <div class="filter-cat row">
        <div class="col col-md-4 col-xs-6">
            <select class="form-control cat1">
                <option value="cat-all">All Topics</option>
                {% for item in module.webinar_content %}
                <option value="cat-{{ item.ondemand_row.columns.topic.name }}">{{ item.ondemand_row.columns.topic.name }}</option>
                {% endfor %}
            </select>
      </div>
    </div>
    <div class="row filter-cat-results">
        <div id="webinar-wrap">
        {% for item in module.webinar_content %}
          <div class="f-cat {{ item.ondemand_row.columns.topic.name }}" data-cat="cat-{{ item.ondemand_row.columns.topic.name }}">
            {{ item.ondemand_row.columns.name }}<br>
            {{ item.ondemand_row.columns.date }}<br>
            {{ item.ondemand_row.columns.description }}<br>
            {{ item.ondemand_row.columns.topic.name }}<br>            
        </div>
        {% endfor %}
        </div>
    </div>

 

Can you please help? Thanks in advance.

0 Upvotes
4 Accepted solutions
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Remove duplicate entry from HubDB table

SOLVE

Aand I'm still half asleep cause I forgot you need to access the options. So instead of looping through just 'column' you need to loop through 'column.options'.

 

<select class="form-control cat1">
  <option value="cat-all">All Topics</option>
  {% set column = hubdb_table_column(5620116, "topic") %}
  {% for topic in column.options %}
    <option value="cat-{{ topic.name }}">{{ topic.label }}</option>
  {% endfor %}
</select>

 

 

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

View solution in original post

amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Remove duplicate entry from HubDB table

SOLVE

It's inside the repeating group so you should be the using the name you defined in the for loop "item".

{{ item.cta }}

 

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

View solution in original post

amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Remove duplicate entry from HubDB table

SOLVE

The data returned for the column itself would be the same so you're category dropdown code wouldn't change.

 

For the item for loop where you're outputting the item's categories there's a couple different ways for outputting them:

 

1. For where you're just listing them in the div you can use map to get the name attribute and join to output the array as a string (setting it to join with a <br> will put a <br> between each item).

2. You could just do the same as above but add |lower at the end to make them lowercase (as would be conventional for class names), but in case you have spaces in any of your category names you would want to replace those spaces with a dash which we would need to loop through the categories to do.

 

{% for item in module.webinar_content %}
  // create an empty array to push the modified names to
  {% set category_classes = [] %}

  // loop through your categories mapped to 'name'
  {% for category in item.ondemand_row.columns.topic|map("name") %}
    // append the modified (lowercase and replace spaces with dash) category to the array
    {% do category_classes.append(category|lower|replace(' ','-')) %}
  {% endfor %}

  // join the array with a space to add to your class list
  <div class="f-cat {{ category_classes|join(' ') }}">
    // the visible list can be mapped and joined directly without a loop
    {{ item.ondemand_row.columns.topic|map('name')|join('<br>') }}
    {{ item.ondemand_row.columns.name }}<br>
    {{ item.ondemand_row.columns.date }}, {{ item.ondemand_row.columns.year.name }}<br>

    <img src="{{ item.ondemand_row.columns.image.url }}" alt="{{ item.ondemand_row.columns.name }}" width="200"><br>

    {{ item.ondemand_row.columns.description }}<br><br>

    <a href="{{ item.ondemand_row.columns.url }}">{{ module.cta }}</a>
  </div>
{% endfor %} 

 

Not sure what you're using the data-cat attributes for so I've left those out but you should be able to use the above as a reference for any other usage of the column.

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

View solution in original post

amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Remove duplicate entry from HubDB table

SOLVE

You would have to use a for loop to add content around an item.

 

{% for category in item.ondemand_row.columns.topic|map("name") %}
   <span>{{ category }}</span>
{% endfor %}

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

View solution in original post

13 Replies 13
shiyon
Contributor

Remove duplicate entry from HubDB table

SOLVE

Hi @amwilie 

 

The previous solution also worked. Now one more question.

 

In the 1st requirement, if we changed the <select> dropdown to multi-select, can you please show how to update the code?

 

Thanks

0 Upvotes
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Remove duplicate entry from HubDB table

SOLVE

The data returned for the column itself would be the same so you're category dropdown code wouldn't change.

 

For the item for loop where you're outputting the item's categories there's a couple different ways for outputting them:

 

1. For where you're just listing them in the div you can use map to get the name attribute and join to output the array as a string (setting it to join with a <br> will put a <br> between each item).

2. You could just do the same as above but add |lower at the end to make them lowercase (as would be conventional for class names), but in case you have spaces in any of your category names you would want to replace those spaces with a dash which we would need to loop through the categories to do.

 

{% for item in module.webinar_content %}
  // create an empty array to push the modified names to
  {% set category_classes = [] %}

  // loop through your categories mapped to 'name'
  {% for category in item.ondemand_row.columns.topic|map("name") %}
    // append the modified (lowercase and replace spaces with dash) category to the array
    {% do category_classes.append(category|lower|replace(' ','-')) %}
  {% endfor %}

  // join the array with a space to add to your class list
  <div class="f-cat {{ category_classes|join(' ') }}">
    // the visible list can be mapped and joined directly without a loop
    {{ item.ondemand_row.columns.topic|map('name')|join('<br>') }}
    {{ item.ondemand_row.columns.name }}<br>
    {{ item.ondemand_row.columns.date }}, {{ item.ondemand_row.columns.year.name }}<br>

    <img src="{{ item.ondemand_row.columns.image.url }}" alt="{{ item.ondemand_row.columns.name }}" width="200"><br>

    {{ item.ondemand_row.columns.description }}<br><br>

    <a href="{{ item.ondemand_row.columns.url }}">{{ module.cta }}</a>
  </div>
{% endfor %} 

 

Not sure what you're using the data-cat attributes for so I've left those out but you should be able to use the above as a reference for any other usage of the column.

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

shiyon
Contributor

Remove duplicate entry from HubDB table

SOLVE

Thank you @amwilie .

 

Is there any way to separate displayed topics using <span>s?

 

Thanks

0 Upvotes
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Remove duplicate entry from HubDB table

SOLVE

You would have to use a for loop to add content around an item.

 

{% for category in item.ondemand_row.columns.topic|map("name") %}
   <span>{{ category }}</span>
{% endfor %}

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

shiyon
Contributor

Remove duplicate entry from HubDB table

SOLVE

Thank you once again @amwilie.. The above solution also worked very well!

0 Upvotes
shiyon
Contributor

Remove duplicate entry from HubDB table

SOLVE

Hi @amwilie,

 

One more question related to this.

I've added an additional choice element to the group but not inside the DB. Please check the screenshot.

But when I call it by it's name, it doesn't appear in the preview. Can you please check the below also?

 

        {% for item in module.webinar_content %}
        <div class="f-cat {{ item.ondemand_row.columns.topic.name }}" data-cat="cat-{{ item.ondemand_row.columns.topic.name }}" data-cat2="cat-{{ item.ondemand_row.columns.year.name }}">
            {{ item.ondemand_row.columns.topic.name }}<br>
            {{ item.ondemand_row.columns.name }}<br>
            {{ item.ondemand_row.columns.date }}, {{ item.ondemand_row.columns.year.name }}<br>
            <img src="{{ item.ondemand_row.columns.image.url }}" alt="{{ item.ondemand_row.columns.name }}" width="200"><br>
            {{ item.ondemand_row.columns.description }}<br><br>
            <a href="{{ item.ondemand_row.columns.url }}">{{ module.cta }}</a>
        </div>
        {% endfor %}  

 

new-cta.png

 

 

0 Upvotes
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Remove duplicate entry from HubDB table

SOLVE

It's inside the repeating group so you should be the using the name you defined in the for loop "item".

{{ item.cta }}

 

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

APrigent
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Remove duplicate entry from HubDB table

SOLVE

Hello @shiyon ! 

I am not a developer but I tag my colleague who may be able to help! @MBERARD 

amwilie
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Remove duplicate entry from HubDB table

SOLVE

Is module.webinar_content referring to the entire table? For the dropdown if you're wanting to list the available topics in a column it'd make most sense to loop through just the column options itself instead of the rows using hubdb_table_column.

{% set column = hubdb_table_column(<tableId or name>, <columnId or column name>) %}
{% for topic in column %}
 <option></option>
{% endfor %}

 

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

shiyon
Contributor

Remove duplicate entry from HubDB table

SOLVE

Thank you @amwilie for the quick reply.

 

Let me add more details.

1) module.webinar_content  is a group in the custom module inside which the table is called.

2) Name and ID of the table are ondemand_2023 and 5620116 respectively.

3) Name of the column is 'Topic'.

 

I copy-pasted the above code and replaced it with those values as shown below. But I couldn't see the list.

            <select class="form-control cat1">
            {% set column = hubdb_table_column(5620116, topic) %}
            {% for topic in column %}
             <option></option>
            {% endfor %}
          </select>

 

When I put topic inside single quotes, a blank <option> appeared. Is there any further change needed inside the code?

 

Thank you

0 Upvotes
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Remove duplicate entry from HubDB table

SOLVE

Aand I'm still half asleep cause I forgot you need to access the options. So instead of looping through just 'column' you need to loop through 'column.options'.

 

<select class="form-control cat1">
  <option value="cat-all">All Topics</option>
  {% set column = hubdb_table_column(5620116, "topic") %}
  {% for topic in column.options %}
    <option value="cat-{{ topic.name }}">{{ topic.label }}</option>
  {% endfor %}
</select>

 

 

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

shiyon
Contributor

Remove duplicate entry from HubDB table

SOLVE

Thank you @amwilie for the solution. This was the answer I needed.

The mistake I did was that I used text field to add topics instead of select box.

0 Upvotes
amwilie
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Remove duplicate entry from HubDB table

SOLVE

It's blank because in the code there's nothing being outputted into the option. I was only giving an example of what you should be looping through so didn't provide the entirety of the code, since inside the option you'd basically be accessing the same data as before just more directly. (Also, if you're using the name of the column instead of the ID you need to put it in quotes)

 

<select class="form-control cat1">
  {% set column = hubdb_table_column(5620116, "topic") %}
  {% for topic in column %}
    <option value="cat-{{ topic.name }}">{{ topic.label }}</option>
  {% endfor %}
</select>

 

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.