Aug 13, 20188:27 AM - edited Aug 13, 20188:29 AM
Contributor
Display template content conditionally
SOLVE
This is probably an easy one, but I can not figure it out how to hide an element if it has no value:
<h1>{% text "h1" label='Enter H1', value='This is the H1' %}</h1>
<style>
{% if "h1" is none or "h1" == "" %}
h1 {
display: none;
}
{% endif %}
</style>
This doesn't work, H1 never gets "display: none;".
If I try
{% if h1 is none or h1 == "" %}
instead (no "" around the name), it will hide H1 even if it has a value.
@Hello @andre9000 - Your HUBL tags are going to be in a dictionary, so you would inspect the data cominng from your tag by accessing "widget_data". You should combine this with the "export_to_template_context" tag attribute as well.
Shorthand:
{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{{'<h1>'+widget_data.h1.value+'</h1>' if widget_data.h1.value != ""}}
Or, longhand:
{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{% if widget_data.h1.value != '' %}
<h1>{{widget_data.h1.value}}</h1>
{% endif %}
If this answer helped, please, mark as solved 😄
tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.
@Hello @andre9000 - Your HUBL tags are going to be in a dictionary, so you would inspect the data cominng from your tag by accessing "widget_data". You should combine this with the "export_to_template_context" tag attribute as well.
Shorthand:
{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{{'<h1>'+widget_data.h1.value+'</h1>' if widget_data.h1.value != ""}}
Or, longhand:
{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{% if widget_data.h1.value != '' %}
<h1>{{widget_data.h1.value}}</h1>
{% endif %}
If this answer helped, please, mark as solved 😄
tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.
a nicer approach of course would be no wrap the element itself in a condition, so it doesn't get into the markup if it's empty. However, this doesn't seem to work, because then it is not possible to set a value for h1 anymore.