LogoASPAlliance: Articles, reviews, and samples for .NET Developers
Designing Crystal Reports for Users
by Jeff McWherter
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 52896/ 80


Designers are not born with this skill; they learn it just as programmers learn to program. This article will expose developers to techniques that designers use to create GUI's that are aesthetically pleasing to users. Reports are often thought of as the GUI to information, but they are much more. Reports are a representation of a product, a point in time, or even an employee. Reports should be pleasing to the user's eye, even if they contain data that will upset the user. Techniques in this article will be applied to Crystal Reports, but the concepts and tools can be applied to most GUI's. Disclaimer -I by no means call myself a designer, but have been trapped as many developers are by being asked to deliver reports to clients that contain complex logic and look as if they could be hung in a museum next to a Dega.

Tools of the Trade

Image Editors

Adding simple images such as rounded corners to a data section, a company logo in the header, or a relevant product image in a group can change the interpretation of a report for the better. You do not have to take out a second mortgage on your house to afford a decent image editor either. Tools, such as Adobe Fireworks, Photoshop and Illustrato,r are great for designers, but for a developer who is not going to use many of the tools included in those products, they are overkill. I recommend a product such as or GIMP, both are free and in most situations contain more than enough tools to accomplish what you need. After you have downloaded an editor, spend some time in it and learn your way around. No matter which product you choose for image editing, there are a lot of online tutorials that will help you learn how to apply effects to images. 

Color Schemes

When I sit down to develop a report, the first thing I think about is the data, where it is coming from, how to group it and how to get it into the report (obviously I am a developer). The second thing I think about is the color scheme. Many corporations may ask that you use their company colors, but many times reports can benefit with more colors that are shades of the corporate color scheme.

When I have to design a report from scratch with no predetermined color scheme, I start off by looking at Adobe Kuler. This site contains hundreds of color schemes; the experience reminds me of going to the local home improvement store and looking through all of the sample paint swatches. Each color sample is rated, and I usually look at the top rated schemes since I do not have a good eye for color combinations, I put my trust into the experts.

If I have a color that I know that I need to work with, often times I will use the color schemer web site. This site enables you to enter an HTML HEX color code and the site will provide you a scheme. There are even options to lighten and darken the scheme if you choose.

Stock Photos

Adding high quality and meaningful images can really spice up a report. Having a repository of images is a handy tool. Sites such as iStockPhoto and Stock Exchange allow you to place images on your reports royalty free. Before placing images on reports, make sure to read the license. Many of the image licenses allow placement in digital format on websites, presentations and reports, but do not allow for placement as endorsements or in company logos.

Design Basics

The Users

The users of your reports are usually in a hurry. They do not have time to read everything on the report, and often just scan the report and find the pertinent information. It is very important that you take this into consideration and create a clear visual hierarchy in the report. Reports should be broken down into a clearly defined header, body and footer. The header should contain data such as the title and filter criteria. The body should contain the report data sorted into a logical hierarchy that is easy for the user to read. The footer should always contain the page number and the date/time the report was created.

Figure 1: A clearly defined report hierarchy

The report above was created using only the tools and techniques we have discussed so far. The images were downloaded from Stock Exchange, the color scheme was created using Adobe Kuler, and Paint .net was used to create the images with rounded corners. Notice the hierarchy of this report. Often times when printing product images or employee images within a group, it is difficult to maintain an easy-to-understand hierarchy. In Figure 1, you will notice the employee information and sales numbers are indented slightly to the right to make the hierarchy visible.

How to Get your Message Across

When creating your reports, keep the message you want to convey in your mind as a priority. This message may be as simple as "Sales by Quarter" or maybe "Order Fulfillment." If the message of your report is "Sales by Quarter" I would assume the total number of sales would be a vital piece of information. The message should be displayed near the top of the report allowing the user to see the message right away. If the message is "Order Fulfillment," you may want to fit as many orders on the same page as possible. Report names are important when trying to get your message across. If a user does not know what data is contained in a report based on its name, it is a sign you are not getting your message across. If you have reports that do not allow filter criteria, but that are filtered by a value, include it in the report title i.e. "Order Fulfillment for Current Year."

Figure 2: Getting your message across

The report in Figure 2 contains a large amount of data, with a very clear message. The alternating row color also improves the readability of the data.

