Tuesday, 26 September 2017 06:00

Editing an HTML report generated from Enterprise Architect using CSS

Written by
Rate this item
(1 Vote)

Editing an HTML report generated from Enterprise Architect using CSS

Introduction

This article will walk you through the process of making a couple of simple tweaks to your HTML Report generated from Sparx Systems Enterprise Architect.


So what's the challenge here?

If you have ever needed to create a quick and simple report to walk a colleague or stakeholder through certain aspects of your model, then by far the quickest and easiest route is to generate an HTML Report from EA.

This will create an HTML version of your project locally that can be navigated & drilled down into (but not updated etc). When creating this report, you have the option to include your own logo as a way of adding a little bit of an extra visual engagement to your publication.

The challenge that you can, and will likely, run into is that there is a set size for the logo that EA does not tell you about and you will not see the effect of until you view the report and see that your logo is cut off by content.


How do I fix this?

To start you will need to generate an HTML report from your model. If you are not sure of how to do this simply right click the root node of your model in EA and choose “HTML Report” from the menu…

Editing an HTML report generated from Enterprise Architect using CSS

When you click this option you will be presented with the following dialog…

Editing an HTML report generated from Enterprise Architect using CSS

In this dialog check all the options that you want to include in your report and specify your output destination folder and your logo image. When ready, click “Generate” and you will have a progress bar pop up momentarily while EA generates your report.

When this process has finished you can either click “View” or navigate to your Output folder & open the file “Index.htm” (there will be other files & folders generated as well but for now this all you will need).

When opened you will see something like this….

Editing an HTML report generated from Enterprise Architect using CSS

As you can see, the logo is too big for the report and there is no way to address this issue inside of EA.

So what do we do?


The Solution!

The first thing we do is to open up the HTML report using Chrome. This itself posed its own challenge initially as out of the box Chrome does not really support file based URLs, but there is a work around for this (thanks to Phil Chudley for showing me this).

Firstly, find your shortcut for Chrome, right click it and choose “Properties”. When the Properties window appears locate the section labelled “Target” and add the following to the end of the information there:

--allow-file-access-from-files

Make sure that you include a space between …chrome.exe” and the string shown above for this to work.

Editing an HTML report generated from Enterprise Architect using CSS

We now need to make some changes to the HTML report.

Earlier I mentioned that there are several files generated at your output destination when you create this HTML report. One of those folders is titled CSS and contains two files, you will need to open the “ea.css”, personally I use Notepad for this but there are a host of tools you could use.

With your CSS file open and with Chrome displaying your report it’s time to start editing.

Hover your cursor over your logo, right click and choose the “Inspect” tool…

Editing an HTML report generated from Enterprise Architect using CSS

This will open up a new Chrome window displaying the developer tools…

Editing an HTML report generated from Enterprise Architect using CSS

The sections that we will need to pay attention to are:

  • IndexHeader; this will be apparent immediately if you choose to inspect the logo
  • IndexBody; you will see this below IndexHeader but you will also need to expand this section clicking the triangular icon to the left of it to expose the other areas we need:
    • tocIFrame; this is the section of the page containing the model tree in your report
    • contentIFrame; this is the main section of your report that displays your information

.IndexHeader

Editing an HTML report generated from Enterprise Architect using CSS

This is the CSS controlling the display of this section of the report. The important factor here is the height property. As you can see, it is by default only 60 pixels tall and in our example the logo is larger than this.

To adjust this click into the area where it displays “60px”. You can overwrite this with your desired figure or you can adjust it your logo by using the up arrow to increase the height one pixel at a time. In our example I changed mine to 91px.

With your ea.css file open you will need to find .IndexHeader in there and adjust the height to your new value. Save but don’t close your ea.css file.

You will, for now, still see something similar to this…

Editing an HTML report generated from Enterprise Architect using CSS

What we now need to do is make the body of our report work with the changes that we have made to the header.

To do this we need to make some changes to the section of the CSS for .IndexBody

.IndexBody

Using the developer tools window you now need to pay attention to the CSS for this section…



The change we need to make here is to the position attribute from position: absolute; to position: inherit;

