Need help debugging custom module

[LVerner]

I am creating a custom module combining two custom modules into one. I have an accordion module and I am trying to nest a module inside of it that can allow users to create an HTML table for displaying textual data (spec sheets, etc). I was able to get the table generator to work in a separate module, but when I pasted it into the nested group, it will show the paramters a user can select on the left, but won't display the HTML table it generates. I am stuck thinking it's the {% if item2.enable_data_table %} - can this item2 be used in multiple places? Should it be put in a string like the div class="content-block... etc"?

Please be gentle as I am relatively new to hubspot CMS and am pretty much self taught with this stuff so I don't really have a background in python, just HTML/CSS/some javascript.

{% if module.enable_module %}
<div class="accordion_module_wrapper paddingt{{ module.settings.desktop_top_padding }} paddingb{{ module.settings.desktop_bottom_padding }} mobile_paddingt{{ module.settings.mobile_top_padding }} mobile_paddingb{{ module.settings.mobile_bottom_padding }}">
  <div class="page-center">
    <div class="accordion">
      {% for item in module.accordion_group %}
      <div class="accordion_group {% if  item.expanded %}expanded{% endif %}">
        <div class="accordion_header">
          <h3>{{ item.title }}</h3>
        </div>
        <div class="accordion_content">
          {% for item2 in item.repeater_content_row %}
          <div class="content_block {% if item2.enable_right_column %}enable_two_columns{% else %}enable_single_column{% endif %}">
            <div class="left_column_content">
              {{ item2.left_column_content }}
             {% if item2.enable_data_table %}
                   <div class="enable_data_table">
                    <div class="{{name}}">
                    <section class="section_table">
                      {% if module.on_off %}
                      <h1 class="title_h">{{ module.title_setting.heading }}</h1>
                      {% endif %}

                      <div class="tbl-header">
                        <table cellpadding="0" cellspacing="0" border="0" style="background-color: #fff;">
                          <thead style="width: 40%; background: #ffffff; vertical-align: middle; font-weight: 800;">
                            <tr>
                              {% set count = 1 %}
                              {% for item in module.table_repeater %}
                              <th>{{ item.table_title.heading }}</th>
                              {% endfor %}
                              {% set count = count + 1 %}
                            </tr>
                          </thead>
                        </table>
                      </div>
                      <div class="tbl-content">
                        <table cellpadding="0" cellspacing="0" border="0">    
                          <tbody>
                            {% for item in module.table_repeater %}

                            <tr class="{% cycle 'odd','even' %}">
                              {% for item2 in item.column_content_repeater %}
                              <td>{{ item2.table_column }}</td>
                              {% endfor %}
                            </tr>

                            {% endfor %}
                          </tbody>
                        </table>
                      </div>
                    </section>
                  </div>
              {% endif %}
            </div>
            </div>
            {% if item2.enable_right_column %}
            <div class="right_column-content">
              {{ item2.right_column_content }}
            </div>
            
            {% endif %}
          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
<!--</div>-->
{% endif %}

