This series covers the basics of creating a report in the Web Report Designer. In the previous article, you learned some styling techniques to apply to controls via their properties.
In this article, we will look at how the web report designer allows you to control and organize information by creating and sorting Groups.
What Are Groups
A group allows you to categorize information and group them together based on identical values.
Taking our example data, we can organize the contacts based on city.
Ashland
Chicago
Los Angeles |
We could even use multiple groups to further organize this list by using even more criteria - sales rep, active status, or company name, just to list a few.
Create a Group Header
As in the above example, we will group our contacts by city. First, we need to drag in the city field.
Rearrange your PageHeader1 and Detail1 bands to make room for a new field.
From the Fields List, drag in the BillAddressCity field from the Contacts table into the Details1 band. Remember to select the Fields List icon first.
Click the Properties gear icon to get back to the properties panel. Deselect the field by clicking on the report, or another band. Under Actions, click the icon Insert Group Header Band.
Note this new band goes underneath the Page Header Band and above the Details band. Select the GroupHeader1 band. This will show different properties in the properties panel.
Expand the section called Group Fields, and then click the plus ( + ) button.
You will be asked for a field to Group By. Select the BillAddressCity field.
Notice the arrow beside it? That allows you to set the sorting to Ascending, Descending, or none.
Save your report and then Preview it. You will see the contacts are sorted by their city, using the sorting preference you chose.
Go back to the designer. Let's make each group stand out more by using the group header. Drag the BillAddressCity field from the Detail1 band to the GroupHeader1 band.
Further style the GroupHeader1 band as you like.
The follwing changes were made:
The BillAddressCity field had its background color changed to blue, and its foreground color changed to white. The font was also bolded.
Two line controls were added to be added on the left and right hand side of the city field. Their width was increased and set to blue.
The GroupHeader1 band was shortened to fit.
Save and then Preview the report after these changes.
Multiple Group Fields
You may have noticed when you added a group field, you had the option to add more fields to group by clicking the plus ( + ) button.
By adding more group fields, you can group your records by one field, and then another. To change the priority of which group field to sort by first, use the up and down arrows.
To remove a group field, select it and then click the minus ( - ) button.
Nested Groups
By using more than one GroupHeader bands, you can nest groups. In our example, we will add another group header band to separate the contacts by state.
Select GroupHeaderBand1. Under the Design section, name it "GroupCity". Considering we are going to have two group header bands, it would make sense to start naming the bands so as not to get confused.
Add a second Group Header Band.
Name it "GroupState".
With "GroupState" selected, add a Group Field and group by BillAddressState.
Within Group state, we added a few controls:
A Panel Control to color the entire row.
Under the database icon, from the Field list, the BillAddressState field was dragged into GroupState into the panel control.
Save and then Preview this new group header.
Now the contacts are grouped by city, and the city groups are grouped by state.
In the next article, you will learn about detail reports and how to pull related information from another table.