This series covers the basics of creating a report in the Web Report Designer. In the previous article, you learned how to create a brand new report and how the Detail1 band works.
In this article, you will build on the work you did and apply styling to the report.
Resizing Bands
In the below image, the Detail1 band is too tall, resulting in a lot of whitespace between each record listed in the report.
To resize any band, you must select it first by clicking on the band. If you do not select it, then you will not be able to resize it.
Once selected, you can hover over the bottom border of the band, and the mouse cursor transforms into a down arrow which allows you to click and resize the band.
Resize the Detail 1 band
Select the Detail1 band.
You will not be able to resize the band from the top, you can only do it from the bottom. So you need to move the Name field to the top of the band.
Resize the band so it matches the size of the Name field. This removes the whitespace between the contact names.
Click the Preview button in the upper main toolbar to see the changes. The contacts will be a simple list of contacts.
Click the Designer button to return back to the Designer view.
Adding A Report Header Band
To make the report look more like a report, we will add a header to it, and throw in a date as well.
First, start with a report header, a band which will appear at the top of the report and doesn't repeat on subsequent pages.
Make sure the Properties gear is selected in the right menu.
Under Actions, select the icon to Insert Report Header Band.
On the left Toolbox, click and drag a Label control into the ReportHeader1 band.
Resize the label control and double-click it to type the text "Contacts List" into it.
With the label control still selected, you can alter its properties in the Properties panel. Under Appearance, you should find a section called ► Font. Expand it, and change the font and the size.
The above image shows more attributes you can change. Feel free to experiment with the look of this label. In my example, I changed the font to Georgia, made the size 33 pts, and changed the foreground color to blue.
Resize the ReportHeader1 band so it fits the "Contacts List" label.
On the left Toolbox, click and drag a Page Info control into the ReportHeader1 band, to the right of the Label.
The Page info control holds a lot of useful information about the report itself. When first dragged in, it defaults to showing the page number.
With the Page Info control still selected, change the Page Information to show the Current Date and Time. You will find this property under the Actions header.
You can also change the Text Format String so it displays in the proper date format you want.
Save your report, and then click Preview to see what it looks like.
Adding A Page Header Band
Our list should show more than just a name. It should also include phone number and email. Before we add those fields, we will add a page header band to make column headings for the data we will eventually show.
Unlike the Report Header Band, the Page Header Band appears on every page.
Deselect any control you have selected by selecting another band or the report itself.
Under Actions, select the icon to Insert Page Header Band.
From the toolbax, drag in a Panel control.
Resize the panel to the same width of the page. While it's still selected, change its Background Color (under Appearance) to a color of your choice. Feel free to resize the PageHeader1 band to fit the newly resized panel.
The Panel control also allows you to group controls together. This will be used as the header for the columns. Drag in three more labels directly into the panel. Rename them to:
Name
Phone
Email
NOTE: If you wish to utilize the copy and paste feature with in the web report designer, it can be a bit tricky. First, you must select the control you wish to copy and click the Copy icon in the top main toolbar.
Once copied, the Paste icon is greyed out. That's because you need to select the band where you wish to paste first. Once you select the band, the paste icon is enabled and you can paste.
And now, just like you did with the Name Field, go to the Fields List, and from the Contacts table, drag in the Phone field and Email field into the Details1 band. This defines what each row looks like. (If you recall from the previous article, you need to select the database icon to find the tables and fields.)
NOTE: Don't confuse the labels with the fields, even though they are named the same. The labels are for displaying any text the user types into them. The fields, however, will show the data taken directly from the base table. They also have little icons indicating they are fields.
When you preview the list now, you will get something that looks similar to this:
If some of the names, phone numbers, or emails wrap to the next line, feel free to make the fields wider.
Adding A Page Footer Band
Just like the Page Header, we will add a Page Footer to put in the page numbers. (Remember to swith the panel back to the gear symbol, and have no control selected).
Under Actions, select the icon to Insert Page Footer Band.
Just like in earlier when working on the Report Header, drag the Page info control into the right hand side of the Page Footer.
Resize the Page Footer so that it fits the Page Info control.
If you wish to change the text on this, you can do so with Text Format String. Click the ellipsis to open the Format String Editor, and then select the General tab.
For Prefix, type in "
Page". Note the space after it.
For Suffix, type "
of {1}", again keeping the proper spacing.
Click OK, and there will now be a page count at the bottom of each page of your report.
Save your report.
We're done with this lesson. In the next article, we will look into how to group your data in the report.