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

Ankur Bawiskar · ‎05-13-2020

Hi,

So the 2nd image is what it should look like?

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Sandy7 · ‎05-13-2020

Hi - yes, correct. So in the first image you see "business impact" is a column.. I am looking to have that as a row that spans the entire table width .. so in this example, the text in the box that starts with "5/11..." is what I am trying to achieve.

Thanks!

Kieran Anson · ‎05-13-2020

Hi Sandy,

Add into your html for your 'td' tag value just before business impact colspan="3"

template.print("</td><td colspan=\"3\" style=\"padding: 5px; border: 1px solid; border-color: grey;\">");
template.print(gr.u_incident_business_impact);
}

Sandy7 · ‎05-13-2020

Hi, thanks .. I think that is getting me pretty close.. looks like it made it into one column, rather than a row.

I

I am trying to get the business impact for each incident to span the entire width of the table, and be in the row underneath the incident.. here's an example;