Skip to main content

HTML Pages created with FME use an external stylesheet:

<html>
   <head>
      <title>Report</title>
      <meta charset="UTF-8">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      ......
   </body>
</html>

This is somewhat of a problem when FME Flow has no access to this location, as HTML pages displayed from FME Flow Apps in that case will show without this stylesheet, thus maiming the layout.

Are there alternatives for using this external stylesheet, like placing a copy of it somewhere on the FME Flow machine? Then the <head> of the HTML page could point to this local stylesheet.

The stylesheet contains a lot of information, so adding the contents of the stylesheet to the header of the HTML file does not look like a viable option.

An approach i’ve used has been to embed the CSS directly in the html

<html>
   <head>
      <title>Report</title>
      <meta charset="UTF-8">


      <style>
          h1 { 
            color: red;
            font-size: 30pt;
          }

          p { 
            font-family: Arial;
          }
      </style>


   </head>
   <body>
      ......
   </body>
</html>

It’s not an ideal approach, but does ensure you can use outputs of the HTMLReportGenerator in environments with locked down networks

I've been trying to add the stylesheet to my FME Flow repository, and accessing it from there, but this gives me an error when viewing the HTML: “Not allowed to load local resource”.

So the best solution for the short term is probably to embed the styles in the HTML file, like you suggested. Not ideal, not pretty, but it works. Thanks!

Does anybody have other ideas?

Community Stats

32,002
Posts
121,535
Replies
39,619
Members

Latest FME

Terms & ConditionsCookie settingsAccessibility statement
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.