Tables in Sitecore Page Editor

We had an interesting challenge recently which involved generating email markup via the page editor. Most html emails are build up from tables – in this situation we needed to generate several rows of content such that we were adding multiple sublayouts each representing a row:

  • Sublayout in placeholder ‘body’: <tr><td>New row content</td></tr>
  • Sublayout in placeholder ‘body’: <tr><td>Next new row content</td></tr>
  • Sublayout in placeholder ‘body’: <tr><td>etc</td></tr>

In normal usage of the Page Editor you would be adding div’s to build up your html – unfortunately emails rely on a parent or several nested parent <table> tags.

When adding new sublayouts to the page the page editor didnt recognize where the table cells and rows would live (note the position of Add to here):

If this was done via divs you would expect to see something like:

One of the strict requirements of the work was the output markup matched existing templates exactly – the original templates had been rigorously tested in email clients. Because of this we really wanted to write the markup into our layouts and sublayouts so it matched the original html (albeit broken into placeholders and components).

After testing at cell and row level we found rewriting tags when in page editor mode helped the page editor respect the page layout much better.

The solution we arrived at was to tap in at page level and rewrite the whole markup in page editor. One of the assemblies that ships with Sitecore is the HtmlAgilityPack – its great for parsing and manipulating html.

There are 2 steps required:

  1. Tap into the page render
  2. Rewrite the content

First, lets rewrite the content:

Then tie into the layout’s render:

What I like about this approach:

  • You only need to make the change once rather than per tag
  • The markup you write into the layouts and sublayouts is the original

What I don’t like about this approach:

  • Adding the style tags doesn’t check for existence – you could end up with duplicate tags if the original style attribute contains the new value. This would be easy to resolve by parsing the existing value in the AddStyle method

Leave a Reply

Your email address will not be published.