Adding HTML into a HubDB Table

Developer Support CMS Development
1

I am try to add html into a hubdb table and was hoping that there is a better way other than using a text column. Also I want to call some data from another hubdb tables that is called through the master Hubdb table.

screen1.jpg
screen1.jpg648×438 30.1 KB

I have used the following code which works for the ‘solution’ column:

{% set row = hubdb_table_row(2390326, 25809260272) %}
<a href="/solutions#{{ row["solution_id"] }}">
	<div class="solutions">
		<img src="{{ row["screenshot"].url}}">
	</div>
	<p>{{ row["solution"] }} <br> {{ row["solution_subtitle"] }}</p>
<a>

If I add the following code into the ‘expert’ column it doesn’t show.

{% set row = hubdb_table_row(2594523, 25818885573) %}
<a href="/experts#{{ row["expert_id"] }}">
	<div class="profile">
		<img src="{{ row["profile"].url}}">
	</div>
	<p>{{ row["name"] }} <br> {{ row["job_title"] }}</p>
<a>

screen02.jpg
screen02.jpg1170×384 93.6 KB

If I remove the content from the solution cell then the expert code works.

It looks like currently I can only include one snippet into the master hubdb using the above techneque. Do I need to add or change anything to make both items run togther?

2

Hi @Woodsy

thank you for the information provided, this will help the experts. I will tag so they will be able to advise you.

Hey @alyssamwilie @Kevin-C @daveroma could you please share your knowledge with @Woodsy?

Thank you & Happy Friday

Sharon

3

Hi @Woodsy @sharonlicari

Few things come to mind as I put my debugging hat on:

1. Let’s test your hyposthesis of only being able to include one script by continuing to make both calls but instead this time, put the code block for experts above the block for solutions in the markup and see if now only experts shows.

2. I wonder if the “#” is making HUBL think it’s an Inline Statement - see Jinja Docs

3. I wonder if it has to do with the fact that you’re using “double quotes “inside” double quotes”

Also, can you provide a screenshot of the markup for the block that’s rendering as it appears in the dev console?

--

David Roma | Drive Agency

4

Thank you for replying. I have tested your suggestions to see if they were causing the render issue.

  1. Whichever script is first is displayed. The second block doesn’t appear. I have viewed the code in. This is the code when there are two blocks being called. The block for Experts shows but the block under resources doesn’t.
<a class="anchor" id="effective-channel-strategies"></a>
 <div onclick="show(this)" class="leadership-container">
 <div class="leadership-listing"> 

 <div class="leadership-content active">

 <div class="">
 <div style="display: none;" class="logo">
 <img src="https://cdn2.hubspot.net/hubfs/7119519/logos/Webinfinity.svg">
 </div>
 <div class="intro">
 <h2>Crafting Effective Channel Strategies</h2>
 <h3></h3>
 <p></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id diam eu dui auctor tincidunt eu vitae diam. Nunc non arcu non justo sodales dignissim sed commodo sapien. Donec et nibh sed mauris egestas maximus ac vel libero.</p><p></p>
 </div> 
 </div> 
 </div>

 <div class="show-details" id="effective-channel-strategiesDetails" style="display: block;">
 <hr>
 <div class="details">
 <div class="details-content">
 <h3>Highlights</h3>
 <p></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id diam eu dui auctor tincidunt eu vitae diam. Nunc non arcu non justo sodales dignissim sed commodo sapien. Donec et nibh sed mauris egestas maximus ac vel libero.</p><p></p>
 <h3>Webinars and Events</h3>
 <p></p>
 </div>

 <div class="experts">
 <h3>Marketplace Experts</h3>
 <div> <a href="/experts#james-hodgkinson"> 	<div class="profile"> 		<img src="https://cdn2.hubspot.net/hubfs/7119519/profiles/James-Hodgkinson.png"> 	</div> 	<p>James Hodgkinson <br><!-- LEADERSHIP PANELS --> Founder and CEO, Webinfinity</p> </a><a></a></div><a>
 </a></div><a> 
 </a></div><a>

 <h3>Key Resources</h3> 
 <div class="row-fluid " style="background-color: #f1f1f2">
 <div></div>
 </div>

 </a></div><a> 

 </a></div><a> 
 </a></div><a>

