How do I retrieve multiple checkbox values within my module?

SOLVE
CMcNamee
Participant | Gold Partner
I'm building an isotope with filter options.  I'm pulling the data from a hubdb table with multiselect columns.  And, I'm using a simple html form with checkboxes for the filter values.  Now, if I select more than one value in a checkbox group, the value coming in for that group is only a single value (the first one in the query string).  Here is the query string:
"query": "category=1&material=2&material=3&submit=submit&portalId=8489056&utm_source=sprocket-menu&hs-expires=1617052028&hs-version=1&hs-signature=AOBq0v_0spNP3Wh43lFOT9sKoBhJcYcZ0g",
You can see I have 2 selected values for material.
But, the data coming through to my module is this:
"query_dict": {
"material": "2",
"submit": "submit",
"portalId": "8489056",
"hs-version": "1",
"hs-signature": "AOBq0v_0spNP3Wh43lFOT9sKoBhJcYcZ0g",
"category": "1",
"hs-expires": "1617052028",
"utm_source": "sprocket-menu"
},

Only one value for material.

 

When I use request.query.material in my hubl, it is confirmed coming through as a single value.


How do I retrieve multiple checkbox values within my module?


Here's a screenshot for a visual of the form. All of the filters work the same way... if I select multiple, only the first value comes through.
Screen Shot 2021-03-29 at 3.29.57 PM.png

0 Upvotes
1 Accepted solution

Accepted Solutions
CMcNamee
Solution
Participant | Gold Partner

I didn't get any answers in a timely manner on this, so, I ended up splitting up the request.query with my own logic instead.  This doesn't show how I construct the filter values for selection or how I insert the data into the isotope.  It just shows how I take the request.query data and turn it into the appropriate database query.  Hope that helps.

 

