Stored vs displayed values for list variables in email templates

[Grégoire_Miche2]

The new email editor is introducing List variables that enable the designer to set a List of values to be chosen by the user creating an email. This is great but is still missing the possibility to display one thing and have the stored value to be more technical.

Typical usage for this would be to enable the user to change some CSS behavior on the fly. e.g.:

<meta class="mktoList" id="textFontFamily" mktoName="Main Text Font Family" values="Arial,Verdana,Times New Roman">

Would be used to change the fonts used in the whole email

But in, some cases, you will want to hide the complexity to the user. Therefore, it would be preferable to have the possibility to set

values="displayed value1|stored value1, displayed value2|stored value2, displayed value3|stored value3".

Ex:

values="Large|20px,medium|10px,small|5px".

-Greg

[Justin_Cooperm2]

Nice! Yeah, we can build this for you.

[Dave_Roberts]

Awesome suggestion Gregoire, this would be a game-changer for sure!

Is this live yet, or in-progress?

[Grégoire_Miche2]

I have no news

Justin Cooperman​ ?

-Greg

[Justin_Cooperm2]

We haven't had traction on this one yet

[Kent_Brubaker]

Hi. Over a year later, I too am curious if anything has been done with this. I would want to use it for hex colors on background tables in the HTML and CSS to give our client their group of corporate colors to work with:

values="Red|#A41F35,Orange|#E94F3D"

[Paul_Hughes]

Just searched to see if this exact feature was available, and am disappointed there's no traction here! I'm looking at the exact same use case as the above post (Kent Brubaker)

I voted up on this idea, and will have to have folks memorize hex values in the list options for now.

Justin Cooperman​

[Justin_Cooperm2]

I have an open ticket, but it's in the backlog. Hope to get to it at some point in the not-too-distant future

[JD_Nelson]

are we still in the 'distant future' - ?

[Dave_Roberts]

Hey JD-

Here's a look at something we've used to make complicated HTML stuff easy for the end-user to implement (kinda like the dropdown idea might help accomplish). On the surface, it's just adding classes to a <div>, in this case, those choices are form, image, video, widescreen, small. Those are written into the stylesheet to do different things (like show/hide the form or video box / resize the elements) and can be used in combination. I.e. video + widescreen = a full-width video | video + small = max-width:60% video box.

The issue we were running into had been making those classes (form, image, ...) available to the end-user so they didn't have to go looking somewhere for documentation / options. There's a few ways this can be accomplished in the meantime that I thought I'd share.

Here's a look at 2 options, the left is a tooltip that pops up when you hover on the icon, the other is 'pseudo-element' (:after) that displays on top of the editable area when you hover over it in the editor (only!).

1. "Easy Editor" -- on some templates, we've added an "Easy Editor" toggle that adds an overlay to the Marketo interface to provide a little more context / info to the end-user. In this example, that's turned on and populates a banner in the top-left that's got some icons. The top three icons have tooltips for "Keywords" that can be added into a .mktoString (one or more, space separated / feeds into class="___"). The last icon is a link to a Resources page for detailed documentation on this template, copy/paste code, etc.

2. Hoverable-Editable-Areas -- both of these examples rely upon the Marketo editor adding a style="cursor:pointer" to the editable div, but only inside the editor experiences (not in the approved or preview version). I've shown the CSS for to create some basic hoverable text for this example. Here's a look at that piece:

.mktoForm.EasyEdit-On[style="cursor: pointer;"]:hover:after {

    content:"form, image, video | widescreen, small"; /* <-- ADD YOUR KEYWORDS ON THIS LINE */

    position:absolute;

    top:0;

    left:15px;

    background-color:rgba(255,255,255,0.6);

    padding:3px;

    }

(?) Whats going on here (?)

1. I've added "Easy-Edit-${ee_Toggle}" as a class to my .mktoForm div. The variable is a boolean ( On | Off ) and acts as a switch for the overlay display inside the editor. When that is "On", the overlay shows, when it's off, it goes away.

2. [style="cursor:pointer;"] = Roughly translated; "Is an editable area". The Marketo editor adds this, but only inside the editor experience, so it's safe to use as a target unless you're using a style that included cursor: pointer.

3. :hover = when you hover on this (editable, form), then show up

4. :after = a 'pseudo-element' that's used to hold some text as an overlay. This should contain the keywords you'd like to display in the content: " ______" line.

All together: Target an element with a class of "mktoForm" and "Easy-Edit-On" which also has a style="" attribute value of "cursor:pointer;" and only when you hover over it. Display some content (form, image ...) "after" (top, left) that div and position that to the top left corner. That box gets a white background w/ 60% opacity - rgba(255,255,255,0.6) - and some padding so the text isn't too awkward in the  space.

---

Let me know what you think, I've been tinkering with this for a bit, I'd be happy to dive into more ideas (applications) if you've got em'.

-Dave

[Ben_Pope]

I would absolutely love the ability to display a different value than is stored too!

Same use case -- wanting to give user a list of color options but not show hexcodes.

I'm eager to hear about any developments on this functionality.