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…