Enterprise Architect version 13.5

download
purchase

enzh-CNcsnlfrdehiiditkoplptruskessv

My Profile

Social Media Channels

facebook google plus twitter youtube linkedin

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.

Published in Tutorials
Thursday, 02 March 2017 14:25

RepoDoc, a call for testing

Try RepoDoc, a new way of documenting your repository.

It’s easy to use, powerful and we offer it for free to anyone willing to test or help.

 

What is RepoDoc?

A document generator add-in for Enterprise Architect.

 

What makes it special?

  • uses Liquid templates that are easy to create, modify and maintain,
  • offers flexible repository filtering capabilities,
  • makes non-linear document generation possible,
  • supports a wide range of document formats including, but not limited to, HTML, LaTeX, PDF, Markdown, AsciiDoc, CSV, XML or JSON files, SVG, source codes in different languages,
  • contains a built-in post processor.

 

How can you help?

  • try it out and submit your wishes for a must/nice to have functionality,
  • write a new interesting template or let us know what kind of template would you need.

 

What you can achieve?

Here are few examples of documents, generated with RepoDoc. Find more at www.archimetes.com.

 

UML model overview (HTML)

htmldocument

 

Requirements catalogue (LaTeX)

latexdocument

 

Dependency graphs (DOT/Graphviz)

Dependencies between UML elements.

svgdocument

Dependencies between Archimate elements.

svgdocument

 

Class diagram overview (AsciiDoc)

generatedpdfdocument

 

Package list (JSON)

generatedjsondocument

 

Published in Community Resources

RepoDoc is a powerful document generator for Enterprise Architect able to produce a variety of document formats using plain text templates written in any text editor. It follows the same principles as the default document generator included in Enterprise Architect by taking:

  • Starting point in the repository determining the part of your model you wish to document i.e. a root package.
  • Document template that tells RepoDoc what to take out from the repository and where to put it into a document.

 

RepoDoc works with Liquid templates and allows you to generate your own customized HTML, LaTeX, Markdown or AsciiDoc documents, but also CSV, XML or JSON files, GraphViz graphs, SVG diagrams and even source codes in different languages. With RepoDoc you can also generate PDF documents easily using the built in post-processing feature.

Using a plain text template has several advantages:

  • Templates may be edited in any text editor,
  • Changes in the templates can be easily tracked and you can put them in a version control system,
  • Templates can be managed centrally by storing them on a shared filesystem so other users in the company can easily access them and use them in different projects.

 

Generating documents

To demonstrate the document generation we’ll use:

  • the pre-installed HTML document template for RepoDoc,
  • the standard EAExample.eap model that is shipped with every Enterprise Architect and is typically stored in the c:\Program Files (x86)\Sparx Systems\EA directory.

Please install RepoDoc first and follow these steps:

  1. Open the EAExample.eap model in Enterprise Architect and select the UML Modeling package in the Project browser.
  2. Right-click on the selected package and choose Extensions -> RepoDoc -> Control Panel. RepoDoc starts and presents itself with the Document generator form.
  3. Select the About dialog and click the Download license key button if your are using RepoDoc for the first time. Then switch back to the Document generator.
  4. Click the ... button in the first row and select the UML-model-documentation.html.liquid template from the dialog.
  5. Click the Generate document button. RepoDoc generates a HTML documentation for the UML Modeling package and outputs information similar to this one:

Document generator

Please see the user guide for further details and capabilities or visit as at www.archimetes.com.

 

Document examples

RepoDoc comes with several pre-installed document templates. You’ll find these templates in the RepoDoc installation directory or you can download the templates. The document examples based on these templates are depicted below.

 

1. UML model documentation based on the HTML template

htmldocument

 

2. Class diagram documentation created with the AsciiDoc template and Asciidoctor-pdf

pdfdocument

 

3. Element relationships across an Archimate model created with the DOT template and Graphviz