Email Booleans - How do you implement them?

Hi Geoffrey,

No much time to paste some code not, but usually, the boolean variable will in fact get the values "none" or "block" or whatever CSS value that makes sense.

Then in your code, you will have something in your code under the form of

<img style="display:${myBooleanVariable}">

BtW, hiding elements using booleans is acceptable in landing pages but not really recommended in emails. Because 1/ some email clients will not correctly interpret the CSS above and 2/ the image has to load even if it does not display, which is not good for deliverability or performance. It's much better to use modules instead, because these really add or remove the code for the email.

-Greg

I haven't seen this solution on the community page, but I use HTML comment tags to toggle large sections of code on / off with Email 2.0's boolean functionality:

At the top, I declare:

<meta class="mktoBoolean" id="showSection" mktoName="Show Section?" default="true" true_value="-->" false_value="" true_value_name="YES" false_value_name="NO" mktoModuleScope="true">

Then, I place comments around the section I want to toggle on/off:

<!-- Section Conditional Trigger ${showSection}

     [As much code as you want]

<!-- End Conditional -->

When the "Show Section" boolean is set to "true", the top conditional is closed, and the code is shown as normal. When the boolean is false, the top comment is left open. This causes the client to comment everything in the code out until the bottom comment, whose closing bracket prevents the entire rest of the document from being commented out. Comments are universally supported, so this doesn't run into any client issues (unlike trying to use display). And, since hidden images are commented out, the user's email client won't try to load it.

I have found this to work reasonably well, and other variables can be placed within the commented section.

We discover a great way to hide or show an element with boolean switches. You should use that only when it's not possible to use the "Delete" module functionality. It is true that using a switch to hide an element will leave the code in the email your contacts will receive. It is also accurate there is a good chance if the email is forwarded the result won't be what you expect, you need to use it sparingly. Utilize it for example to hide an element in a multi-column layout.

This is an example to hide a button; the switches syntax needs to be like this:

<meta class="mktoBoolean" id="ShowBtn" mktoName="Button" default="true" false_value="display:none; max-height:0px; height:0px; max-width:0px; opacity:0; overflow:hidden;" true_value="cursor:auto;" false_value_name="Off" true_value_name="On" mktoModuleScope="true" />‍

The idea of using "cursor:auto;" is to use some CSS that won't enter in conflict with your existing one. 

For the false value, "display:none" will work in every email client except Lotus and Outlook. The rest of the CSS will work in every version of Lotus and Outlook, but you need to add the variable on EVERY tag of the element you want to hide. Add the variable to every HTML tag, and at the very end of existing inline CSS.

Example:

<tr style="${ShowBtn}">
    <td class="w25" align="${BtnAlignRight01}" valign="top" style="padding-right:40px; ${ShowBtn}">
        <table class="button" cellpadding="0" cellspacing="0" border="0" align="${BtnAlignRight01}" style="${ShowBtn}">
            <tr style="${ShowBtn}">
                <td bgcolor="${BtnColor}" class="button" align="center" valign="middle" style="border:${BtnBorderSize}px solid ${BtnBorderColor}; -webkit-border-radius:${BtnRadius}px; -moz-border-radius:${BtnRadius}px; border-radius:${BtnRadius}px; padding-right:${BtnSideSpace}px; padding-left:${BtnSideSpace}px; padding-top:${BtnTopSpace}px; padding-bottom:${BtnBotSpace}px; font-family:${CustomFontFamily}; font-size:${BtnFontSize}px; line-height:${BtnLineHeight}px; color:${BtnLabelColor}; display:block; mso-line-height-rule:exactly; font-weight:${BtnFontWeight}; text-decoration:none; text-align:center; ${ShowBtn}">
                    <a href="${BtnLink}" style="color:${BtnLabelColor}; text-decoration:none; ${ShowBtn}">
                        <span style="color:${BtnLabelColor}; text-decoration:none; ${ShowBtn}">${BtnLabel}</span>
                    </a>
                </td>
            </tr>
        </table>
    </td>
</tr>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Let me know if it helps,

Eric