In this series, you will go through a number of articles which will display the basics of creating a report in the Web Report Designer. 

In this previous article, you learned how to create a brand new report and how the Detail1 band works. 

In this article, we will be building on the work you did and apply styling to the report. 

In the below image, you 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.

1. Select the Detail1 band. 

2. 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. 

3. Resize the band so it matches the size of the Name field. This removes the whitespace between the contact names.

4. Click the Preview button in the upper main toolbar to see the changes. The contacts will be a simple list of contacts.

5. Click the Designer button to return back to the Designer view. 

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. 

1. Make sure the Properties gear is selected in the right menu. 

2. Under Actions, select the icon to Insert Report Header Band.

3. On the left Toolbox, click and drag a Label control into the ReportHeader1 band. 

4. Double-click the label control and rename it to "Contacts List". It will eventually be made into a bigger font, so feel free to move and resize it.

5. 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 and made it 33 pts. I also changed its foreground color to blue. 

6. Resize the ReportHeader1 band so it fits the "Contacts List" label. 

7. On the left Toolbox, click and drag a Page Info control into the ReportHeader1 band, to the right of the Label.

8. 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.

9. 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.

10. Save your report, and then click Preview to see what it looks like.

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.

1. Deselect any control you have selected by selecting another band or the report itself. Under Actions, select the icon to Insert Page Header Band.

2. From the toolbax, drag in a Panel control. Resize it to fit the entire page. While it's selected, change its Background Color to a color of your choice. Feel free to resize the PageHeader1 band as well. 

The Panel control also allows you to group controls together.

3. Drag in three more labels directly into the panel. Rename them to: 

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. 

4. 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. 

Note that even though the labels and the fields are named the same things, they are completely different. The labels are for displaying the text typed into them, which is great for the header. However, the fields will show the data taken directly from the base table.

Just like the Page Header, we will add a Page Footer to put in the page numbers.

1. Under Actions, select the icon to Insert Page Footer Band.

2. Just like in earlier when working on the Report Header, drag the Page info control into the Page Footer.

3. Resize the Page Footer so that it fits the Page Info control.

4. If you wish to change the text on this, you can do so with Text Format String. However, there aren't many options. To have custom text, you can type into this field:

as shown below:

We're done with this lesson. In the next article, we will look into how to group your data in the report.