Introduction

Version 11 of Sparx Enterprise Architect included significantly enhanced reporting facilities. This was worthy of some celebration, and so I contributed an article to the Sparx Community that illustrated the improvements through a couple of UML diagrams. This was quite well received, and resulted in me being featured in a Community Author Spotlight on sparxsystems.com (thanks, Scott)!

Subsequently, Sparx ran a fresh Webinar on the basics of reporting, with more advanced topics to follow.

Emboldened by all this action around reporting on models using the functionality that's already built into Sparx Enterprise Architect, I decided to apply immersive language learning techniques in both the refresh of our classroom based training materials, along with a brand new e-learning course (email us for details via This email address is being protected from spambots. You need JavaScript enabled to view it.). 

So the idea is to enable learning how to use Sparx Enterprise Architect through (UML) pictures. So what does that look like? Here is a taster, based around the "Publish as HTML" functionality of Sparx Enterprise Architect.

Overview of reporting

Sparx Enterprise Architect provides two built-in reporting mechanisms:

• Generate Documentation
• HTML Report 

About Generate Documentation

Generate Documentation is used to publish complete and fully formatted documents that are also suitable for printing in hard-copy. The use of report templates enables a fine degree of control over presentation of contents. Report contents can be selected, searched for and filtered. Sub-templates can be used to include contents based on advanced selections, SQL queries and/or scripted functions.

About Generate HTML Report

HTML Reports are used to publish models as a collection of HTML pages and images, automatically structured into a hierarchy of directories. HTML reports can be shared on a Web server, or conveniently zipped into an archive for distribution via email. HTML reports offer relatively limited support for customizing the report content and presentation when compared with the functionality for Generate Documentation.

Publish as  HTML process

1. You can right-click a package in the project browser, or right-click a Master Document element on a Documentation diagram, to begin publishing a HTML report. 
2. Click Documentation | HTML report. 
3. The Publish as HTML window is displayed. 

About the Publish as HTML dialog

The Publish as HTML window is relatively simple to navigate, assuming a top-to-bottom and left-to-right workflow. Let's get started with a scenario for publishing a basic HTML report.

Generate a HTML report

1. The Publish as HTML window is displayed.
2. Use the keyboard to type something like C:\Users\ccoates\Documents\MyReport into the Output to edit field.
3. Click Generate.
4. Click View.

Example HTML report

Your first report features the content of your model, formatted according to the default HTML template selections. This includes the Sparx Enterprise Architect logo branding. You can now continue to create a custom HTML template that will replace the default logo with customized company branding.

 Customize the header image

The task of adding a custom image logo into your HTML is covered in the following sections:

• Select your header image and re-publish 
• Problem: mismatched image and frame heights 
• Create HTML template 
• Modify the (cascading) style sheet 
• Re-publish and check image 
• The finished HTML report

Select your header image and re-publish

1. Use your keyboard to type something like C:\Users\ccoates\Pictures\example.jpg into the Header Image edit field (alternatively, you could click the ellipsis button and browse for an image file).
2. Click Generate.

Problem: mismatched image and frame heights

You will see that the Dunstan Thomas logo is too large to fit within the available frame. You could just re-size the logo image, but that might contravene the rules set by your companies marketing and branding departments. As a better alternative, you will now re-size the frame to fit around the selected logo image.

Create HTML template

1. Click to expand the Document Generation | Web Style Templates node.
2. Right-click Web Style Templates; a menu is displayed.
3. Click Create HTML Template.
4. Use the keyboard to type MyReport into the Enter Value edit field.
5. Click OK.

Modify the CSS (Cascading Style Sheet)

Change height of .IndexBody

1. The HTML and CSS Style Editor window is displayed. 
2. Click the CSS - Main item in the list of Templates. 
3. Press Control-F on your keyboard to start a text search, and then type ".IndexBody" and the enter key; refer to the section below about Find and replace, if you need more help. 
4. Use the keyboard to replace top: 61px with something like top: 91px (the actual pixel height will be custom_image_height + 1). 

Change height of .IndexHeader

1. Click inside the Current Modified Template edit field. 
2. Press the Control-F on your keyboard, and then search for the text .indexHeader; refer to the section below about Find and replace, if you need more help. 
3. Change height: 60px to match the height of your selected image, like in the example sequence diagram below. 
4. Click Save. 
5. Click Close. 

Find and replace

1. The Find and Replace window is displayed.
2. Use the keyboard to type .indexHeader into the Find what edit box.
3. Click (to set) the Match whole word check-box.
4. Click the Find Next button.

Re-publish and check image

1. Use right-click to open the Publish as HTML window.
2. Click Generate. 
3. Click View. 

The finished HTML report

The framing of the HTML page has been resized to fit the company logo. This concludes the basic introduction to how to create custom HTML report templates.