{# =============== CSS Styling =============== #}
{% require_css %}
<style>
  @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);

  {% if module.odd_even %}
  .{{name}} tr.even{ font-weight: 500;}
  .{{name}} tr.odd{ background-color: none;}
  {% endif %}



  .{{name}} section.section_table{
    padding: {{ module.table_setting.style.padding_top_bottom }}px;
    background-color: none;
    border-radius: 0em;
    -webkit-border-radius: 0em;
    -ms-border-radius: 0em;

  }
  .{{name}} section.section_table h1.title_h{
    font-size: font-size: 1.2em;
    text-align: left;
    color:#333 !important;
    box-sizing: border-box;
    font-weight: 500;
 
  }
  .{{name}} section.section_table table{
    width:100%;
    table-layout: fixed;
    border-collapse: collapse;
    overflow: hidden;
    margin-bottom: 0px;
  }
  .{{name}} section.section_table .tbl-header{
    background-color: none;
    border: none;
    font-weight: 500;
    font-size: 1.2em;
    margin-bottom: 0px;
  }
  .{{name}} section.section_table .tbl-content{
    {% if module.table_setting.style.table_scroll %}
    height:500px;
    {% endif %}
    overflow-x:auto;
    margin-top: 0px;
    border: none;
    border-bottom-left-radius:{{ module.table_setting.style.table_radius }}px;
    border-bottom-right-radius: {{ module.table_setting.style.table_radius }}px;
    -webkit-border-bottom-left-radius: {{ module.table_setting.style.table_radius }}px;
    -webkit-border-bottom-right-radius: {{ module.table_setting.style.table_radius }}px;
    -ms-border-bottom-left-radius: {{ module.table_setting.style.table_radius }}px;
    -ms-border-bottom-right-radius: {{ module.table_setting.style.table_radius }}px;
  }
  .{{name}} section.section_table th{
    text-align: left;
    text-transform: uppercase;
    background: none;
    color: #333;
    border-bottom: 3px solid #9a9a9a;
  }

  .{{name}} section.section_table tr{
    min-height: 32px;
    max-height: 2em;
    border-right: 1px solid #333;
  }

  .{{name}} section.section_table td{
    text-align: left;
    vertical-align:middle;
    font-size: 1.2em;
    color: #333;
    border-bottom: 1px solid #eee; 
    height: 2em;
    min-height: 32px;
  }
  
   .{{name}} td:nth-child(2n+1) {
    background-color: none;
     font-size: 1.2em;
     font-weight: 500!important;
     width: 40%;
}
     .{{name}} td:nth-child(2n+1) p {
     font-size: 1.2em;
     font-weight: 500!important;
}
  
  /* for custom scrollbar for webkit browser*/
  ::-webkit-scrollbar {
    width: 6px;
  } 
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  } 
  ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  }
</style>
{% end_require_css %}

[LVerner]

So I wanted to make an update to this: I did a little studying and I also worked with another developer and it seems like the 'item2 item3' order needed to be rearranged. I'm attaching the final code where I got the code working.

However, now I have a new issue: The table repeater is nested inside of an accordion module. When 'enable data table' boolean is set to 'true', the accordion section that the table is inside of suddenly becomes a) not an accordion dropdown anymore, b) background of light grey, and c) suddenly left justified. It's very strange. Why would the data table affect items that are in the code above it?

See code below:

