Lesson 5: Creating a table report

The Jinfonet Gourmet Java company receives orders from customers in different territories around the world, and by reviewing this shipping information the Shipping department can receive bids from various shipping vendors. You are assigned the task of creating a shipment information report. In the report, the shipment details, including order ID, order date, ship date, shipping cost, whether the payment has been received, and the shipping vendor, need to be reported for each territory.

The following prototype of the report has been given to you:

This report will be run online, so an interactive report will work well. Interactive reports allow the end user to change the view of the report. They can filter the data on the report or change the sort order, as well as search the report.

This lesson contains the following tasks:

• Task 1: Create the table
• Task 2: Add a web control to the report
• Task 3: Add objects and edit their properties

Task 1: Create the report

Before taking this task, make sure you have enabled the Insert field name label with field option in the Options dialog as noted at the end of Lesson 3. Otherwise, the name labels will not be inserted together with the fields when you add fields to the table.

1. From the JReport Designer toolbar, click the New Report Set button .
2. In the New Report Set dialog, clear the text in the Report Title text box, select Table Report from the layout box, then click OK.

   Be sure that the JinfonetGourmetJava.cat is specified as the current catalog because it is the catalog we use in this trail. For information about specifying this catalog, see Task 1, Step 3 of Lesson 1.

3. In the Data screen of the Table Report Wizard, check the New radio button.
4. Expand the Queries node in Data Source 1, click <Add Query...>, enter ShipmentDetailsbyCustomer in the Input Query Name dialog and click OK.
5. In the Query Editor, click Query > Add Table to add the tables Orders and Customers to the query. The two tables are joined together automatically on the Customers_Customer ID and CustomerID_FK1 columns.
6. Check all the columns in the Orders table. For the Customers table, check the following columns: Customer Name, Customers_State, Customers_Country, Customers_Territory and Customers_Region.
7. Click OK at the bottom of the Query Editor to create the query. Then click Next in the Table Report Wizard.
8. In the Display screen, add the fields Orders_Order ID, Order Date, Ship Date, Ship Via, Payment Received and Shipping Cost to the table. Then click Next.

Since the report is required to display shipment details of each customer in specific territory, we will add two groups to it: first group the report by territory and then by customer name.

9. In the Group screen, add the DBFields Customers_Territory as the first group by field and Customer Name the second one.

   

10. Switch to the Style screen and select to display the report in the Classic style vertically.
11. Click Finish to create the report.
12. Click the View tab to preview the report and it appears as follows:

    

The required report has been created, but it is cumbersome to locate the shipment details of specific territories. So our next task is to add web controls to the report so that the end user can easily filter the results of the report.

Task 2: Add a web control to the report

Web controls empower end users of interactive reports to easily modify the report results they are viewing, and are defined by a trigger event, such as click, and a resulting web action.

In this task, we add a Drop-down List web control to the PageHeader panel of the report. It will be used to filter the report records by territory.

1. Click View > Page Header to display the PageHeader panel.
2. In the Report Inspector, select the PageHeaderPanel node and change its Height property to 1.25.
3. Click Insert > Web Controls > Drop-down List to insert a web control into the PageHeader panel.

4. Right-click the web control and select Display Type from the shortcut menu.
5. In the Display Type dialog, click the Value cell and then click in it to display the Insert Fields dialog.
6. Select Customers_Territory in the Customers table in the DBField List box and click the Insert button to add it as value of the drop-down list.
7. In the Web Behaviors box, click the Events cell and select Data Change from the drop-down list, then click in the Actions cell.

   
   
   The Web Action List dialog appears.

8. Select the user_changeCompProperty action and click OK.

   

9. In the Parameters dialog, input the value of the parameters as follows and then click OK.
   • instanceName: &MultiValueContainer
   • propertyName: 'SelectedValue'
   • value: this.value
   • isBy: false

   

In this lesson, we will not explain the web actions and their parameters in detail. You can refer to Applying web actions in the DHTML Features chapter of the JReport Designer User's Guide for assistance.

10. Click to add another web behavior, set its event to Data Change and click in the Actions cell.
11. In the Web Action List dialog, select the Filter action and click OK.
12. In the Filter - Web Action Builder dialog, specify to apply the action to TableComp, click the Filter on cell and select CUSTOMERS_TERRITORY from the drop-down list, then click the Value cell and select MultiValueContainer. Click OK to apply the settings.

    

13. Click OK in the Display Type dialog to confirm the settings.
14. Resize the drop-down list horizontally to make sure the territory name can be displayed completely.

By now, we have finished defining values of the web control. Next we will add a label ahead of it for identification, and a report title to the report.

Task 3: Add objects and edit their properties

1. Drag and drop two Label objects from the Toolbox panel to the PageHeader panel. Resize them and edit their text as follows:

   

2. Select the two labels and set their Font Face property to Arial and Bold property to true in the Report Inspector.
3. Resize the Shipment Details by Customer label, set its Font Size property to 18 and Foreground property to Red.

   

4. Select the Order Date and the Ship Date DBFields and set their Format property to MM/dd/yy.
5. Resize the two group by fields, add two labels ahead of them and edit the text of the labels as "Territory:" for the first group by field and "Customer Name:" for the second.
6. Select the four objects in the two GroupHeader panels, set their Bold property to true and Foreground property to 0xcc0000.

   

7. Double-click the Orders_Order ID label in the TableHeader panel and edit its text to Order ID.
8. On the report tab bar, right-click the tab of the report and select Rename from the shortcut menu to rename the report as ShipmentDetails.
9. Click File > Save to save the report set as ShipmentDetailsbyCustomer.cls.
10. Click the View tab to preview the report and it appears as follows:

    

    Note: If the report does not look correct, you can compare it to the final versions of the tutorial reports provided by JReport. To do so, you will need to save and close this catalog and open the TutorialReports.cat catalog file instead, which is located at C:\JReport\Designer\Demo\Reports\TutorialReports.

The web controls are powered by JReport Web and therefore cannot be previewed in JReport Designer. We can use the Preview in DHTML command of JReport Designer to preview this report, however, this command is enabled only if the DHTML Preview option was specified when installing JReport Designer.

Click View > Preview As > DHTML. The report will then be opened in a web browser. Now we can select values from the drop-down list to dynamically change the report results. In the report below, we choose to view records in the Mexico territory.

Lesson 5 summary

In this lesson, we created a shipment details report in the table report layout. In the report, we used a table container to format the data, and a web control to dynamically change the report results.