Question

Conditional html report formatting and table content alignment

  • 2 January 2019
  • 6 replies
  • 41 views
durshe80

I am attempting to generate an html report via fme. Attached is a screenshot that shows the existing report that I've been able to generate with some of my desired modifications. I've also uploaded my fme model here:

I'm trying to do 3 things with the report:

1. Color the text based on the content (if water data, color blue, if sewer data color green, etc...)

2. Right-Align the population column on right side.

3. Possibly adjust column widths.

 

I've attempted to do this with the Custom HTML option in the HTMLReportGenerator, but had no success as I am not familiar with how fme references the actual data that is then exposed onto the report.

 

Please help... :)

6 replies

itay
Rank
Badge +16

Hi @durshe80,

I had a look at your template and noticed some issues.

The HTMLReportGenerator transformer (table) is limited and cannot represent the data the way you want it, for that you will need to use a custom HTML page content. which means that you need to build the HTML yourself.

I usually use the W3schools page as a starting point to create the table and then insert it into the HTMLReportGenerator.

Hope this helps,

Itay

Z
Badge

Hello @durshe80

To achieve the styling portions of your request, pending a deeper understanding of your data structure, you could use a series of StringReplacers after the HTMLReportGenerator to include custom CSS styles. You could add a class to the HTML tag if it is water/sewer etc. Since the data is formatted in an HTML Table, look into styling each HTML table tag the way you would like. this can accomplish your alignment and sizing issues.

Cheers,

 

Zachary

durshe80

Thanks Itay; I was attempting to use the Custom HTML option, however, I'm missing a piece... how does fme reference all records... my code only gives me the first record.

 

<!DOCTYPE html>
<html>
  Â <head>
  Â  Â  <title>Population Estimate</title>
  Â  Â  <meta charset="UTF-8">
  Â  Â  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  Â </head>
  Â <body>
  Â  Â  <H1 style="color:rgb(0,0,0)" class="text-center">Population Estimate - @DateTimeNow()</H1>
  Â  Â  <table class="table table-bordered">
  Â  Â  Â  Â <thead>
  Â  Â  Â  Â  Â  <tr>
  Â  Â  Â  Â  Â  Â  Â <th>Description</th>
  Â  Â  Â  Â  Â  Â  Â <th>Population</th>
  Â  Â  Â  Â  Â  </tr>
  Â  Â  Â  Â </thead>
  Â  Â  Â  Â <tbody>
  Â  Â  Â  Â  Â  <tr>
  Â  Â  Â  Â  Â  Â  Â <td width="75%">@Value(DescriptionUpdate)}</td>
  Â  Â  Â  Â  Â  Â  Â <td width="25%"; align="right">@Value(Population)}</td>
  Â  Â  Â  Â  Â  </tr>
  Â  Â  Â  Â </tbody>
  Â  Â  </table>
  Â </body>
</html>

 

itay
Rank
Badge +16

Thanks Itay; I was attempting to use the Custom HTML option, however, I'm missing a piece... how does fme reference all records... my code only gives me the first record.

 

<!DOCTYPE html>
<html>
  Â <head>
  Â  Â  <title>Population Estimate</title>
  Â  Â  <meta charset="UTF-8">
  Â  Â  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  Â </head>
  Â <body>
  Â  Â  <H1 style="color:rgb(0,0,0)" class="text-center">Population Estimate - @DateTimeNow()</H1>
  Â  Â  <table class="table table-bordered">
  Â  Â  Â  Â <thead>
  Â  Â  Â  Â  Â  <tr>
  Â  Â  Â  Â  Â  Â  Â <th>Description</th>
  Â  Â  Â  Â  Â  Â  Â <th>Population</th>
  Â  Â  Â  Â  Â  </tr>
  Â  Â  Â  Â </thead>
  Â  Â  Â  Â <tbody>
  Â  Â  Â  Â  Â  <tr>
  Â  Â  Â  Â  Â  Â  Â <td width="75%">@Value(DescriptionUpdate)}</td>
  Â  Â  Â  Â  Â  Â  Â <td width="25%"; align="right">@Value(Population)}</td>
  Â  Â  Â  Â  Â  </tr>
  Â  Â  Â  Â </tbody>
  Â  Â  </table>
  Â </body>
</html>

 

Hi,

The following part of your HTML :

  1.   Â  Â  Â  Â  Â  <tr>
  2.   Â  Â  Â  Â  Â  Â  Â <td width="75%">@Value(DescriptionUpdate)}</td>
  3.   Â  Â  Â  Â  Â  Â  Â <td width="25%"; align="right">@Value(Population)}</td>
  4.   Â  Â  Â  Â  Â  </tr>

