• Creating a report based on a query.
• Printing a report based on a query with parameters.

	Estimated time: 45 mn

• Open the project you worked on in the previous lesson.
  1. Go to the WEBDEV home page (Ctrl + <).
  2. On the home page, click "Tutorial", then in "Parts 3 to 6", double-click "Full WEBDEV Site - Exercise".
  3. A dialogue box prompts you to open the project you worked on in the previous lesson. You can open the local copy or the original project. Select "Open the local copy".

	Answers	A completed project is available. This project contains the different elements created in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Parts 3 to 6", double-click "Full WEBDEV Site - Answers".

• Direct printing (on the server).
• Generation of multiple documents (HTML, PDF, etc.).

Direct printing

Generating HTML, PDF or XML documents

• different blocks. Blocks define the areas in which the data will be displayed. The available blocks are as follows:
  • Start of document: appears on the first page only.
  • Page header: appears at the top of each page.
  • Body: contains the data. This block appears as long as there is data to print.
  • Page footer: appears at the bottom of each page.
  • End of document: appears on the last page only.
• controls to display data.

• The order characteristics: date and order number.
• The personal customer details: name, address, zip code, city and country.
• The characteristics of the order lines:
  • Ordered quantity,
  • Product reference,
  • Product caption,
  • Total BT,
  • Total IOT.

	Note	WEBDEV allows you to create reports from different data sources: data files, queries, controls, text files, etc. In most cases, it is recommended to group the data to be printed in a query and create a report based on it. To add data to the report, simply add the corresponding item to the query. Reports based on data files must be simple reports, i.e. those displaying data from a single data file.

Creating the query

• We will use the query editor to create the base query of the report.
  1. Click in the quick access buttons. The new element window appears: click "Query­". The query creation wizard starts.
  2. Select the "Select" option.
     This query will allow you to select the records to be printed in the report. Go to the next step.
  3. The query description window appears.

• First, define the query name: change "QRY_NoName1" to "QRY_Invoice" in "Query name".

• To build the query, we are going to select the elements that will be displayed in the result. The query will contain the data from the Order, OrderLine and Customer data files.
  1. In the left section of the screen, select the Order data file and click the arrow (): the items of the Order data file are displayed in the middle of the screen.
  2. Repeat this action for the OrderLine and Customer data files.

• To reorganize the items:
  1. Select the ProductCaption item of the OrderLine data file.
  2. Click on the right of the list of items. The item moves up.
  3. Position the item just after the product reference (OrderLine.Reference).

• To define the "Order ID" parameter:
  1. Select the Order.OrderID item (in the middle of the screen).
  2. Click the fourth column (see note below): in the menu that appears, select "New condition".
     

     	Note	In the query description window, the section that lists the query elements includes 4 columns: A column with the name of the item A column to display or hide the item in the query result A column to set the item sort options A column with the number of conditions associated with the item. To access one of these options, simply click the corresponding column.
  3. In the window that appears, we will specify that the selection condition corresponds to a parameter:
     
     Perform the following operations:
     • Select "Is equal to".
     • Check "the parameter".
     • Specify the parameter name: "ParamOrderID".
  4. Validate the condition description window. The number "1" appears to the right of the Order.OrderID item, indicating that a selection condition has been defined.
  5. The order identifier is not meant to be viewed so let's make it invisible: click the eye found on the item line and select "Don't display".
  6. Similarly, make the following items invisible:
     • Order.Status,
     • Order.CustomerID,
     • Order.PaymentModeID,
     • OrderLine.OrderID,
     • Customer.CustomerID.
  7. Validate the query description window ("OK").
  8. Validate the save information
  9. The graphic query representation is displayed:
     

Creating the report based on a query

• To create a report:
  1. Click in the quick access buttons.
  2. The new element window appears: click "Report" then "Report". The report creation wizard starts.
  3. The report creation wizard shows several types of reports:
     
  4. Select "Table". Go to the next step.
  5. Select the report data source. The report will be based on the query that was just created. Select "A data file or existing query". Go to the next step.
     
  6. In the list of data files and queries, select the "QRY_Invoice" query. Go to the next step.
  7. The wizard asks you if you want to insert breaks into the report. No will not use breaks in this report. This concept will be presented later in this tutorial. Select "Don't insert breaks into the report". Go to the next step.
  8. You are going to specify the order in which the items will be printed and how they will be distributed in the different blocks:
     • The Customer items will be displayed in the "Start of document" block. This data does not need to be repeated on each order line.
     • The Order items will be displayed in the "Page header" block. This data does not need to be repeated on each order line.
     • The Order Line items will be displayed in the report body. These items will be displayed for all the order lines.
     • The items containing the Totals will be displayed in the "End of document" block. This data does not need to be repeated on each order line.
       
       The following table shows the different items assigned to the blocks in the same order they appear in the wizard:
       

       Item	Block
       OrderNum	Start of document
       Date	Page header
       TotalBT	End of document
       TotalVAT	End of document
       TotalIOT	End of document
       Reference	Body
       Quantity	Body
       TotalIOT_Or	Body
       TotalBT_Or	Body
       ProductCaption	Body
       UnitPriceBT	Body
       Company	Start of document
       FullName	Start of document
       Address	Start of document
       ZipCode	Start of document
       City	Start of document
       StateCounty	Start of document
       Country	Start of document
       Phone	Uncheck
       Cell	Uncheck
       Email	Uncheck

  9. Go to the next step.
  10. The wizard proposes to create a counter, a sum or an average on the numeric items of the report. In this report, the calculations are performed by the query. Click the "No calculation" button. Go to the next step.
  11. This step is used to define the report layout.
      
      Keep the default values with the "Portrait" orientation.
      

      	Note	Print margins When choosing the print margins, don't forget to take into account the physical margins of the printers. The physical margins of the printers are margins where no print is allowed. Furthermore, the physical margins can change depending on the printer models.
  12. Go to the next step.
  13. This steps allows you to select the report skin template. It is recommended to use the same skin template used on the pages. In our case, select the "Phoenix" skin template and go to the next step.
  14. Finally, specify a name and a title for the report.
      • Name the report "RPT_Invoice".
      • In "Title" enter "Invoice".
        
  15. Validate.
  16. The table as it is defined does not fit on an A4 page in portrait mode. WEBDEV suggests to:
      • print the report on 2 pages horizontally,
      • switch to landscape mode,
      • reduce the table size.
        
      Choose "Reduce the table".
  17. Validate the save information.
  18. The report is displayed in edit mode in the report editor:
      
  19. The different order lines are grouped in a table.

