Adding HTML into a HubDB Table

SOLVE
Woodsy
Top Contributor

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

 

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

 

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?

 

0 Upvotes
1 Accepted solution

Accepted Solutions
amwilie
Solution
Key Advisor | Elite Partner

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.

https://designers.hubspot.com/tutorials/how-to-join-hubdb-tables

border

Alyssa Wilie

Web Developer at LyntonWeb

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

View solution in original post

0 Upvotes
5 Replies 5
sharonlicari
Community Manager

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 @amwilie @Kevin-C @daveroma  could you please share your knowledge with @Woodsy?  

 

Thank you & Happy Friday

Sharon


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


daveroma
Contributor | Platinum Partner

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

 

Woodsy
Top Contributor

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>
  2. Removing the # has no effect.
  3. Changing to single quotes had no effect.
0 Upvotes
amwilie
Solution
Key Advisor | Elite Partner

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.

https://designers.hubspot.com/tutorials/how-to-join-hubdb-tables

border

Alyssa Wilie

Web Developer at LyntonWeb

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

View solution in original post

0 Upvotes
Woodsy
Top Contributor

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 %}
0 Upvotes