To add alternating row color to your report, in the Section Expert choose the color tab for the details section and click the formula (the X+2) button.

Figure 3: The Section Expert

Figure 4: Alternating row color formula


Large Amounts of Data

Often times when reports are created, they are not developed using a dataset that is representative of production data. This causes issues in design when you only expect to render a small set of data. For example, an "Order Fulfillment" report has the potential to be a very large report depending on the number of orders. Since this report may contain many line items, you will want to take care that each line item does not take up any extra space. If you are not using data that is representative of production, you may run into issues with overlapping fields, incorrectly formatted fields, unexpected page breaks, hundreds of pages, and performance issues.

Figure 5: Overlapping fields

Field Formatting

Pick a common format for your field values and stay consistent with this format through all your reporting applications. If you decide negative numbers should be enclosed in parentheses and the font should be red, stick with this format throughout every report in your application. In most business cases a negative number is a bad sign. I have found that users react better to negative numbers with a font color that is maroon instead of "fire engine red."

Figure 6: Maroon instead of "fire engine red"


Ensure your fields only take up as much room as they need, this helps keep reports clean.

For reports with large amounts of data use a small font such as 10pt.

Select the "Can Grow" option for large data fields.

Set tool tips to describe complex fields in more detail.

Logical Grouping of Data

The flow of most reports depends on how the data is grouped, how the data is sorted, and whether the data is contained in a cross-tab. Sometimes these questions are addressed in the business requirements, other times it may be upon the developer to make these decisions. At the minimum, developers should take care in ensuring that all data is sorted logically and consistently. Grouping data allows reports to be read easier.

Grouping by Field

Grouping data by fields allows analysis of the field summarized into a logical grouping.

Figure 7: Orders grouped by order month


Cross Tabs

A cross tabulation is a densely populated report or matrix (a rectangular table of elements or entries). Cross tabs resemble spread sheets, and if you are working with data that requires multiple cells that make up a grid consisting of rows and columns, a cross tab is the best tool for the job. 

Figure 8: Orders grouped by order month in cross tab


Crystal Reports Design Specifics


As a general rule of thumb, it is best to keep the default of 1" margins for top, bottom, left and right. In some cases you many need to decrease the size of the margin for your entire report to fit on the page, but be aware that this may cause issues on some printers. I have found different printer manufactures handle margin sizes differently which has caused me enough pain to try to keep margins to the default. Another tip about margins - if you need to change the default margin size, change them on the report file, not via code. The code below makes it very difficult to diagnose margin issues on reports.

Listing 1 - Code for setting margins

PageMargins margins;
margins.topMargin = 8
margins.leftMargin = 7


Using templates helps with one of the most important aspects of delivering a design-rich reporting solution, which is being consistent. Report templates are existing Crystal Report (.rpt) files which will allow you to "inherit" many design related formatting settings, including:

·         Page headers and footers

·         Color formatting

·         Charting settings

·         Lines, Borders and Boxes

·         Logos and images

·         Addition of Standard Functions

·         Addition of Special Fields

·         Field highlighting

Templates can be created and applied to reports from the "Template Expert" found on the report menu.

Dynamic Images

In the past it was difficult to change images based on some sort of criteria, but Crystal XI gave us dynamic images which makes this task trivial. If you are creating a "Product detail" report, adding an image of the product can add the type of style you are looking for.

Figure 9: Dynamic Images

To add dynamic images to your report:

·         Add an image to your report.

·         Right click on the image and selected "Format Graphic."

·         On the "Picture Tab," Click the formula button (X+2 button).

Figure 10: Graphic location

figure xx.png

·         Select a field or create a formula for your image path.

Figure 11: Graphic location formula



Reports are often thought of as an afterthought of a database system. Often budgets do not allow for a great deal of time to spend on the design of the reports. Using the techniques above will allow you to create reports that are rich in design without a large time investment. Crystal Reports provides many tools to make reports rich in design, but it is ultimately up to you to make the design decisions.

This article only scratches the surface about design. Creating reports that are rich in design takes practice, over time the design decisions will become easier.

Product Spotlight
Product Spotlight 

©Copyright 1998-2022  |  Page Processed at 2022-08-15 8:53:25 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search