• Run the report by clicking in the quick access buttons.
  1. The report editor asks for the print destination. The print destination can be:
     • Report viewer: the report is displayed on the screen in a specific window.
       

       	Note	The report viewer is only available when developing the site. At runtime, the user will not be able to use the report viewer. The preview of the generated file will be the displayed in the browser.
     • Printer: the report is printed on the default printer.
     • Specific file: the report is printed to a file in the selected format.
       
     Select "Report viewer" and validate.
  2. The report editor prompts you to enter the parameters of the query used by the report. Previously, we used a parameter to specify the number of the order to be printed. For the example, type the test value "5".
     
     Validate.
  3. The report is displayed on the screen.
     
  4. Close the report viewer.

Modifying the "Invoice" report

• We will move the customer and order information to the top of the page:
  1. Remove the text on the left of the customer details (Name, etc.).
  2. Move the item containing the city next to the zip code.
  3. Use the sizing handles to enlarge the control containing the company name: the control size must be the same as the size of the Zip Code and City controls.
  4. Align the controls:
     • Select the Company control.
     • Press Ctrl and select the controls containing the address, state and country.
     • On the "Alignment" tab, click "Justify (Ins. and Out.)".
       
  5. Select the customer details and move them to the right of the report.
  6. Move the order number: position it at the top of the "Page header" block.
     

• We will add a border around the customer details. To do so, we will insert a Static control over the customer details. Only the borders of the Static control will be visible.
  1. Create a Static control: on the "Creation" tab, in the "Text" group, click "Static".
  2. Click inside the "Start of document" area, where the customer details are displayed.
  3. Press Shift and enlarge the Static control using the sizing handles so that it overlays the customer details. This operation enlarges the Static control without moving the controls below (containing the customer details).
  4. In the context menu of the Static control, select "Edit caption" and delete the text. Click anywhere in the report to confirm changes.

• To configure the borders:
  1. Select the previously created Static control.
  2. Press R and click in the upper-right corner of the control.
  3. Select "Edit borders". The configuration options are displayed:
     
  4. Select:
     • the "Blue" color in the context-sensitive colors.
     • a simple border (thin line).
     • a rounding set to 2 mm for the width and height.

• We will set the position of the totals in the "End of document" block:
  1. Select the controls in the "End of document" block that contain the totals.
  2. Place the controls at the lower-right corner of the table (above the text "Developed with WEBDEV").
  3. The report is displayed in the report editor:
     
  4. Our "Invoice" report is created. Save the report by clicking in the quick access buttons.
  5. Check the changes made by running the report in "Report Viewer" mode (click in the quick access buttons).
     
  6. Close the report viewer.

Implementing the print process

1. Go the "PAGE_Multicriteria_Search" page: click "PAGE_Multicriteria_Search" in the open document tabs.
2. On the "Creation" tab, in the "Usual controls" group, click "Button".
3. Click to the right of the Table control to create the Button control.
4. Select the control and press Enter. The text becomes editable.
5. Replace "BUTTON" with "PRINT" and confirm changes.
   
6. Open the button code (F2) and write the following code in the "Click xxx (server)" event:
   
   iDestination(iGenericPDF)
   RPT_Invoice.InitQuery(TABLE_QRY_FindOrders.COL_OrderID[TABLE_QRY_FindOrders])
   RPT_Invoice.Print()
   FileDisplay(iLastFile(), "application/pdf")
   
   Let's analyze this code:
   • iDestination defines the print format (PDF in this case).
   • Since the "RPT_Invoice" report is based on a query with parameters, it is necessary to pass the parameter to the query before running the report. This operation is performed with <Report>.InitQuery. In our case, the parameter corresponds to the number of the current order, displayed in the Table control.
   • <Report>.Print is used to generate the "Report_Invoice" report in the specified format (PDF in our case).
   • FileDisplay displays the invoice to the user:
     • iLastFile returns the path of the last file generated by a report.
     • "application/pdf" if the MIME type of the returned file. When this type is specified, the browser can display the file directly or choose the application that will be used to display the file on the end user computer.
7. Close the code editor.
8. Save the page ( or Ctrl + S).

Print test

• Now, all we have to do is run a real test:
  1. Test the "PAGE_Multicriteria_Search" page.
  2. Specify the desired criteria and start the search.
  3. Select one of the orders displayed in the Table control.
  4. Print the order via the "PRINT" button.
     
  5. The browser opens the PDF file. The browser has replaced the current page by the PDF file. We are going to change this behavior.
  6. Close the browser.

• To open the PDF file in another tab or browser:
  1. Double-click the "Print" button in the "PAGE_Multicriteria_Search" page. The description window opens.
  2. In the "General" tab, in the Destination control, select "New browser tab".
     
  3. Validate.

	Note	New tab or new window? Neither the user nor the site developer can choose if the print preview will be opened in a new tab or in a new window. It is the browser that determines which of the two options is used. This behavior may vary depending on the browser used!