Hello,
I am trying to use the “table” function in the template, it would look nicer. but still, not perfect.
Hi @ray20
You need to design your notification template using table and div HTML tags like below so that fields will be shown with proper alignments.
@Naveen B Thank you, can you show me a little detail that how to use the div HTML tags?
And Please be noted, since I’d like to use it in the foreach loop, it would be dynamic lines in table instead of fixed lines. It can be done, right?
Hi @ray20
I hope the below article will helps a lot with your requirement. Please review and verify by adding the syntaxes in the Notification template.
@Naveen B Can you repost the Article, I did not see it. Thank you .
Hello, I’ve been trying to follow that Acumatica Developers Blog article, but I can’t get this functionality to work. I’m trying to surface information from an SO Line in a notification email body. I will modify and format it further once I get it to work, but no luck so far.
My template is referencing the main Sales Order screen (SO301000).
Notification Template
Actual Email Body
We have this working I’m getting a grid with the right number of lines but it is just repeating the first line that many times.
@dboes14 @max21 hello, can you try, did not put the view= in foreach<> just like below: <foreach>
…..
</foreach>
I suspect your code is messed up. Switch to HTML view and check it.
In HTML view, it should look something like this:
<tr><td valign="top">Items:</td><td><foreach view="Transactions"> <span data-field="yes">((Transactions.TranDesc))</span> <span data-field="yes">((Document.CuryID.CurySymbol))((Transactions.CuryLineAmt))</span> | </foreach></td></tr>
This is from a template based off Sales Orders and the Items are formatted inside a table along with other rows of data from the Sales Order.
ps. It’s much better to work entirely in HTML view as the Visual view sometimes adds additional HTML which doesn’t always behave as expected.
<foreach view="OrderNbr"> ((SOLine_branchID)) - ((SOLine_InventoryID)) <br> </foreach>
This is what I have
This is what I am getting
MAIN - PHC-FAP820 MAIN - PHC-FAP820 MAIN - PHC-FAP820 MAIN - PHC-FAP820
@dboes14 if I remember correctly, the article is not right. Please use
<foreach > ((SOLine_branchID)) - ((SOLine_InventoryID)) <br> </foreach>
instead.
DO NOT PUT VIEW= IN
That was the ticket!!!! thank you so much
@ray20 - I’m trying to do something very similar as to what you described in your original post; if you wouldn’t mind, could you share how you formatted the HTML to accommodate the table with a predetermined header row and then the resulting data fields beneath the headers?
@ray20 - I’m trying to do something very similar as to what you described in your original post; if you wouldn’t mind, could you share how you formatted the HTML to accommodate the table with a predetermined header row and then the resulting data fields beneath the headers?
@mikeho , Sorry, I did not study div HTML tags in depth. I am just use the “table” fucntion to show to users. Although it is not perfect. But user accept this, so I did not study any further.
@ray20 - understood. I did some more digging and found an example on the AUG forums, and with some trial and error I was able to tweak it to the below HTML code:
<table role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;" cellspacing="0" cellpadding="0" border="0" align="center"> <tbody> <tr> <td style="direction: ltr; font-size: 0px; text-align: left; vertical-align: top;"> <table role="presentation" cellspacing="0" cellpadding="0" border="0"> <tbody><tr><td class="" style="vertical-align:top;width:1000px;"> <div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"> <table role="presentation" style="vertical-align:top;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr><td style="font-size: 0px; word-break: break-word;" align="left"> <div style="font-family:sans-serif;font-size:14px;line-height:23px;text-align:left;color:#000000;"> <table style="min-width:100%;" width="90%" cellspacing="0" cellpadding="0"> <tbody><tr> <td> <table class="smarttable" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="3"><thead> <tr> <th scope="col" style="font-family: Arial,sans-serif; font-size: 14px; border: 1px solid #ededed; border-collapse: collapse;line-height:15px;color:#033047;text-align:left;background-color:#ededed" width="13%">PO Number<br></th> <th scope="col" style="font-family: Arial,sans-serif; font-size: 14px; border: 1px solid #ededed; border-collapse: collapse;line-height:15px;color:#033047;text-align:left;background-color:#ededed" width="12%">Issue Date</th> <th scope="col" style="font-family: Arial,sans-serif; font-size: 14px; border: 1px solid #ededed; border-collapse: collapse;line-height:15px;color:#033047;text-align:left;background-color:#ededed" width="14%">Expected Date</th> <th scope="col" style="font-family: Arial,sans-serif; font-size: 14px; border: 1px solid #ededed; border-collapse: collapse;line-height:15px;color:#033047;text-align:left;background-color:#ededed" width="31%">Item Number</th> <th scope="col" style="font-family: Arial,sans-serif; font-size: 14px; border: 1px solid #ededed; border-collapse: collapse;line-height:15px;color:#033047;text-align:center;background-color:#ededed" width="10%">PO Qty<br></th> <th scope="col" style="font-family: Arial,sans-serif; font-size: 14px; border: 1px solid #ededed; border-collapse: collapse;line-height:15px;color:#033047;text-align:center;background-color:#ededed" width="10%">Rec'd Qty</th> <th scope="col" style="font-family: Arial,sans-serif; font-size: 14px; border: 1px solid #ededed; border-collapse: collapse;line-height:15px;color:#033047;text-align:center;background-color:#ededed" width="10%">Open Qty</th> </tr> </thead> </table> <table style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0"><tbody><tr> <td style=""><foreach> <table class="smarttable" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="3"><tbody> <tr> <td data-label="PONBR" style=" font-family: Arial,sans-serif; border: 1px solid #ededed; border-collapse: collapse;font-size: 13px; line-height:20px;text-align:left;" width="13%" valign="top"><span data-field="yes"></span>((POOrder_orderNbr))<br></td> <td data-label="PODATE" style=" font-family: Arial,sans-serif; border: 1px solid #ededed; border-collapse: collapse;font-size: 13px; line-height:20px;text-align:left;" width="12%" valign="top"><span data-field="yes"><span style="background-color: rgb(255, 255, 255);"><span data-field="yes">((POOrder_Formuladbbd2c9bf6f34732959d344c6683b255))</span></span></span></td> <td data-label="POLINEPDATE" style=" font-family: Arial,sans-serif; border: 1px solid #ededed; border-collapse: collapse;font-size: 14px; line-height:20px;text-align:left;" width="14%" valign="top"><span data-field="yes"><span data-field="yes"><span style=""><span style="background-color: rgb(255, 255, 255);"><span data-field="yes">((POLine_Formula2600ddd84e4749b290e4be69ef3f6cea))</span></span></span></span></span><br></td> <td data-label="ITEMNBR" style=" font-family: Arial,sans-serif; border: 1px solid #ededed; border-collapse: collapse;font-size: 13px; line-height:20px;text-align:left;" width="31%" valign="top"><span data-field="yes"><span data-field="yes">((POLine_Formula19dc5a96ad50470fb67ef02fce021b3b))</span></span><br></td> <td data-label="POQTY" style=" font-family: Arial,sans-serif; border: 1px solid #ededed; border-collapse: collapse;font-size: 13px; line-height:20px;text-align:center;" width="10%" valign="top"><span data-field="yes"><span data-field="yes">((POLine_orderQty))</span></span><br></td> <td data-label="RCDQTY" style=" font-family: Arial,sans-serif; border: 1px solid #ededed; border-collapse: collapse;font-size: 13px; line-height:20px;text-align:center;" width="10%" valign="top"><span data-field="yes">((POLine_receivedQty))</span><br></td> <td data-label="OPENQTY" style=" font-family: Arial,sans-serif; border: 1px solid #ededed; border-collapse: collapse;font-size: 13px; line-height:20px;text-align:center;" width="10%" valign="top"><span data-field="yes">((POLine_openQty))</span><br></td> </tr></tbody></table></foreach></td></tr></tbody></table> </td></tr></tbody></table> </div> </td></tr></tbody></table> </div> </td></tr></tbody></table> </td></tr></tbody></table>
Which produced this table in the notification template:
It’s basically 2 tables stack on top of each other, one for the “header row” and the other for each line. Hopefully it’s helpful for someone else.
@mikeho Super. Thank you so much for sharing this. I would try if user have further need.
I’m going to add mine.
(notice the style="display: none;"
on the <foreach>
elements, which prevents gaps in the rows)
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <h1>Title</h1> <h2>Subtitle</h2> <h3>Description</h3> <div style="width: 800px;"> <table style="width: 100%; border-collapse: collapse; table-layout: fixed;"> <thead> <tr> <th style="width: 80px; border: 1px solid #000; padding: 8px; background-color: #f2f2f2;">Column 1</th> <th style="width: 120px; border: 1px solid #000; padding: 8px; background-color: #f2f2f2;">Column 2</th> <th style="width: 120px; border: 1px solid #000; padding: 8px; background-color: #f2f2f2;">Column 3</th> <th style="width: 120px; border: 1px solid #000; padding: 8px; background-color: #f2f2f2;">Column 4</th> <th style="width: 160px; border: 1px solid #000; padding: 8px; background-color: #f2f2f2;">Column 5</th> <th style="width: 80px; border: 1px solid #000; padding: 8px; background-color: #f2f2f2;">Column 6</th> <th style="width: 80px; border: 1px solid #000; padding: 8px; background-color: #f2f2f2;">Column 7</th> <th style="width: 160px; border: 1px solid #000; padding: 8px; background-color: #f2f2f2;">Column 8</th> </tr> </thead> <tbody> <tr> <td style="display: none;"><foreach></td> </tr> <tr> <td style="width: 80px; border-bottom: 1px solid #000; padding: 8px;"> <span data-field="yes">((Column_1))</span> </td> <td style="width: 120px; border-bottom: 1px solid #000; padding: 8px;"> <span data-field="yes">((Column_2))</span> </td> <td style="width: 120px; border-bottom: 1px solid #000; padding: 8px;"> <span data-field="yes">((Column_3))</span> </td> <td style="width: 120px; border-bottom: 1px solid #000; padding: 8px;"> <span data-field="yes">((Column_4))</span> </td> <td style="width: 160px; border-bottom: 1px solid #000; padding: 8px;"> <span data-field="yes">((Column_5))</span> </td> <td style="width: 80px; border-bottom: 1px solid #000; padding: 8px;"> <span data-field="yes">((Column_6))</span> </td> <td style="width: 80px; border-bottom: 1px solid #000; padding: 8px;"> <span data-field="yes">((Column_7))</span> </td> <td style="width: 160px; border-bottom: 1px solid #000; padding: 8px;"> <span data-field="yes">((Column_8))</span> </td> </tr> <tr> <td style="display: none;"></foreach></td> </tr> </tbody> </table> </div>