Thursday, 28 January 2016

Building a row-based email template in Adestra MessageFocus Email Editor

I had the pleasure of using Adestra's new (still in beta, apparently) email editor this week, and it seemed to do everything we wanted. I inherited an HTML template with 10 different rows, and the brief was to allow the user to create an email using any number of any of these rows, in any order, with editable text, links images etc.

As an overview, if you wish to implement a typical row-based system you probably have the following html structure:

 <table>  
 <!-- row type 1 here -->  
 </table>  
 <table>  
 <!-- row type 2 here -->  
 </table>  
 <table>  
 <!-- row type 3 here -->  
 </table>  
 <table>  
 <!-- row type 4 here -->  
 </table>  

To use this in the Email Editor, where you can place any type of row wherever you want any number of times you need to use alternates and a single overall repeater of the same name, like so:

 <table amf:alternate="row" amf:option="row_1" amf:repeat="row">  
 <!-- row type 1 here -->  
 </table>  
 <table amf:alternate="row" amf:option="row_2">  
 <!-- row type 2 here -->  
 </table>  
 <table amf:alternate="row" amf:option="row_3">  
 <!-- row type 3 here -->  
 </table>  
 <table amf:alternate="row" amf:option="row_4">  
 <!-- row type 4 here -->  
 </table>  

This creates the following type of experience in the Email Editor, allowing you to create/delete rows at will, and selecting which alternative you desire:



The following amf attributes create dynamic (editable) links, images, single text lines and text areas:

 <a href="www.mysite.com" amf:link="my_link">Go here</a>  
 <img src="/img/myimage.png" amf:image="image_1">  
 <span amf:textline="header_line">This is a single line</span>  
 <p amf:textbox="a_paragrpah_of_text">lots of text...</p>