You will see that this changes the position of the body of the report allowing the header section to be fully displayed along with our logo...

Editing an HTML report generated from Enterprise Architect using CSS

Make sure to adjust this section in your ea.css file & save.

You will notice that this has created a new issue in that the frame housing our table of contents has now shrunk. You can still expand and use this section as you normally would however it quickly results in excessive scrolling. This is something that we don’t want and so we will need to make a couple more changes to fix this.

#contentIFrame

This is the frame that displays our content & in the developer tools it will look like this…

Editing an HTML report generated from Enterprise Architect using CSS

In the developer tools this section will appear grey and so cannot be edited there. Instead you will need to locate this section in the ea.css file and make the change there without previewing it.

The change that you will need to make is to the attribute height: 100%; to instead be height: -webkit-fill-available; as shown above. Then save your ea.css file. This will set the size for the main display frame.

Next we need to look at the frame for the table of contents.

#tocIFrame

To make our Iframe look correct we will need to make the same change as we have just made to the content frame…

Editing an HTML report generated from Enterprise Architect using CSS

Again the change that you will need to make is to the attribute height: 100%; to instead be height: -webkit-fill-available; as shown above.

Then save your ea.css file.

You have now completed the changes necessary to have your HTML report display properly and with your own logo. From now on you will see something akin to this upon opening…

Editing an HTML report generated from Enterprise Architect using CSS

Everything is now exactly where you would expect it to be and in a useable fashion.

There is something to bear in mind should you choose to use this method. If after following this method, you need to make changes to your model & regenerate the HTML report to the same output destination then your changes to the CSS will be overwritten as well.

To get around this, before you regenerate your HTML report simply rename the ea.css file to something else e.g. ea – NEW.css and then regenerate the report.

What you find now is that in the CSS folder in your output destination there will now be another file called ea.css and this is the one that the report will default to. Simply delete this file and rename the ea – NEW.css file back to ea.css having done this your updated report will open & use your modified CSS still.

Obviously there is a lot more styling you could apply by using the CSS, this is just a simple fix for a particularly common bugbear with the HTML Report.

You can find more content like this on our YouTube channel, Facebook and Twitter.

Read 10246 times Last modified on Monday, 02 October 2017 21:58
DT_Sam

Sam Nice

Dunstan Thomas Consulting

4 comments

  • Comment Link wikitect Thursday, 01 March 2018 09:38 posted by wikitect

    As Guillaume points out it is much better to edit the web style template within EA itself rather than post-process the output.

    The styles are contained in the CSS - Main template section of the web style template.

    The article advises changes to 4 CSS style definitions to accommodate the graphic. If you want the graphic to fit an easier way to achieve this would be to scale the graphic itself using CSS i.e. a change to 1 CSS style definition - IndexHeader img.
    Depending on whether you want to fix the height and let the width change or fix the width and let the height change you can use something like img {max-width: 100%; height:auto;}

    See https://www.w3schools.com/Css/css_rwd_images.asp

  • Comment Link DT_Sam Wednesday, 04 October 2017 15:01 posted by DT_Sam

    Hi Guillaume

    I've found that now, I think that's a great way to make these changes if you already know what you need to change ahead of generation.

    I think by taking into account the issues I had & the method you've mentioned you've given me a good idea for a follow up article ;)

    Catch you at the next user group
    Sam

  • Comment Link Guillaume Wednesday, 04 October 2017 10:01 posted by Guillaume

    Thanks for sharing this info Sam.
    EA lets you define custom CSS before running the HTML report. In the resources view, under Doc Generation > Web Style Templates, create a new one.
    You then can change parts of your CSS (as well as HTML & JS) to include the logo fix you shared.
    When running the HTML export, you can select your web style from the associated drop down list.

  • Comment Link Guillaume Wednesday, 04 October 2017 10:01 posted by Guillaume

    Thanks for sharing this info Sam.
    EA lets you define custom CSS before running the HTML report. In the resources view, under Doc Generation > Web Style Templates, create a new one.
    You then can change parts of your CSS (as well as HTML & JS) to include the logo fix you shared.
    When running the HTML export, you can select your web style from the associated drop down list.

Login to post comments