Home | Sign in | English UK
New WEBDEV 25 feature!
  • This lesson will teach you the following concepts
  • Overview
  • Principles for printing on Internet
  • Direct print
  • Generating HTML, PDF or XML documents
  • What is a report made of?
  • Creating the "Invoice" report
  • Creating the query
  • Creating the report based on a query
  • Modifying the "Invoice" report
  • Displaying the printed report from a button
  • Implementing the print
  • Print test
Lesson 5.2. Printing an invoice
This lesson will teach you the following concepts
  • Creating a report based on a query.
  • Printing a report based on a query with parameters.
Lesson duration

Estimated time: 45 mn
Previous LessonTable of contentsNext Lesson
We are going to give the user the ability to directly print the invoice corresponding to the sought order.


If you have not created the pages in the previous lessons, you can still follow the report creation section by opening a corrected project: in the WEBDEV home page (Ctrl + <), click "Tutorial" and select "Full WEBDEV Site (With pages)".
A full corrected project is also available: in the WEBDEV home page (Ctrl + <), click "Tutorial" and select "Full WEBDEV Site (Answer)".
Principles for printing on Internet
In fact, we should not talk about "printing" on Internet. Indeed, when a document must be "printed", a file is generated beforehand (in HTML, PDF or XML format) and it is transmitted to the browser. As soon as the file transfer is completed, the Web user decides whether the document that was received will be printed or not.
However, "printing" on the server remains possible. But the document that is printed (on the server printer or on a shared network printer) will not be accessible to the Web user.
The printed or generated document is prepared and formatted by the report editor. The information found in the document can come from a database.
Two types of prints are available:
  • The direct print (on the server printer).
  • The generation of various documents (HTML, PDF, ...).

Direct print

The direct print consists in printing on a printer directly. This printer is plugged into the server or accessible from the network.
The direct print with WEBDEV is recommended for Intranet or Extranet only. This type of print is used to print the logs for customer connections, to directly print the order on the printer of sales department.

Generating HTML, PDF or XML documents

Printing from HTML, PDF or XML documents consists in creating a document and in displaying it on the browser of Web user. To create this document, all you have to do is use the WEBDEV report editor. A formatted file can be "generated" by your WEBDEV site from a data source. The file can be in HTML, PDF, RTF or XML format.
The main benefit of this method is that the generated file can be transmitted to the browser. The Web user can print the document or store it on his computer.
Printing in a file can be used for an Internet site and for an Intranet/Extranet site (for example: to transmit an order form in PDF format to the Web user, ...).
What is a report made of?
In our example, the invoice that must be printed will correspond to a report. A report is a project element used to group and format the data to print. To create and use reports, WEBDEV proposes a specific editor: the report editor.
A report includes:
  • different blocks. The blocks are used to define the areas where the data will be displayed. The available blocks are as follows:
    • Start of document: block displayed on the first page only.
    • Page header: block displayed at the top of each page.
    • Body: block containing the data. This block is printed as long as there is data to print.
    • Page footer: block displayed at the bottom of each page.
    • End of document: block displayed on the last page only.
  • controls used to display the data.
Let's see the report that we want to create:
Report Invoice to be made
Creating the "Invoice" report
First of all, we are going to list the information that will be displayed in the report:
  • The order characteristics: date and order number.
  • The personal customer details: name, address, zip code, city and country.
  • The characteristics of order lines:
    • Ordered quantity,
    • Product reference,
    • Product caption,
    • Total BT,
    • Total IOT.
To easily create this report, the data to print will be grouped in a query. This query can be used by the report or by any other element of WEBDEV project (Table control, Looper control, ...).


WEBDEV proposes to create reports from several data sources: data files, queries, controls, text files, ...
In most cases, we advise you to group the data to print via a query and to create a report based on this query. To add an information into the report, all you have to do is add the corresponding item into the query.
The reports based on data files must be simple reports, which means reports used to display data coming from a single data file.

Creating the query

  • The query editor will be used to create the base query of report.
    1. Click Create an element among the quick access buttons. The element creation window appears: click "Query­". The query creation wizard starts.
    2. Select the "Select" option.
      Indeed, this query will be used to select the records that will be printed in the report. Go to the next step.
    3. The query description window appears.
  • First of all, give a name to the query: type "QRY_Invoice" instead of "QRY_NoName1" 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 content of Orders data file, the content of OrderLine data file and the content of Customer data file.
    1. In the left section of the screen, select the Orders data file and click the blue arrow ( Arrow ): the items of Orders data file are displayed in the middle of the screen.
    2. Repeat this action for the OrderLine and Customer data files.
