Previous TopicNext Topic


Tutorial 1: Building a simple listing report

This section provides step-by-step instructions for building a report that lists customer names, phone numbers, and contact names. The report uses data from the sample database supplied with BIRT Report Designer, Classic Models. The following illustration shows a portion of the finished report.

In this tutorial, you perform the following tasks:

Task 1: Create a new project

Eclipse organizes files by projects. You can create one project to organize all your reports or create multiple projects to organize your reports by categories. For each project that you create, Eclipse creates a directory in your file system.

If you are using BIRT RCP Report Designer, do not perform this task.

  1. Choose File->New->Project.
  2. New Project displays the types of projects you can create.

  3. Expand Business Intelligence and Reporting Tools, select Report Project, then choose Next.
  4. New Report Project appears.

  5. Type the following text as the project name:
  6. My Reports 
    
  7. Choose Finish.
  8. The project appears in the Navigator view.

Task 2: Create a new report

You can create a report in the following ways:

For this tutorial, you start with a blank report design.

  1. Choose File->New->Report.
  2. New Report appears. The following illustration shows the window that appears in BIRT Report Designer. New Report is slightly different in BIRT RCP Report Designer.

  3. Under Enter or select the parent folder, select the project you just created. This step applies to BIRT Report Designer only.
  4. Type the following text as the file name:
  5. Customers.rptdesign 
    
  6. Choose Next.
  7. New Report provides options for starting with a blank report, as well as several report templates.

  8. Select Blank Report, then choose Finish.
  9. Your new report appears in the main window. This window displays the layout editor, as shown in the following illustration.

    The rest of this tutorial provides the detailed steps for creating the customer report.

Task 3: Build a data source

Before you begin designing your report in the layout editor, you build a data source to connect your report to a database or other types of data sources. When you build a data source, you specify the driver class, data source name, and other connection information, such as user name and password. For this tutorial, you use the sample database, Classic Models, that is already configured for use with BIRT Report Designer. You do not need to specify the connection information for this sample database.

  1. Choose Data Explorer.
  2. If you use the default report design perspective, Data Explorer is on the left, next to Palette. If it is not open, choose Window->Show View->Data Explorer.

  3. Right-click Data Sources, then choose New Data Source from the context menu.
  4. New Data Source appears.

  5. Select Classic Models Inc. Sample Database from the list of data sources, use the default data source name, then choose Next.
  6. New Data Source displays connection information about the new data source.
  7. Choose Finish.
  8. BIRT Report Designer creates a new data source that connects to the sample database. It appears within Data Sources in Data Explorer.

Task 4: Build a data set

Now, you are ready to build your data set. A data set, or query, specifies the data to retrieve from the data source. If your report connects to a JDBC data source, you use a SQL SELECT statement to specify the data to retrieve.

  1. In Data Explorer, right-click Data Sets and choose New Data Set from the context menu.
  2. New Data Set appears.

  3. Type the following text for data set name:
  4. Customers 
    
  5. Use the default values for the other fields.
    • Data Source shows the name of the data source you created previously.
    • Data Set Type specifies that the data set uses a SQL SELECT query.
  6. Choose Finish.
  7. Edit Data Set appears.
  8. On the right side of Edit Data Set, type the following SQL SELECT statement to specify the data to retrieve:
  9. SELECT customerName, 
    contactLastName, 
    contactFirstName, 
    phone 
    FROM Customers 
    
    This statement gets values from the customerName, contactLastName, contactFirstName, and phone columns in the Customers table.

  10. Choose Preview Results to make sure the query is valid and that it returns the correct data.
  11. If you typed the SELECT statement correctly, you should see the following results. These are the data rows that the query returns.

  12. Choose OK.
  13. The layout editor appears.

Task 5: Lay out the report

In this procedure, you insert elements in the report page to display the data from the data set you created previously. You start by inserting a table element, then inserting data elements in the table. It is important to understand the functionality that the table provides.

Task 6: Sort the data

When you first create and preview a report, the report displays the data rows in the order that your query returns them. The order can vary, depending, for example, on how data was supplied in the data source. In most cases, you will want to change the order in which data appears in the report.

  1. Choose Layout to return to the layout editor.
  2. Open Property Editor, if necessary.
  3. If you use the default report design perspective, Property Editor appears below the layout editor. If it is not open, choose Window->Show View->Property Editor.
  4. In the layout editor, select the table by selecting the Table tab in the lower left corner. This tab appears when you hover the mouse over this area.
  5. Property Editor displays the properties for the table.
  6. Choose the Sorting tab at the bottom of Property Editor.
  7. The Sorting page appears.
  8. Choose Add to create a sort expression.
  9. A row appears under Sort Key.
  10. Click in the row under Sort Key, then select the arrow button that appears, and select customerName from the drop-down list.
  11. Use the default Ascending value for Sort Direction.
  12. Preview the report. The sorted data appears in ascending order by customer name.
  13. Notice that names with uppercase letters appear at the top of the list. BIRT sorts string data by UCS2 code point values. In ASCII-based character sets, uppercase letters have lower code point values than lowercase letters. Therefore, uppercase letters appear before lowercase letters.
  14. To sort the customer names case-insensitively so that ANG Resellers appears after American Souvenirs Inc rather than before, specify the following expression as the sort key:
  15. row["customerName"].toUpperCase( ) 
    
    This expression uses the JavaScript toUpperCase( ) function to convert all the customerName values to uppercase before sorting.
  16. Preview the report. The customer names appear in a different order. Names with uppercase letters do not appear at the top of the list.

Task 7: Format the report