{% if module.enable_module %}
<div class="accordion_module_wrapper paddingt{{ module.settings.desktop_top_padding }} paddingb{{ module.settings.desktop_bottom_padding }} mobile_paddingt{{ module.settings.mobile_top_padding }} mobile_paddingb{{ module.settings.mobile_bottom_padding }}">
  <div class="page-center">
    <div class="accordion">
      {% for item in module.accordion_group %}
      <div class="accordion_group {% if  item.expanded %}expanded{% endif %}">
        <div class="accordion_header">
          <h3>{{ item.title }}</h3>
        </div>
        <div class="accordion_content">
          {% for item2 in item.repeater_content_row %}

          <div class="content_block {% if item2.enable_right_column %}enable_two_columns{% else %}enable_single_column{% endif %}">
            <div class="left_column_content">
              {{ item2.left_column_content }}
              
             {% if item2.enable_data_table %}
                   <div class="enable_data_table">
                    <div class="{{name}}">
                    <section class="section_table">
                     {#-- {% if module.on_off %} 
                     <h1 class="title_h">{{ module.title_setting.heading }}</h1>
                 {#!--     {% endif %} --#}
                    {% set count = 1 %}
                     {% for item3 in item2.table_repeater %}
                      <div class="tbl-header">
                        <table cellpadding="0" cellspacing="0" border="0" style="background-color: #fff;">
                          <thead style="width: 40%; background: #ffffff; vertical-align: middle;">
                            <tr>
                    
                              <th>{{ item3.table_title.heading }}</th>
                           </tr>
                          </thead>
                        </table>
                      </div>
                      
                      <div class="tbl-content">
                        <table cellpadding="0" cellspacing="0" border="0">    
                          <tbody>
                            {% for item3 in item2.table_repeater %}

                            <tr>
                              {% for item4 in item3.column_content_repeater %}
                              <td>{{ item4.table_column }}</td>
                              {% endfor %}
                            </tr>

                            {% endfor %}
                          </tbody>
                        </table>
                      </div>
                       {% endfor %}
                       {% set count = count + 1 %}
                    </section>
                  </div>
              {% endif %}
            </div>
            </div>
            {% if item2.enable_right_column %}
            <div class="right_column-content">
              {{ item2.right_column_content }}
            </div>
            
            {% endif %}
          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
<!--</div>-->
{% endif %}

{# =============== CSS Styling =============== #}
{% require_css %}
<style>
  @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);

 {# {% if module.odd_even %}
  .{{name}} tr.even{ font-weight: normal;}
  .{{name}} tr.odd{ background-color: none;}
  {% endif %}
  #}

  .{{name}} section.section_table{
    background-color: none;
    border-radius: 0em;
    -webkit-border-radius: 0em;
    -ms-border-radius: 0em;

  }
  .{{name}} section.section_table h1.title_h{
    font-size: inherit;
    text-align: left;
    color:#333 !important;
    box-sizing: border-box;
 
  }
  .{{name}} section.section_table table{
    width:100%;
    table-layout: fixed;
    border-collapse: collapse;
    overflow: hidden;
    margin-bottom: 0px;
  }
  .{{name}} section.section_table .tbl-header{
    background-color: none;
    border: none;
    margin-bottom: 0px;
  }
  .{{name}} section.section_table .tbl-content{
    {% if module.table_setting.style.table_scroll %}
    height:500px;
    {% endif %}
    overflow-x:auto;
    margin-top: 0px;
    border: none;

  }
  .{{name}} section.section_table th{
    text-align: left;
    background: none;
  }

  .{{name}} section.section_table tr{
    border-right: 1px solid #333;
  }

  .{{name}} section.section_table td{
    text-align: left;
    vertical-align:middle;
  }
  
   .{{name}} td:nth-child(2n+1) {
     background-color: none;
     font-size: inherit;
     width: 40%;
     line-height: 1;
}
     .{{name}} td:nth-child(2n+1) p {
       height: auto;
       font-size: inherit;
       margin: 0;
       margin-bottom: 0;
       line-height: 1;
}
  
  .{{name}} table tbody tr td {
    padding: 1px;
    line-height: 1;
}
  
  
  /* for custom scrollbar for webkit browser*/
  ::-webkit-scrollbar {
    width: 6px;
  } 
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  } 
  ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  }
</style>
{% end_require_css %}

[LVerner · Accepted solution]

Turns out I had a div tag on the wrong line - I moved it above an 'endif' and it's working now.

[alyssamwilie]

@LVerner Since table_repeater is inside of the repeater_content group you'll want to change this piece of code :

{% for item in module.table_repeater %}
  <tr class="{% cycle 'odd','even' %}">
   {% for item2 in item.column_content_repeater %}
     <td>{{ item2.table_column }}</td>
   {% endfor %}
  </tr>
{% endfor %}

to reference the repeater_content loop, by changing module.table_repeater to item2.table_repeater.

{% for row in item2.table_repeater %}
  <tr class="{% cycle 'odd','even' %}">
   {% for cell in table_row.column_content_repeater %}
     <td>{{ cell.table_column }}</td>
   {% endfor %}
  </tr>
{% endfor %}

It's also helpful when writing multiple loops to use a variable name that reflects what the items are. (ex: content, repeater, row, cell) instead of using 'item', 'item2', and so forth. It makes it easier to tell what fields you're referencing.

[LVerner]

Thank you for your help! Do you just label those variables in the markup or is there  a specific place on the right column to change them? I did name the groups and items I created. Part of this code was also taken from another module I did not create so I was just going with what was already in there - was afraid if I renamed something it would break it somewhere else.

[alyssamwilie]

Variables are of your own making so you can name them however you please within the markup.

[natsumimori]

Thank you for your help @Teun !

@LVerner your content was accidentally marked as spam, so I have un-quarantined it for you. It's now live in the above ^^^
(Sometimes our system detects a content as spam when there are many codes in the reply, sorry for the incenvenience!)

[Teun]

Hi @LVerner , could you send a screenshot maybe? Even if it is just from the fields from the Design Tools, it might help.

[LVerner]

Sure, including a screenshot here. The JSON apparently did post, above, as well, after being cleared from spam.

[Teun]

So does that mean you managed to fix it?
When you click on the little dots in the reply field, you should see a code option. If you paste your JSON there, it should stay in the reply.

[LVerner]

No, it's not fixed. And yeah, I did that.  Won't let me reply with all of it. Don't know why.

Honestly I think I'm just over my head here...

[Teun]

@natsumimori Sure!

@LVerner Could you start by checking the output of the fields you use in the if statements? The quickest way is to use the filter |pprint
It will show you the output of the field, so you can check if your if statements are setup correctly.

So in your case, add the following in your for loop:

Item2 enable data: {{item2.enable_data_table|pprint}}

Did you use local development to create this module? If so, are you willing to share your fields.json?
If you used the Design tools to create the module, you should see a 'Copy JSON' option to the left of the 'Add field' button. Could you share the JSON that way?

[LVerner]

Hi, I'm trying to reply but it seems to be deleting the JSON fragment when I post.

I added the snippet in right after the 'for' statement, like so:

         {% for item2 in item.repeater_content_row %}
         {{item2.enable_data_table|pprint}}

When I preview the module, the text '(Boolean: {}) ' is now displayed in that area. After that I looked at my field group and noticed that there was another boolean field outside of the main group called 'expanded'.

[LVerner]

Thank you so much for helping! I pasted the statement in that you asked and got "(Boolean: {}) " when I preview the page - Is there a specific place it needs to be pasted? I put it right after the 'for' statement like so:

{% for item2 in item.repeater_content_row %}

{{item2.enable_data_table|pprint}}

Here's the JSON snippet - hope this is what you need:

[{"default":true,"display":"checkbox","id":"5be095a7-b209-cb70-559b-a3886490f4b0","label":"Enable Module","locked":false,"name":"enable_module","required":false,"type":"boolean"},{"children":[{"allow_new_line":false,"default":"Features","id":"394ae6d1-9728-d2d3-cd5b-7a92347a8e4d","label":"Title","locked":false,"name":"title","required":false,"show_emoji_picker":false,"type":"text","validation_regex":""},{"children":[{"default":"<h5>Left Column Content</h5>\n<p>Insert content here</p>","id":"fc81745e-f945-96b7-9f3f-5ed9f91cd178","label":"Left Column Content","locked":false,"name":"left_column_content","required":false,"type":"richtext"},{"default":true,"display":"checkbox","id":"3cef579b-9046-0275-b8c6-f82f25346238","label":"Enable Right Column","locked":false,"name":"enable_right_column","required":false,"type":"boolean"},{"default":"<h5>Right Column Content</h5>\nInsert content here","id":"52c99f40-3847-a2f7-e613-013e7112de60","label":"Right Column Content","locked":false,"name":"right_column_content","required":false,"type":"richtext","visibility":{"controlling_field":"3cef579b-9046-0275-b8c6-f82f25346238","controlling_value_regex":"true","operator":"EQUAL"}},{"default":false,"display":"checkbox","id":"2ef48e70-0e3d-5c1a-b961-aefaefb8b259","label":"Enable Data Table","locked":false,"name":"enable_data_table","required":false,"type":"boolean"},{"children":[{"children":[{"allow_new_line":false,"default":"Row","id":"36be4b61-0146-f65a-75e2-5f3ed14718e4","label":"Heading","locked":false,"name":"heading","required":false,"show_emoji_picker":false,"type":"text","validation_regex":""}],"default":{"heading":"Row"},"expanded":false,"id":"52b2b643-ee74-628f-1b21-57b4b1cbe18f","label":"Table Title","locked":false,"name":"table_title","required":false,"tab":"CONTENT","type":"group"},{"children":[{"default":"<p>Add a new column here</p>","id":"bc49d2c4-f6f5-db68-0b7a-7000da3d613e","inline_help_text":"This will create a new column ","label":"Column","locked":false,"name":"table_column","required":false,"type":"richtext"}],"default":[{"table_column":"<p>Add a new column here</p>"}],"expanded":false,"id":"91a777ec-c9a2-3cac-e867-73c32da62d79","inline_help_text":"Must add one item for each column. So if you have 2 columns, you have to add 2 items to this row.","label":"Add Columns to Rows","locked":false,"name":"column_content_repeater","occurrence":{"default":1},"required":false,"tab":"CONTENT","type":"group"}],"default":[{"table_title":{"heading":"Row"},"column_content_repeater":[{"table_column":"<p>Add a new column here</p>"}]}],"expanded":false,"id":"4c688743-2a79-61ad-694c-0ba2485d6f19","inline_help_text":"Adding header columns is necessary to make rows underneath. ","label":"Add Columns in Title","locked":false,"name":"table_repeater","occurrence":{"default":1},"required":false,"tab":"CONTENT","type":"group"}],"default":[{"left_column_content":"<h5>Left Column Content</h5>\n<p>Insert content here</p>","enable_right_column":true,"right_column_content":"<h5>Right Column Content</h5>\nInsert content here","enable_data_table":false,"table_repeater":[{"responsive_data_table_text":"Add table title here.","table_title":{"heading":"Row"},"column_content_repeater":[{"table_column":"<p>Add a new column here</p>"}]}]}],"expanded":false,"id":"c0fb165f-fd46-ce69-35e5-2c0db319b8a8","label":"Repeater Content Row","locked":false,"name":"repeater_content_row","occurrence":{"default":1},"required":false,"tab":"CONTENT","type":"group"},{"default":false,"display":"checkbox","id":"24033a69-953b-0bb2-1e07-79e2f245cf0d","label":"Expanded","locked":false,"name":"expanded","required":false,"type":"boolean"}],"default":[{"title":"Features","repeater_content_row":[{"left_column_content":"<h5>Left Column Content</h5>\n<p>Insert content here</p>","enable_right_column":true,"right_column_content":"<h5>Right Column Content</h5>\nInsert content here","enable_data_table":false,"table_repeater":[{"responsive_data_table_text":"Add table title here.","table_title":{"heading":"Row"},"column_content_repeater":[{"table_column":"<p>Add a new column here</p>"}]}]}],"expanded":false}],"expanded":false,"id":"f5df3fe1-8e51-800d-f822-df1822d9c427","label":"Accordion Group","locked":false,"name":"accordion_group","occurrence":{"default":1,"sorting_label_field":"394ae6d1-9728-d2d3-cd5b-7a92347a8e4d"},"required":false,"tab":"CONTENT","type":"group"},{"children":[{"default":50,"display":"slider","id":"49f221cf-7450-518c-1fff-931516a6b923","label":"Desktop Top Padding","locked":false,"max":200,"min":0,"name":"desktop_top_padding","required":false,"step":10,"type":"number"},{"default":50,"display":"slider","id":"08dd9e6e-d9f0-18f4-ee6b-01d83f446b25","label":"Desktop Bottom Padding","locked":false,"max":200,"min":0,"name":"desktop_bottom_padding","required":false,"step":10,"type":"number"},{"default":50,"display":"slider","id":"9fd46656-8633-8491-452a-6fab7e4967be","label":"Mobile Top Padding","locked":false,"max":200,"min":0,"name":"mobile_top_padding","required":false,"step":10,"type":"number"},{"default":50,"display":"slider","id":"e97651bb-4384-76e0-5772-56700ff7e369","label":"Mobile Bottom Padding","locked":false,"max":200,"min":0,"name":"mobile_bottom_padding","required":false,"step":10,"type":"number"}],"default":{"desktop_top_padding":50,"desktop_bottom_padding":50,"mobile_top_padding":50,"mobile_bottom_padding":50},"expanded":false,"id":"ac3235dd-5fa3-ed72-4b2a-f4142bf36663","label":"Settings","locked":false,"name":"settings","required":false,"tab":"CONTENT","type":"group"}]

[natsumimori]

Thank you your post @LVerner .

@Teun > I'm wondering if you could weigh in here - would you mind sharing your advice?