CMS Development

Kamil_KK
Contributor | Platinum Partner
Contributor | Platinum Partner

Can Radio button from UI template toggle the DOM?

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,

 

 

 

 

0 Upvotes
2 Replies 2
sharonlicari
Community Manager
Community Manager

Can Radio button from UI template toggle the DOM?

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 you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes
Kamil_KK
Contributor | Platinum Partner
Contributor | Platinum Partner

Can Radio button from UI template toggle the DOM?

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.