When I remove the first block under Experts the second block under resources is displayed only.

<div onclick="show(this)" class="leadership-container">
 <div class="leadership-listing"> 

 <div class="leadership-content active">

 <div class="">
 <div style="display: none;" class="logo">
 <img src="https://cdn2.hubspot.net/hubfs/7119519/logos/Webinfinity.svg">
 </div>
 <div class="intro">
 <h2>Crafting Effective Channel Strategies</h2>
 <h3></h3>
 <p></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id diam eu dui auctor tincidunt eu vitae diam. Nunc non arcu non justo sodales dignissim sed commodo sapien. Donec et nibh sed mauris egestas maximus ac vel libero.</p><p></p>
 </div> 
 </div> 
 </div>

 <div class="show-details" id="effective-channel-strategiesDetails" style="display: block;">
 <hr>
 <div class="details">
 <div class="details-content">
 <h3>Highlights</h3>
 <p></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id diam eu dui auctor tincidunt eu vitae diam. Nunc non arcu non justo sodales dignissim sed commodo sapien. Donec et nibh sed mauris egestas maximus ac vel libero.</p><p></p>
 <h3>Webinars and Events</h3>
 <p></p>
 </div>

 <div class="experts">
 <h3>Marketplace Experts</h3>
 <div></div>
 </div> 
 </div>

 <h3>Key Resources</h3> 
 <div class="row-fluid " style="background-color: #f1f1f2">
 <div> <a href="/experts#james-hodgkinson"> 	<div class="profile"> 		<img src="https://cdn2.hubspot.net/hubfs/7119519/profiles/James-Hodgkinson.png"> 	</div> 	<p>James Hodgkinson <br> Founder and CEO, Webinfinity</p> </a><a></a></div><a>
 </a></div><a>

 </a></div><a> 

 </a></div><a> 
 </a></div>
  1. Removing the # has no effect.
  2. Changing to single quotes had no effect.
5

Hey @Woodsy ,
If your’re essentially trying to use information from another table in your main table’s output it would probably be easier to use a Foreign ID column instead of putting HubL into a text column.

6

Thank you for your reply. Could you explain how I would change my current code to replace the {{ row[“experts”] }} with a foreign ID that calls 2 or 3 cells from another HubDB?

	<!-- LEADERSHIP PANELS -->

 {% set table = hubdb_table_rows(2594951, 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 class="anchor" id="{{ row["leadership_id"] }}"></a>
 <div onclick="show(this)" class="leadership-container">
 <div class="leadership-listing" > 

 <div class="leadership-content">

 <div class="{{ row["type"].name }}">
 <div style="display: none;" class="logo">
 <img src="{{ row["logo"].url}}">
 </div>
 <div class="intro">
 <h2>{{ row["leadership_title"] }}</h2>
 <h3>{{ row["title"] }}</h3>
 <p>{{ row["overview"] }}</p>
 </div> 
 </div> 
 </div>

 <div class="show-details" id="{{ row["leadership_id"] }}Details">
 <hr>
 <div class="details">
 <div class="details-content">
 <h3>Highlights</h3>
 <p>{{ row["highlights"] }}</p>
 <h3>Webinars and Events</h3>
 <p>{{ row["webinar_events"] }}</p>
 </div>

 <div class="experts">
 <h3>Marketplace Experts</h3>
 <div>{{ row["experts"] }}</div>
 </div> 
 </div>

 <h3>Key Resources</h3> 
 <div class="row-fluid " style="background-color: #f1f1f2">
 <div>{{ row["resources"] }}</div>
 </div>

 </div> 

 </div> 
 </div>

 {% endfor %}
 {% endif %}