Can Radio button from UI template toggle the DOM?

Highlighted
Occasional Contributor

Hello All.

I am having the design issue that is bothereing me a lot...

If it is possible to make radio button which would be able to toggle the layout of the e-mail template?

The issue is that I am not able to apply JavaScript to the e-mail template from obwious reasons. Therefore I was wondering how can I toggle the class / or logic from UI available to the end user.

I would like to according to:

https://knowledge.hubspot.com/contacts/property-field-types-in-hubspot

create Radio button and attach it to the banner with text template, to make possible from the end user point of wiev apply styline to the banner if needed.

What I was thinking is:

{% set text = true %}
 {%if text%}
 <td id="banner-text" colspan="2">
     <div style="color: #ffffff; font-size: 44px; font-weight: bold; line-height: 1.2; opacity: 1; font-family: 'benton_sansregular', 'caslon', Arial, Helvetica, sans-serif !important; color: #fff !important;">                                                    
             {{ module.banner_heading }}                                                                                                    
      </div>
         </td>
 {%endif%}

So the end user would be able to toggle true/false state of text variable. In order to render part of DOM or not.

The question is, if it is even possible?

If so, how to add radio button to end user UI "Banner image with text" e-mail template, and implement listener to toggle / set variable?

I will appreciate help.

Thank you in advance,

 

 

 

 

Reply
0 Upvotes
2 Replies 2
Highlighted
Community Manager

Hey @Kamil_KK 

 

I will tag a few of our experts Emoticono feliz     

 

Hey @stefen @Kevin-C @DanielSanchez could you please share your knowledge with @Kamil_KK ?

 

Thank you

Sharon 


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Highlighted
Occasional Contributor

Dear Sharon,

Thank you for your reply. 

I have already done some changes, there is a way I found with radio button / bolean, taht actually toggle the part of the DOM I was talking about and it is visible to the end user via UI. Now we need to test it so, if that would work with our template solution. I keep my fingers corssed.

here's  the code:

 <tr>
    {% if module.boolean_field %}
    <!-- HTML to show when checked -->                                          
      <td id="banner-text" style="text-align: enter; background: rgba(255,121,0,0.5); padding: 0 30px; color: ffffff;" colspan="2">
        <div style="color: #ffffff; font-size: 44px; font-weight: bold; line-height: 1.2; opacity: 1; font-family: 'benton_sansregular', 'caslon', Arial, Helvetica, sans-serif !important; color: #fff !important;">
                                                    
           {{ module.banner_heading }}
                                                                                                    
        </div>
      </td>
     {%endif%}
    </tr>

I add boleean to the template and it seems that works, just like I have mentioned it is matter of testing now. I will keep it open in case there is something wrong for now. Thank you for your understanding.

Cheers.