{% set tableID = 1234567 %}
{% set column_names = [
   'category',
   'service_type__in',
   'material__in',
   'location',
   'building_type__in'
] %}
{# notice the __in suffix in some column names, for allowing multiple values in that field #}

{% set query_arr = [] %}

{# Get form values (project filters) from query string #}
{% set arr_submitted_form_values = [] %}
{% for param in request.query|split('&') %}
   {% if param != 'submit=submit' %}
      {# Only append params that are in the column names array to avoid HS errors #}
      {% for name in column_names %}
        {% set test_col = param|split('=')|first|trim %}
          {% if name == test_col %}
           {% do arr_submitted_form_values.append(param) %}
          {% endif %}
      {% endfor %}
   {% endif %}
{% endfor %}

{# Construct the Default DB query string (Show Featured products, ordered by created date) #}
{% set str_db_query = 'featured=1&orderBy=-hs_created_at' %}
{% set my_query = 'some string' %}
      
{# Construct the DB query string from form values. #}
{% if arr_submitted_form_values %}
  {# DB query string, with selected filter values (ordered by featured first, then by date) #}
  {% set str_joined = arr_submitted_form_values|join('&') %}

  {% set str_db_query = str_joined ~ '&orderBy=-featured&orderBy=-hs_created_at' %}
{% endif %}

{# Retrieve Table Rows #}
{% set selected_rows = hubdb_table_rows(tableID, str_db_query) %}

 

View solution in original post

6 Replies 6
sharonlicari
Community Manager

Hey @CMcNamee 

 

Thank you for sharing this information and some context. I'll invite to this conversation a few experts that can share their thoughts with you.

 

Hey @Anton @rohansdeeson @josh_dev  what would you advise in this case?

 

Thanks
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 !


0 Upvotes
Kevin-C
Recognized Expert

Hey @CMcNamee 

 

I might be reading this completely incorrectly, pardon me if thats the case:

 

So you're pulling the data using HubDB, and filtering that data on the UI using Isotope? Correct?

- meaning all the data is present on load, and Isotope is essentially hiding and showing it?

 

Or are you trying yo build  a multiselect Hubdb filter?

- meaning your HubDB request would have multiple filters applied returning filtered data to the client on load?

0 Upvotes
CMcNamee
Participant | Gold Partner

@Kevin-C We do not want all of the data to be present on load because there will eventually be hundreds of entries and we don't want to bog down our loading times.  So, I have put the filters in a form that submits back to the same page after we choose the filter options via checkbox.  The new data will be added to the isotope on page load based on the filter options that were selected.  Here is the page where I'm trying to build out the demo: http://hubspot-developers-h3fvjv-8489056.hs-sites.com/project-filter-demo-1?work_type=1&work_type=3&...

 

Currently, upon first page load, the isotope loads all db entries that are marked "featured".  Once the filters are chosen and submitted, I will eventually hook those up to a custom db query which will load the appropriate data into isotope.  However, I am stuck on the form submission because my checkboxes are coming through as if only a single value is selected even though I select multiple values.  How do I get multiple values to come through?  When I inspect using the sprocket menu, I see this:

 

 

    "query": "work_type=1&work_type=3&submit=submit&portalId=8489056&utm_source=sprocket-menu&hs-expires=1617130250&hs-version=1&hs-signature=AOBq0v9reFzF7OMvvZD3o7B0ffLQgXwuFg",
    "query_dict": {
      "submit": "submit",
      "portalId": "8489056",
      "work_type": "1",
      "hs-version": "1",
      "hs-signature": "AOBq0v9reFzF7OMvvZD3o7B0ffLQgXwuFg",
      "hs-expires": "1617130250",
      "utm_source": "sprocket-menu"
    },

 

So, you can see for example that I chose 2 values for the checkbox "work_type", as evidenced in the query string.  However, "query_dict" will only give me the first of the 2 values.  How can I get multiple values coming through accurately?

0 Upvotes
Sjardo
Contributor | Diamond Partner

Any updates on this one? i would love to see a solution

Sjardo Janssen, Bureau Vet
Bureau Vet - Sjardo.nl

Did my post solve your question? Help the community by marking it as a solution
0 Upvotes
CMcNamee
Solution
Participant | Gold Partner

I didn't get any answers in a timely manner on this, so, I ended up splitting up the request.query with my own logic instead.  This doesn't show how I construct the filter values for selection or how I insert the data into the isotope.  It just shows how I take the request.query data and turn it into the appropriate database query.  Hope that helps.

 

{% set tableID = 1234567 %}
{% set column_names = [
   'category',
   'service_type__in',
   'material__in',
   'location',
   'building_type__in'
] %}
{# notice the __in suffix in some column names, for allowing multiple values in that field #}

{% set query_arr = [] %}

{# Get form values (project filters) from query string #}
{% set arr_submitted_form_values = [] %}
{% for param in request.query|split('&') %}
   {% if param != 'submit=submit' %}
      {# Only append params that are in the column names array to avoid HS errors #}
      {% for name in column_names %}
        {% set test_col = param|split('=')|first|trim %}
          {% if name == test_col %}
           {% do arr_submitted_form_values.append(param) %}
          {% endif %}
      {% endfor %}
   {% endif %}
{% endfor %}

{# Construct the Default DB query string (Show Featured products, ordered by created date) #}
{% set str_db_query = 'featured=1&orderBy=-hs_created_at' %}
{% set my_query = 'some string' %}
      
{# Construct the DB query string from form values. #}
{% if arr_submitted_form_values %}
  {# DB query string, with selected filter values (ordered by featured first, then by date) #}
  {% set str_joined = arr_submitted_form_values|join('&') %}

  {% set str_db_query = str_joined ~ '&orderBy=-featured&orderBy=-hs_created_at' %}
{% endif %}

{# Retrieve Table Rows #}
{% set selected_rows = hubdb_table_rows(tableID, str_db_query) %}

 

View solution in original post

Sjardo
Contributor | Diamond Partner

I do not know if it's of any help, but got annoyed yesterday so i figured it out myself 😅🤷‍. Based on the "real estate" example Hubspot somewhere provided and this lovely example : https://community.hubspot.com/t5/CMS-Development/Managing-Multiple-Filters-in-HubDB/m-p/427505/highl... I got it all to work. This example ends up in two multiselect checkbox lists from the HubDB that work as an AND filter.  (you got more precise the more you filter)

Tip: Where "__contain" stands, creates theAND filter. If you need a OR filter, replace it with "__in"

For me, codewise, left to do is replacing the ID's with labels in the URL and we got a solid example we can roll out to our clients. 

I hope this helps! If someone needs more info, let me know!

 

 

 

 

{% set hubdb_id ="YOUR HUB ID" %}

{# Get current countries for list and filter #}
{% if request.query_dict.country != '' %} {# if there is a paramater/filter selected #}
  {% set selected_countries = [] %} {# create array to collect countries #}
  {% set selected_types = [] %} {# create array to collect types #}

  {% for item in request.query|split('&') %} {# split paramaters together with values #}
    {% set current_countries = item|split('=') %} {# split value from paramater #}
    {% if current_countries[0] == 'country' %} {# check if it's a country #}
      {% do selected_countries.append(current_countries[1]) %} {# add to selected countries array #} 
    {% endif %}

    {% set current_types = item|split('=') %} {# split value from paramater #}
    {% if current_types[0] == 'type' %}  {# check if it's a type #}
      {% do selected_types.append(current_types[1]) %} {# add to selected types array #} 
    {% endif %}
  {% endfor %}
{% endif %}


{# Build filter, first countries than types #}
<form id="form_id" method="get">
  <h4>Country</h4>
  {% set countries = hubdb_table_column(hubdb_id, "country").options %}
  {% for choice in countries %}
  {% if choice.id in selected_countries %}
  <input type="checkbox" id="{{ choice.id }}" name="country" value="{{ choice.id }}" onChange="this.form.submit()" checked>
  <label for="{{ choice.name }}">  {{ choice.name }}</label><br>
  {% else %}
  <input type="checkbox" id="{{ choice.id }}" name="country" value="{{ choice.id }}" onChange="this.form.submit()">
  <label for="{{ choice.name }}">  {{ choice.name }}</label><br>
  {% endif %}
  {% endfor %} 
  
   <h4>types</h4>
  {% set types = hubdb_table_column(hubdb_id, "type").options %}
  {% for choice in types %}
    {% if choice.id in selected_types %}
    <input type="checkbox" id="{{ choice.id }}" name="type" value="{{ choice.id }}" onChange="this.form.submit()" checked>
    <label for="{{ choice.name }}">  {{ choice.name }}</label><br>
    {% else %}
    <input type="checkbox" id="{{ choice.id }}" name="type" value="{{ choice.id }}" onChange="this.form.submit()">
    <label for="{{ choice.name }}">  {{ choice.name }}</label><br>
    {% endif %}
  {% endfor %}
</form>

{# Lets create a fresh query #}

{% set queryparam = "" %}

{# Apply the new query for countries #}

{% if request.query_dict.country in selected_countries %} {# get all selected countries #}
{% set queryparam = queryparam ~ "&country__contains="~selected_countries|join(',') %}  {# add paramaters for countries #}
{% endif %}

{# Apply the new query for types, same story as above. #}
{% if request.query_dict.type in selected_types %}
{% set queryparam = queryparam ~ "&type__contains="~selected_types|join(',') %} {# contains only works with multiselect. if it's a default select, use type__in #}
{% endif %}


{# load the query over the hubDB you need #}
{% set table = hubdb_table_rows("YOUR HUB ID", queryparam) %}

{% if table == [] %}
    <p class='align-center'>Sorry, no listings found for that Search. Try changing your filter and search again.</p>
{% else %}
  {% for row in table %}
<div>
    <div class="{{ row["type"].name }}">
        <div><img height="100" src="{{ row["listing_image"].url}}"></div>
            <div>
              <h2 style="font-size: 20px">{{ row["listing_price"] }}</h2>
              <h3>{{ row["listing_address"] }}</h3>
              <h4>{{ row["type"].name }}</h4>
              <div>
                  <ul>
                      <li><span>{{ row["listing_bedrooms"] }}</span><br>bd</li>
                      <li><span>{{ row["listing_baths"] }}</span><br>ba</li>
                      <li><span>{{ row["listing_sq_ft"] }}</span><br>sq ft</li>
                      <li><span>{{ row["listing_acres"] }}</span><br>acres</li>
                  </ul>
              </div>
              <div class="button"><a href="{{ row["listing_url"] }}">Details</a></div>
            </div>
    </div>            
</div>
  {% endfor %}
  {% endif %}
{{ queryparam|pprint }}

 

 

 

 







Sjardo Janssen, Bureau Vet
Bureau Vet - Sjardo.nl

Did my post solve your question? Help the community by marking it as a solution
0 Upvotes