Now that you verified that the report displays the correct data in the correct order, you can turn your attention to improving the report's appearance. You perform the following tasks in this section:

Edit the column headings

  1. Choose Layout to return to the layout editor.
  2. Double-click the first column heading, customerName.
  3. BIRT Report Designer highlights the text.
  4. To replace all the text, start typing, then press Enter when you finish. To edit the text, click once to deselect the text, then position the cursor where you want to delete or add characters.
  5. Replace customerName with the following text:
    Customer 
    
  6. Repeat the previous steps to change the second and third column headings to the following text:
  7. Phone 
    Contact 
    
    The report design should look like the one in the following illustration.

Format the column headings

To format a report element, you set its properties. You can accomplish this in two ways:

In this procedure, you use the first method to set the column headings to bold, and the second method to add color to the header row.

  1. To set the column headings to bold, using Property Editor:
    1. Select all the column headings. To select multiple elements, press the Shift key as you click each element.
    2. Property Editor displays the properties for the selected elements.

    3. Choose B to format the column headings as bold text.
    4. The column headings appear in bold.
    5. To deselect the column headings, click the white space outside the table.
  2. To add a background color to the header row, using a style:
    1. From the main menu bar, choose Element->New Style.
    2. New Style appears. The left side displays the property categories. The right side displays the properties for the category you select.

    3. For Custom Style, specify the following name for the style:
    4. table_header_row 
      
    5. Choose Background from the list of property categories.
    6. New Style displays the background properties you can set.
    7. Specify a color for the Background Color property, using one of the following methods:
      • Select the button next to the property, then select a color from the color palette that appears.
      • Select a color from the drop-down list.
      Choose OK.
    8. In the layout editor, select the table by selecting the Table tab in the lower left corner. This tab appears when you hover the mouse over this area.
    9. Guide cells appear at the top and left side of the table.

    10. Select the guide cell next to the header row.
    11. The header row is selected. Property Editor displays the properties for the row.
    12. If necessary, choose Properties then General to display the general properties for the row.
    13. Apply the style you just created by selecting table_header_row from the drop-down list next to Style.
    14. BIRT Report Designer applies the style to the header row and it appears in color.
  3. Preview the report. The report should look like the one in the following illustration.
  4. So far, the main improvement is that the headings are clearly visible and defined.

Display first and last names on the same line

When you place multiple elements in a single cell, BIRT Report Designer creates block-level elements. If you are familiar with HTML, you know that each block element starts on a new line. To display multiple elements on the same line, you need to set them as inline elements.

Alternatively, you can concatenate the first and last name values to display in a single data element, as described in this procedure.

  1. Choose Layout to return to the layout editor.
  2. Delete the data element that displays the contact's last name.
  3. Double-click the data element that displays the contact's first name.
  4. Expression Builder appears. The field name expression appears in the top of the window.
  5. To concatenate the first and last names, specify the following expression:
  6. row["contactFirstName"]+" "+row["contactLastName"] 
    
    The empty quotation marks (" ") add a space between the first name and last name. You can type the expression in the top of the window, or double-click an item in the lower right of the window to insert it in the expression.

  7. Choose OK.
  8. Preview the report. The report should look like the one in the following illustration.

Increase the space between rows

The default layout adds a minimum space between table rows. Typically, you will want to adjust the spacing between rows.

  1. Choose Layout to return to the layout editor.
  2. Select all the cells in the detail row, the middle row. To select multiple cells, use Shift-click. Be careful to select the cells, not the data elements in the cells.
  3. A box appears around the selected cells.

    Property Editor displays the properties for the cells. The title that appears in Property Editor shows the type of element you select, so you should see Property Editor - Cell.
  4. Choose Padding.
  5. Property Editor displays the padding properties. These properties enable you to specify the amount of space to add to the top, bottom, left, or right of the element.
  6. Set Padding--Top to 12 points.
  7. At this point, you might wonder why you did not just select the row to adjust the row spacing instead of selecting the individual cells in the row. BIRT Report Designer does not support row padding because some browsers do not support this feature.
  8. Preview the report. The report should look like the one in the following illustration. There is more space between the rows of data.

Task 8: Create a report title

All your report needs now is a title. To display a title, you can use either a label element, a text element, or a data element. The primary differences among the elements are:

In this procedure, you use a text element and HTML tags to format the text. Note that you are not required to use HTML to create formatted text. If, however, you are well-versed in HTML or web design, you might prefer typing HTML to create a block of formatted text.

  1. Choose Layout to return to the layout editor.
  2. Choose the palette, if necessary.
  3. Drag the text element from the palette and drop it above the table.
  4. Edit Text Item appears.
  5. Select HTML/Dynamic Text from the drop-down list that displays Plain Text.
  6. When you select HTML or dynamic text, you can embed HTML tags or CSS properties in the text. You can type the tags manually or you can insert the commonly-used HTML tags that the text editor provides.
  7. Supply the following text in the text area:
  8. <CENTER><B><span style="font-size: larger"> 
    Customer List 
    </B></span><BR> 
    <FONT size="small">For internal use only</FONT><BR><BR> 
    Report generated on <VALUE-OF>new Date( )</VALUE-OF></CENTER> 
    <BR><BR> 
     

  9. Choose OK, then preview the report. The report should look like the one in the following illustration.

As you can see, using the text element with embedded HTML enables you to:

Alternatively, you can use:

Next steps

You just built your first report and worked with some of the basic tools and features of BIRT Report Designer. There are many more tasks you can accomplish to build more sophisticated reports. Some of these tasks include:

 


(c) Copyright Actuate Corporation 2006

Previous TopicNext Topic