The query description window is as follows:
Query description window
At this time, this query is used to select all orders and the corresponding order lines.
We are now going to reorganize the query items. Indeed, this order will be used to create the different controls of the report based on this query. We want the product caption to be positioned just after the product reference.
  • To reorganize the order of items:
    1. Select the ProductCaption item of the OrderLine data file.
    2. Click Arrow for reorganizing items on the right of the list of items. The item moves up.
    3. Position the item just after the product reference (OrderLine.Reference).
We want to select the data corresponding to a single order whose identifier is known. Therefore, we are going to define the order number in parameter.
  • To manage the "Order identifier" parameter:
    1. Select the Orders.OrdersID item (in the middle of the screen).
    2. Click in the fourth column: select "New condition".


      When describing a query, the section that lists the query elements includes 4 columns:
      • The item name,
      • The ability to display (or not) the item in the query result,
      • The sort management for the item,
      • The number of conditions associated with the item.
      To access one of these characteristics, all you have to do is click in the corresponding column.
    3. In the window that is displayed, we are going to specify that the selection condition corresponds to a parameter:
      Describing a condition
      Perform the following operations:
      • Select "Is equal to".
      • Check "the parameter".
      • Specify the parameter name: "ParamOrdersID".
    4. Validate the condition description window. The number "1" is displayed on the right of Orders.OrdersID item, indicating that a selection condition was defined.
    5. The order identifier will not 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:
      • Orders.Status,
      • Orders.CustomerID,
      • Orders.PaymentModeID,
      • OrderLine.OrdersID,
      • Customer.CustomerID.
    7. Validate the query description window ("OK").
    8. Validate the save information
    9. The graphic query representation is displayed:
      Graphic representation of the query

Creating the report based on a query

  • To create a report:
    1. Click Create an element among the quick access buttons.
    2. The element creation window appears: click "Report" then "Report". The report creation wizard starts.
    3. The report creation wizard proposes several types of reports:
      Report creation wizard - Different types of reports
    4. Select "Table". Go to the next step.
    5. Select the data source of report. The report will be based on the query that was just created. Select "From a data file or from an existing query". Go to the next step.
      Report creation wizard - Data source
    6. In the list of data files and queries, select the "QRY_Invoice" query. Go to the next step.
    7. The wizard asks you to specify whether a break is required. No break will be used in this report. This concept will be presented later in this tutorial. Answer "No". 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 items regarding the customer will be displayed in the "Start of document" block. Indeed, this information must not be repeated on each order line.
      • The items regarding the order will be displayed in the "Page header" block. Indeed, this information must not be repeated on each order line.
      • The items regarding the order lines will be displayed in the report body. These items will be displayed on all order lines of order.
      • The items regarding the totals of order will be displayed in the "End of document" block. Indeed, this information must not be repeated on each order line.
        Report creation wizard - Items to display
        The following table presents the different assignments of items in the order presented in the wizard:
        OrderNumStart of document
        DatePage header
        TotalBT End of document
        TotalVATEnd of document
        TotalIOT End of document
        Reference Body
        Product caption Body
        CompanyStart of document
        FullNameStart of document
        AddressStart of document
        ZipCodeStart of document
        CityStart of document
        StateDepStart of document
        CountryStart of document
    9. Go to the next step.
    10. The wizard proposes to create a counter, a sum or an average on the numeric items found in 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.
      Report creation wizard - Layout
      We will keep the default values with the "Portrait" orientation.


      Print margins
      When choosing the print margins, don't forget to take into account the physical margins of printers. The physical margins of printers are margins where no print is allowed. Furthermore, the physical margins differ according to the printer models.
    12. Go to the next step.
    13. This screen allows you to select the skin template used for the report. We recommend that you use the same skin template as the one used for the pages. In our case, select the "Phoenix" skin template for example and go to the next step.
    14. All we have to do now is give a name and a title to the report.
      • Type the name: "RPT_Invoice".
      • Type the title: "Invoice".
        Report creation wizard - Name and title of the report
    15. Validate.
    16. The table as it is defined does not fit on an A4 page in portrait mode. WEBDEV proposes to:
      • print the report on 2 pages in width,
      • switch to landscape mode,
      • reduce the table size.
        Reducing the report
      Choose "Reduce the table".
    17. Validate the save information.
    18. The report is displayed in edit in the report editor:
      Report in the editor
    19. The different order lines are grouped in a table.
  • Run this report by clicking Test an element among 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.


        The report viewer is only available when developing the site.
        At runtime, the user will not be able to use the report viewer. The only available preview will be the display of generated file by the browser.
      • Printer: the report is printed on the default printer.
      • Specific file: the report is printed in a file to the selected format.
        Choose print mode
      Select "Report viewer" and validate.
    2. The report editor asks for the parameters of query used by the report. Don't forget that a parameter was used to specify the number of the order to print. For the example, type the test value "1".
      Entering the query parameters
    3. The report is displayed on the screen.
      Report displayed in the report viewer
    4. Close the report viewer.

