View Report: Tutorial_1-Building-a-Simple-Listing-Report
Download Report: Tutorial 1: Create Simple Listing Report (340 downloads)
In the previous lessons, we learned how to use BIRT set up the report so that it displays the right data in the correct sort order. Now we want to “Format the Report”. This lesson follows along with Task 7 of Tutorial 1, “Building a Simple Listing Report” in the Field Guide to BIRT.
This lesson on “Formatting the Report” will cover 4 mini-tasks on how-to:
1. Edit Text in the Column Headings
2. Format the Column Headings
3. Display the Contact first and last names on the same line
4. Increase the Space between the Rows.
We want more user-friendly “Column Headings” for our report so we need to make some changes to the labels in the header row of our table.
First, double click the label “CUSTOMERNAME” in the header row. This will allow you to move the cursor over the label for editing. Change “CUSTOMERNAME” to “Customer”.
Using the same process, change the original “PHONE” label from all CAP’s to “Phone” and “CONTACTFIRSTNAME” to “Contact”.
Now let’s take a look at how to “Format the Column Headings”.
There are 2 ways to format a Report Element like a Column Heading in BIRT.
1. You can do it directly in the Property Editor and the format only applies to the selected element or elements
2. You can define a Style and then apply that Style to one or more report elements. This way comes in handy in terms of speed and uniformity if your report formatting has lots of custom styles.
Select all 3 of the “Column Headings”. Just click on each of the “Column Headings” with the mouse as you hold down the SHIFT Key.
When you do that correctly, the Property Editor tab should read “Property Editor – Label”. Below the tab on the left side of the Property Editor window is a column of navigation buttons. If “General” is not selected, click “General”.
By default, the labels will be centered. Click the Align Left button to align the column headings to the left.
Then click the B button to set the font to bold for the column headings.
Once you are done with that, click anywhere in the white space outside the table to “deselect” the column headings.
As you can see, these changes are visible immediately in our Layout Editor.
You could use the direct edit method that you just used on the column headings on the next task of changing the background color of the header row, but, this time, try something different.
This time, use a style.
First, you need to define a “New Style”. Then, you can apply that “Style” to format a report element – like the header row.
From the main menu bar, select “Element” -> “Style” -> “New Style”.
A window opens called “New Style”. The “New Style” window opens by default on the “General” category.
In “Custom Style”, there is a “Name” field. This is where you need to name the “Style”. Make the name something descriptive and not “NewStyle1”. You always want to be able to identify the purpose of a style by its name. Descriptive names help when you come back to a report weeks or months after you’ve created it.
Name the Custom Style: “table_header_row”
Once that’s done, select “Background” from the list of categories on the left side of the “New Style” window.
Next to the “Background Color” property, you can either:
1. choose a color from a Palette by selecting the button or
2. choose a color from a list in the Drop Down menu.
Just don’t pick white or black — any other color will work fine.
With white, you won’t be able to distinguish the white header row from the white data rows. You want to set the header row apart to show its importance. With black, the font color of the column headings will blend into the background color of the header row and become invisible in the report.
Once you have a background color picked, click OK.
As it is, you can’t see the new “Style” because you’ve only just defined it.
In order to see the “Style”, you must apply it to a report element using the “Guide Cell”.
To see the “Guide Cells” of the table, you’ll need to select Table first. To select the Table, you need to hover your mouse over the lower left-hand corner of the Table and click the Table tab when it appears. The guide cells are the gray column on the far left side of the table.
Select the “Guide Cell” on the left side of the header row of the table.
In the Property Editor, select “Properties” from the 3 tabs near the top. Then select “General” to display the general properties for the header row.
Go to the “Style” property and click the drop-down menu. You should see “table_header_row” in the drop-down list. Select “table_header_row” to apply the style.
With the report still in Preview, BIRT displays the “Contact” column with the “First Name” above the “Last Name”.
In the Layout Editor, the first and last name appear with “CONTACTFIRSTNAME” above the “CONTACTLASTNAME”.
Inside one cell of our table, there are 2 data elements, “CONTACTFIRSTNAME” and “CONTACTLASTNAME”. BIRT Report Designer treats each of these fields as “Block-Level” HTML Elements for display.
If you know a little bit about HTML, then you may know that each “Block-Level” element starts on a newline.
For this exercise, we do NOT want the 2 names to be on separate lines. We want both names to fall on the same line.
There a couple of approaches to combining data elements on 1 line:
In the first approach:
You could display multiple data elements on the same line by using HTML to set them as inline elements.
The Help Contents Tutorial does NOT cover this in this exercise. Most likely because it opens the door to multiple new and slightly more advanced concepts rather than sticking to the basics.
We’re NOT discussing this, but I’ve included a screenshot here so that, if you look closely, you can try it out now if you want to.
In the second approach:
Concatenate the first and last name values to display as a single data element.
The Field Guide to BIRT in the Eclipse Help Contents discusses this approach in detail.
Next, double-click the data element “[CONTACTFIRSTNAME]”.
This opens a window called “Edit Data Binding”. A “Data Binding” is a core concept in BIRT. This “Data Binding” shows how a Report Element like “[CONTACTFIRSTNAME]” is associated with the “Customers” Data Set.
As the name implies, the “Expression Builder” Button takes you to a new window called “Expression Builder”. The “Expression Builder” has a text area at the top of the window where you can see the expression:
We are going to be adding to this expression.
To concatenate the first and last names, you can type this expression into the text area:
dataSetRow[“CONTACTFIRSTNAME“] + ” ” + dataSetRow[“CONTACTLASTNAME“]
Note that there is a space between the empty quotation marks (“ “) in the above expression. This puts a space between the first and last names so that the two names don’t run together.
I don’t recommend typing the field names in the “Expression Builder” because it’s a potential source for errors.
You can avoid errors in typing the field names by double-clicking a data field in the lower right hand section of the “Expression Builder”.
To access the fields from the Data Sets, click “Available Data Sets” in the “Category:” window on the lower left side of the “Expression Builder”.
This will reveal a list of any Data Sets that you can work with in the “Sub-Category:” window.
Click on “Customers” in the “Sub-Category:” window.
When you do this, the lower right side of the “Expression Builder “displays a list of available data elements to insert into the text area of the “Expression Builder”. You now can simply double-click the field name to insert the field.
You need to make sure that your cursor position in the Text Area of the “Expression Builder” is in a clear place.
If you leave your cursor in the middle of an existing data element, it’s going to push that new data element right into the middle of the old data element when you double-click the new field below. That’s going to cause errors in the report.
On a side note, there is a button on the right side of the “Expression Builder” just above the list of data elements that allows you to alphabetize the list of data elements. This doesn’t seem like much now with only 4 fields in the list. But, when you are working with a report that has 50 or more data elements that are listed in no particular order, alphabetizing the list is going to be a huge time saver.
If you are getting an error in the report after you try to set up the concatenation, start troubleshooting your spelling and punctuation in the “Expression Builder”. You should see this if it’s done right:
dataSetRow[“CONTACTFIRSTNAME“] + ” ” + dataSetRow[“CONTACTLASTNAME“]
The easiest way to avoid mistakes is to avoid typing in the data elements into the “Expression Builder” and pay attention to where the cursor is before you double-click to insert a data element.
Once you are satisfied that your expression is correct, click OK. That closes the “Expression Builder”. Click OK again to save the changes you’ve made and close the “Edit Data Binding” window.
CAUTION: If you don’t click OK and, instead, click “Cancel” or “X” out of the “Edit Data Binding” window, the changes you’ve made on the “Data Binding” will be lost and you’ll have to start over.
Once you’re back in the Layout Editor, click Preview.
When you look at the report, pay attention to the space between the rows.
INCREASES to ROW HEIGHT create more space above and below data elements in the row.
Let’s get back to our table in the Layout Editor.
Once you have the table selected, you want to select the “Guide Cell” located to the left of the “Detail Row”. In this lesson, the “Detail Row” is the one in the middle. Finding the “Detail Row” here was easy.
But, if you are not sure of the table row type, you can hover your mouse over the “Guide Cells” on the left side of the table. (BTW, this only works if you have the table selected.) When you hover, a little popup message shows what type of table row you have selected. The pop up will read, “Table – Header”, “Table – Detail”, or “Table – Footer”.
You can also look closely at the symbols on the Guide Cells .
Each symbol is unique and represents a miniature table. Note where the color yellow is on these symbols. The yellow area for the Header Row “Guide Cell” is at the top of the symbol (like a header is at the top). The yellow area for the “Detail Row Guide Cell” is centered and covers the entire symbol using mini yellow lines. The yellow area for the “Footer Row Guide Cell” is located at the bottom of the symbol. This coding is pretty intuitive if you just look closely.
Once you have selected the “Guide Cell” to the “Detail Row”, look at the Property Editor.
The Property Editor tab should read “Property Editor – Row”. For future reference, the title that appears in Property Editor tab shows the type of element that you selected.
You have successfully completed the task of “Formatting the Report” in BIRT.