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>