Modifying the "Invoice" report

We are going to perform modifications in the report that was just created.
  • We want to position the information regarding the customer and the order in the page header:
    1. Delete the captions found in front of the customer details (Name, ...).
    2. Position the item containing the city beside the zip code.
    3. Enlarge (with the handles) the control containing the company name: the control size must be identical to the size of Zip Code and City controls.
    4. Align the controls:
      • Select the Company control.
      • Press Ctrl and select (with the mouse) the controls containing the address, the state and the country.
      • On the "Alignment" pane, click "Justify (Ins. and Out.)".
        Alignment pane
    5. Select the customer details and move them (with the mouse) to the right of report.
    6. Move the order number: position it at the top of the "Page header" block.
      Repositioning the 'Order number' control
  • We are going to create a border around the customer details. To do so, we are going to create a Static control stacked over the customer details. Only the border of this static will be visible.
    1. Create a Static control: on the "Creation" pane, in the "Text" group, click "Caption".
    2. Click inside the "Start of document" area, at the location where the customer details are displayed.
    3. Press the Shift key and enlarge the Static control (with the handles) so that it is stacked over the customer details. This operation is used to enlarge the Static control without moving the controls found below (containing the customer details).
    4. In the popup menu of Static control, select "Edit the caption" and delete the caption. Click in the report to validate the modification.
  • To configure the border:
    1. Select the Static control that was just added.
    2. Press R and click Configure border at the top right corner of the control.
    3. Select "Edit the border". The configuration options are displayed:
      Border configuration options
    4. Select:
      • the "Blue" color in the context-sensitive colors.
      • a simple border (thin line).
      • a rounding set to 2 mm in width and in height.
  • We are going to position the totals properly in the "End of document" block:
    1. Select the controls corresponding to the totals found in the "End of document" block.
    2. Position these controls at the bottom right corner of the table (above the text "Powered by WEBDEV").
    3. The report is displayed in the report editor:
      Report displayed in the report editor
    4. Our "Invoice" report is created. Save the report by clicking Save an element among the quick access buttons.
    5. Check the changes made by running the report in "Report Viewer" mode (click Run the report test among the quick access buttons).
      Report in
    6. Close the report viewer.
Displaying the printed report from a button
As already seen at the beginning of this lesson, the site being run on a server, the document will be printed on a printer connected to the server (and therefore inaccessible to the user).
Therefore, the report will be printed in PDF on the server and the generated PDF document will be downloaded or displayed on the Web user's computer. Then, the user will be able to print the document on their printer.
In our site, "RPT_Invoice" will be printed from a Button control in the page used to find an order. This Button control will print the invoice for the selected order.
Remark: To complete this part of the tutorial, the page "PAGE_Multicriteria_Search" must have been created in Lesson 5.1. Multicriteria search.

Implementing the print

To print the "RPT_Invoice" report:
  1. Locate the "PAGE_Multicriteria_Search" page: click "PAGE_Multicriteria_Search" in the documents bar.
  2. On the "Creation" pane, in the "Usual controls" group, click "Button".
  3. Click on the right of the Table control to create the Button control.
  4. Select the control and press Enter. The caption becomes editable.
  5. Replace "Button" by "Print" and validate.
    Button control in the editor
  6. Open the code of this button (F2) and write the following code in the "Click (server)" event:
    iInitReportQuery(RPT_Invoice, ...
    FileDisplay(iLastFile(), "application/pdf")

    Let's study this code:
    • iDestination is used to define the print format (PDF format in this case).
    • The "RPT_Invoice" report being based on a query with parameters, the parameter must be passed to the query before running the report. This operation is performed by iInitReportQuery. In our case, the parameter corresponds to the number of the current order, displayed in the Table control.
    • iPrintReport is used to generate the "Report_Invoice" report in the specified format (PDF in our case).
    • FileDisplay is used to display the invoice to the user:
      • iLastFile returns the path of the last file generated by a report.
      • "application/pdf" if the MIME type of returned file. When this type is specified, the browser can display the file directly or it can choose the application that will be used to perform the display on the computer of Web user.
  7. Close the code editor.
  8. Save the page ( Save an element or Ctrl + S).

Print test

  • Now, all we have to do is run a real test:
    1. Run the test of "PAGE_Multicriteria_Search" page.
    2. Specify the criteria and start a search.
    3. Select one of the orders displayed in the Table control.
    4. Print the order via the "PRINT" button.
      Print the report
    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 appears.
    2. In the "General" tab, in the Destination control, select "New browser tab".
      Printing in a new tab
    3. Validate.


New tab or new window?
The display in a new tab or in a new window can be chosen neither by the user nor by the site developer. It is the browser that chooses whether a new tab or a new window is opened. The behavior can differ according to the browser used!
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 25
Click [Add] to post a comment