Formatting an table created using html in a mail script

Sandy7 · ‎05-13-2020

Hello - I have mail script that populates a table that gets sent out as an email.

I need some help formatting the table...it currently looks like this: What I am trying to do is get the Business Impact column to become a row below the associated incident so that it spans all of the columns - there is a screenshot below (the example was manually created) .. below the example, I have a snippet of the html that is populating the table columns /rows. Can anyone help? Thanks!

Code to populate table:

template.print("<table style=\" text-align: left;background-color: F2F3F3;border-collapse: collapse;font-family: arial, helevetica, sans-serif;font-size: 12pt; padding: 5px;border: 1px solid; border-color: grey;\">");
template.print("<tr><td style=\"padding: 5px; border: 1px solid; border-color: grey;\" >");
template.print('Number');
template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\" >");
template.print('Priority');
template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\" >");
template.print('Incident State');
template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\" >");
template.print('Short Description');
template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\" >");
template.print('Business Impact');
template.print("</td></tr>");

if (gr.hasNext()) {

while (gr.next()) {
template.print("<tr><td style=\"padding: 5px; border: 1px solid; border-color: grey;\">");
template.print("<a href='" + baseUrl + gr.getLink() + "'>" + gr.getValue('number') + "</a>");
template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\">");
template.print(gr.priority);
template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\">");
template.print(gr.getDisplayValue('incident_state'));
template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\">");
template.print(gr.short_description);
template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\">");
template.print(gr.u_incident_business_impact);
}

Astrid Sapphir1 · ‎05-13-2020

Hi Sandy,

You were most of the way to your solution, but the problem is that there was a column being created for Business Impact when you wanted your Business impact to sit within its own row, below the other columns. Your solution is something more like this:

template.print("<table style=\" text-align: left;background-color: F2F3F3;border-collapse: collapse;font-family: arial, helevetica, sans-serif;font-size: 12pt; padding: 5px;border: 1px solid; border-color: grey;\">");
template.print("<tr><td style=\"padding: 5px; border: 1px solid; border-color: grey;\" >");
template.print('Number');
template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\" >");
template.print('Priority');
template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\" >");
template.print('Incident State');
template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\" >");
template.print('Short Description');
template.print("</td></tr>");
if (gr.hasNext()) {
    while (gr.next()) {
        template.print("<tr><td style=\"padding: 5px; border: 1px solid; border-color: grey;\">");
        template.print("<a href='" + baseUrl + gr.getLink() + "'>" + gr.getValue('number') + "</a>");
        template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\">");
        template.print(gr.priority);
        template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\">");
        template.print(gr.getDisplayValue('incident_state'));
        template.print("</td><td style=\"padding: 5px; border: 1px solid; border-color: grey;\">");
        template.print(gr.short_description);
        template.print("</td></tr><tr><td colspan=\"4\" style=\"padding: 5px; border: 1px solid; border-color: grey;\">");
        template.print(gr.u_incident_business_impact);
        template.print("</td></tr>")
    }
}
template.print("</table");

What is different here is that it creates the 4 columns for Number, Priority, Incident State and Short Description. Then, once it checks if the GlideRecord query found information, it creates the first first row and puts the Number (with link), Priority, Incident State and Short Description into cells within that row.

It then completes that row and creates another, which has one cell (<td>) which spans 4 columns using colspan="4". That then puts your business impact value in, before ending the cell and the row.

Effectively, the problem you were experiencing, as with some of the solutions above, is that the cell was still beside the others, when it needs its own row. As for the styled formatting, I leave that to you to define best.

Hope that helps.

---

Astrid

View solution in original post

Kieran Anson · ‎05-13-2020

Apologies I always get them back to front, it's rowspan not colspan

Sandy7 · ‎05-13-2020

Thanks for helping.. I change the colspan to rowspan and now it's looking like this..

Any ideas? Thanks again.

Riyanka1 · ‎05-13-2020

Hi,

In place of

template.print(gr.u_incident_business_impact);
}

you can try

template.print("</tr>");

template.print("<tr><td>"+gr.u_incident_business_impact.getDisplayValue()+"</td></tr>");

}

Thanks,

Riyanka

Astrid Sapphir1 · ‎05-13-2020