1

I believe I am asking a question similar to this question that was asked a few years ago about popup functionality in the old CartoDB. I just tried my best to replicate the solution to that question in the newer Carto Builder, but I'm failing. (I tried using the # and ^ symbols in what I thought were similar places to where they were used in the solution to the question above; doing so didn't break the HTML, but it didn't work either).

My algorithm is:

If <field_A> is not null, show fields A, B, and C in the popup
If <field_D> is not null, show fields D, E, and F in the popup

Or, an alternate algorithm could be:

If <field_A> is not null, show fields A, B, and C in the popup
If <field_A> is null, show fields D, E, and F in the popup instead

This is the default HTML that Carto created for me to simply show fields A, B, and C in the popup. I'd like to edit this HTML to match my algorithm above. My arrows show where I think I need to edit the HTML, but I'm at a loss for how to actually edit it:

<div class="CDB-infowindow CDB-infowindow--dark js-infowindow" style="background:#2E3C43">
  <div class="CDB-infowindow-close js-close"></div>
  <div class="CDB-infowindow-container">
    <div class="CDB-infowindow-bg">
      <div class="CDB-infowindow-inner js-inner">
        <ul class="CDB-infowindow-list js-content">

          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_A</h5>    <-- I think this is where I need to specify "if field_A is not null..."
            <h4 class="CDB-infowindow-title">{{field_A}}</h4>     <-- And this is where I need to specify "...then show field_A"
                                                                  <-- And then here is where I'd need to specify "...else show field_D" 
          </li>

          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_B</h5>    <-- Repeat the above for the next set of fields
            <h4 class="CDB-infowindow-title">{{field_B}}</h4>

          </li>

          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_C</h5>    <-- Repeat the above for the last set of fields
            <h4 class="CDB-infowindow-title">{{field_C}}</h4>

          </li>

        </ul>
      </div>
    </div>
    <div class="CDB-hook">
      <div class="CDB-hook-inner"></div>
    </div>
  </div>
</div>
1

Carto uses the Mustache templating system for popups. They are "logic-less" however you can implement a bit of logic by bracketing the content you want given some condition using tags with # for "is true", ^ for "is false", and / as the closing tag.

Given the following data

{ 
  "field_a": null, 
  "field_b": "some",
  "field_c": "thing",
  "field_d": "and",
  "field_e": "another",
  "field_f": "thing"
}

A workable template for your logic would look something like this

<div class="CDB-infowindow CDB-infowindow--light js-infowindow">
  <div class="CDB-infowindow-close js-close"></div>
  <div class="CDB-infowindow-container">
    <div class="CDB-infowindow-bg">
      <div class="CDB-infowindow-inner js-inner">
        <ul class="CDB-infowindow-list js-content">
{{#field_a}}
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_a</h5>
            <h4 class="CDB-infowindow-title">{{field_a}}</h4>
          </li>
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_b</h5>
            <h4 class="CDB-infowindow-title">{{field_b}}</h4>
          </li>
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_c</h5>
            <h4 class="CDB-infowindow-title">{{field_c}}</h4>
          </li>
{{/field_a}}          
{{^field_a}}
   {{#field_d}}
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_d</h5>
            <h4 class="CDB-infowindow-title">{{field_d}}</h4>
          </li>
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_e</h5>
            <h4 class="CDB-infowindow-title">{{field_e}}</h4>
          </li>
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_f</h5>
            <h4 class="CDB-infowindow-title">{{field_f}}</h4>
          </li>
   {{/field_d}}
{{/field_a}}
        </ul>
      </div>
    </div>
    <div class="CDB-hook">
      <div class="CDB-hook-inner"></div>
    </div>
  </div>
</div>
3
  • Jeremy, thank you so much for this answer. Unfortunately, it's not working for me just yet. All I see are empty black pop-ups. I'm not sure how to share my HTML though to troubleshoot. But it looks exactly like yours just with my actual field names replacing "field_a," "field_d," etc. – Kristen G. Jun 4 '20 at 19:15
  • Ah ha! Carto helped me to understand why it wasn't working. I didn't have the fields selected in Builder first before I applied the HTML. I guess doing that initializes them. – Kristen G. Jun 6 '20 at 15:23
  • Ah, yes - that will decide what goes into the UTF grids that feed these. – Jeremy Malczyk Jun 6 '20 at 15:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.