Is where you need to use an aggregator to create multiple <tr> tags  into one attribute like:

  Â  Â  Â  Â  Â  <tr>

  Â  Â  Â  Â  Â  Â  Â <td width="75%">@Value(DescriptionUpdate)}</td>

  Â  Â  Â  Â  Â  Â  Â <td width="25%"; align="right">@Value(Population)}</td>

  Â  Â  Â  Â  Â  </tr>

  Â  Â  Â  Â <tbody>

  Â  Â  Â  Â  Â  <tr>

  Â  Â  Â  Â  Â  Â  Â <td width="75%">@Value(DescriptionUpdate2)}</td>

  Â  Â  Â  Â  Â  Â  Â <td width="25%"; align="right">@Value(Population2)}</td>

  Â  Â  Â  Â  Â  </tr>

and then insert that attribute value (from the aggregator) into the rest of the custom HTML.

Hope this helps. 

durshe80

Thanks everyone... I got it.

Using the Aggregator, per your recommendation...

0684Q00000ArKvXQAV.png

Here's my HTML code...

<!DOCTYPE html><html>  Â <head>  Â  Â  <title>Population Estimate</title>  Â  Â  <meta charset="UTF-8">  Â  Â  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">  Â </head>  Â <body>  Â  Â  <H1 style="color:rgb(0,0,0)" class="text-center">Population Update</H1>  Â  Â  <table class="table table-striped">  Â  Â  Â  Â <thead>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <th>Description</th>  Â  Â  Â  Â  Â  Â  Â <th>Population</th>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â </thead>  Â  Â  Â  Â <tbody>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=font-weight:bold>@Value(HTMLList{0}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right" style=font-weight:bold>@Value(HTMLList{0}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{1}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{1}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{2}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{2}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  Â <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style="color:#1FBC25; font-weight:bold">@Value(HTMLList{3}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style="color:#1FBC25; font-weight:bold">@Value(HTMLList{3}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{4}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{4}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{5}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{5}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{6}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{6}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{7}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{7}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{8}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{8}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{9}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{9}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style="color:#1F44C1; font-weight:bold">@Value(HTMLList{10}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style="color:#1F44C1; font-weight:bold">@Value(HTMLList{10}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1F44C1>@Value(HTMLList{11}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1F44C1>@Value(HTMLList{11}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1F44C1>@Value(HTMLList{12}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1F44C1>@Value(HTMLList{12}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1F44C1>@Value(HTMLList{13}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1F44C1>@Value(HTMLList{13}.Population)</style></td>  Â  Â  Â  Â  Â  </tr> Â  Â  Â Â  Â  Â  Â  Â  Â  </tbody>  Â  Â  </table>  Â </body></html>

My custom report looks like this:

0684Q00000ArLZ7QAN.pngpopupdate.fmw

itay
Rank
Badge +16

Thanks everyone... I got it.

Using the Aggregator, per your recommendation...

0684Q00000ArKvXQAV.png

Here's my HTML code...

<!DOCTYPE html><html>  Â <head>  Â  Â  <title>Population Estimate</title>  Â  Â  <meta charset="UTF-8">  Â  Â  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">  Â </head>  Â <body>  Â  Â  <H1 style="color:rgb(0,0,0)" class="text-center">Population Update</H1>  Â  Â  <table class="table table-striped">  Â  Â  Â  Â <thead>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <th>Description</th>  Â  Â  Â  Â  Â  Â  Â <th>Population</th>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â </thead>  Â  Â  Â  Â <tbody>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=font-weight:bold>@Value(HTMLList{0}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right" style=font-weight:bold>@Value(HTMLList{0}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{1}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{1}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{2}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{2}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  Â <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style="color:#1FBC25; font-weight:bold">@Value(HTMLList{3}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style="color:#1FBC25; font-weight:bold">@Value(HTMLList{3}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{4}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{4}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{5}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{5}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{6}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{6}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{7}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{7}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{8}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{8}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1FBC25>@Value(HTMLList{9}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1FBC25>@Value(HTMLList{9}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style="color:#1F44C1; font-weight:bold">@Value(HTMLList{10}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style="color:#1F44C1; font-weight:bold">@Value(HTMLList{10}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1F44C1>@Value(HTMLList{11}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1F44C1>@Value(HTMLList{11}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1F44C1>@Value(HTMLList{12}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1F44C1>@Value(HTMLList{12}.Population)</style></td>  Â  Â  Â  Â  Â  </tr>  Â  Â  Â  Â  Â  <tr>  Â  Â  Â  Â  Â  Â  Â <td width="80%"; style=color:#1F44C1>@Value(HTMLList{13}.DescriptionUpdate)</style></td>  Â  Â  Â  Â  Â  Â  Â <td width="20%"; align="right"; style=color:#1F44C1>@Value(HTMLList{13}.Population)</style></td>  Â  Â  Â  Â  Â  </tr> Â  Â  Â Â  Â  Â  Â  Â  Â  </tbody>  Â  Â  </table>  Â </body></html>

My custom report looks like this:

0684Q00000ArLZ7QAN.pngpopupdate.fmw

Nice one! 

Reply


Community Stats

28,688
Posts
109,428
Replies
36,543
Members
Terms & ConditionsCookie settings
A product of
Safe Software respectfully acknowledges that we live, learn and work on the traditional and unceded territories of the Kwantlen, Katzie, and Semiahmoo First Nations.