Skip to main content
Question

Conditional html report formatting and table content alignment

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
Supporter
Forum|alt.badge.img+16
  • itaySupporter
  • Supporter
  • January 2, 2019

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
Forum|alt.badge.img
  • zacharya
  • January 2, 2019

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
  • durshe80
  • Author
  • January 2, 2019

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
Supporter
Forum|alt.badge.img+16
  • itaySupporter
  • Supporter
  • January 2, 2019
durshe80 wrote:

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
  • durshe80
  • Author
  • January 2, 2019

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
Supporter
Forum|alt.badge.img+16
  • itaySupporter
  • Supporter
  • January 3, 2019
durshe80 wrote:

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


Helpful Members This Week

Community Stats

30,974
Posts
117,399
Replies
38,760
Members

Latest FME

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie 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.