HTML Report 2, Electric Boogaloo

As a sequel to my previous article on how to edit the CSS generated by Enterprise Architect to personalise your generated HTML report I was prompted by Guillaume to create this follow up as he gave me an idea on how to make these changes prior to generation. As we have already identified the changes that we need to make in the previous article we can actually create our own customised version of the CSS EA would use and specify that this is then used as we create our HTML report.

So how do we do this?

Keeping in mind the list of changes that we need to make:

1. Change the attributes for .IndexHeader so that the logo fits within the header of the report.
2. Change the attributes for .IndexBody to cater for the changes that we have made to the header.
3. Change the attributes for #contentIFrame so that the content section of the report fills the correct amount of the screen.
4. Change the attributes of #tocIFrame so the table of content is displayed correctly.

With these changes in mind we are ready to get to work on defining our template. To do this you will need to fire up EA. At the bottom of your project browser you will see a tab labelled Resources, click this…

Having clicked this your view will change to…

You will then need to click into the section for Document Generation…

Next, right click Web Style Templates and choose Create HTML Template. This will bring up the following dialog…

Enter a name for your new template and a new window will open…

You can select any of the options listed in the left hand pane for editing by simply clicking on them. As the changes we are looking to make are relatively simple the only option that we need to concern ourselves with is CSS – Main. Click this option and you will see the following…

You will then see the CSS display itself in the right hand pane, navigate to the areas of interest by pressing ctrl+f and entering the headings outlined earlier. Clicking on the find next button will take you to these areas in the CSS and you can make the necessary changes. Once you have made the changes click save and then click close. With these actions complete you are now ready to generate a new HTML report that will automatically use your custom CSS.

As before right click on your project in the project browser and choose HTML Report…

Clicking this will display the familiar dialog…

Under the Style option you will now be able to have a drop down menu that will list the names of any custom templates that you have created. For this example, I have changed the style to be the CUSTOM template created earlier in this article, this means that when we generate our report EA will now use our predefined custom CSS rather than the standard set. We also need to specify our logo as before, then click Generate.

The result is that our HTML report has been generated with no changes to be made and that we can re-use our template every time that we need to create this kind of report…

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…



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



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



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.



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…



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



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

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…



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



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…



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…



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…



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.