3

I have a transactional email which is sent to a specific report. My code executes a dynamic look-up to a data extension to retrieve the transactional lines related to a specific key in the report. The number of lines in the lookup table can be different between every single email.

The problem I am having is the final HTML formatting for the table is coming up out mangled in Outlook (and in Gmail to a smaller extent)[just the table, all the other elements are fine]. The source code below shows fine on the "view as web page" (and incidentally shows fine in Outlook 2013 mobile), but just doesn't render correctly in several email clients. Does anyone have any advice about how to properly format the HTML table?

<b> Samples in this Order:</b>
</p>
<table dir="ltr" id="ordertable" style="width:100%;" cellspacing="0" cellpadding="0" border="1">
  <colgroup>
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
   </colgroup>
  <tr>
    <td>Item Number
    </td>
    <td>Description
    </td>
    <td>Quantity
    </td>
    <td>UM
    </td>
    <td>Catalog Link</td>
  </tr>

</table>

<p id="solinescode">%%[ VAR @rs, @row, @cntr SET @rs = LookupRows("Sales Order Lines Import1","PBSI__SoName__c",[sonumber]) FOR @cntr = 1 to RowCount(@rs) do SET @row = Row(@rs, @cntr) ]%%
</p>

<table dir="ltr" id="ordertable" style="width:100%;" cellspacing="0" cellpadding="0" border="1">
  <colgroup>
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
  </colgroup>
  <tr>
  <td>%%=Field(@row,"Item_Number_Name__c")=%%
    </td>
 <td>%%=Field(@row,"pBSI__Item_SOLine_Description__c")=%%    </td>
    <td>%%=FormatNumber(Field(@row,"PBSI__Quantity_Needed__c"),"N")=%%
    </td>
    <td>%%=Field(@row,"UM__c")=%%
    </td>
    <td><a href="%%=Field(@row,"Datasheet__c")=%%">%%=Field(@row,"Series__c")=%%</a></td>
  </tr>
    </table>
<p id="solinescode">%%[NEXT @cntr]%%</p>

<style type="text/css">#solinescode  {
  display:none
}
  table{
    table-layout: fixed;
    min-width: 100px;
  }
  td{
    word-wrap:break-word;
  }
  .fixed {
  width: 100px;
}
</style>
2

I would definitely not break your column heading row and data rows into separate tables. The go-to web-dev methods for styling rarely work consistently in email HTML. You'll need to rely on in-line styles for formatting.

I generally code looping HTML output like this, because it's easier to tweak for email client adjustments:

%%[

VAR @rs, @row, @cntr, @soNumber
set @soNumber = AttributeValue("sonumber")
SET @rs = LookupRows("Sales Order Lines Import1","PBSI__SoName__c",@soNumber) 

if rowcount(@rs) > 0 then

    FOR @cntr = 1 to RowCount(@rs) do 

      var @itemNumber, @description, @qty, @um, @catalogLink, @series

      SET @row = Row(@rs, @cntr) 
      set @itemNumber = Field(@row,"Item_Number_Name__c")
      set @description = Field(@row,"pBSI__Item_SOLine_Description__c")
      set @qty = FormatNumber(Field(@row,"PBSI__Quantity_Needed__c"),"N")
      set @um = Field(@row,"UM__c")
      set @catalogLink = Field(@row,"Datasheet__c")
      set @series = Field(@row,"Series__c")

      ]%%

      %%[ if @cntr == 1 then ]%%

        <p><b>Samples in this Order:</b></p>
        <table cellspacing="0" cellpadding="0" border="1">
          <tr>
            <td>Item Number</td>
            <td>Description</td>
            <td>Quantity</td>
            <td>UM</td>
            <td>Catalog Link</td>
          </tr>

      %%[ endif ]%%

        <tr>
            <td>%%=v(@itemNumber)=%%</td>
            <td>%%=v(@description)=%%</td>
            <td>%%=v(@qty)=%%</td>
            <td>%%=v(@um)=%%</td>
            <td><a href="%%=redirectto(@catalogLink)=%%">%%=v(@series)=%%</a></td>
        </tr>


     %%[ if @cntr == rowcount(@rs) then ]%%
        </table>
     %%[ endif ]%%

    %%[ 
      NEXT @cntr
    ]%%

%%[ else ]%%

   <p>no rows found</p>    

%%[ endif ]%%
| improve this answer | |
  • Thank you @Adam Spriggs! This works perfectly. Very elegant solution! – Peter SanGeorge Apr 26 '17 at 15:50
  • I did notice a small issue with the code -- Every table seems to be missing a single line in it, and it seems to always be the first line. Is this due to the if @cntr == 1 workaround? Could that comparison operator be changed to avoid missing the first line of the returned lines? – Peter SanGeorge Apr 26 '17 at 20:39
  • I'd recommend writing out your @cntr variable to verify it's value for each row. With code like this outputline(concat("<br>@cntr:",@cntr)) – Adam Spriggs Apr 26 '17 at 21:00
  • Thanks. I found the resolution. It is just to stack the variables in the first IF clause table, and then again in the main body. – Peter SanGeorge Apr 26 '17 at 21:30
  • I see what you're saying now. I've updated my example to fix the issue. – Adam Spriggs Apr 26 '17 at 23:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.