New WEBDEV 28 feature!
Help / WEBDEV Tutorial / Part 05 - Let's develop
  • In this lesson you will learn the following concepts
  • Overview
  • Printing from the Internet
  • Direct printing
  • Generating HTML, PDF or XML documents
  • What is a report?
  • Creating the "Invoice" report
  • Creating the query
  • Creating the report based on a query
  • Modifying the "Invoice" report
  • Displaying the report preview via a Button control
  • Implementing the print process
  • Print test
Lesson 5.2. Printing an invoice
In this lesson you will learn 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
Users will be able to directly print the invoice of the search order.

  • 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".


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".
Printing from the Internet
In fact, we should not talk about "printing" from the Internet. When a document must be printed, an HTML, PDF or XML file is generated and sent to the browser. Once the file has been sent, the user decides whether or not the document received will be printed.
It is also possible to send a "print job" to the server. However, the end user will not be able to access the printed document (on the server or on a shared network).
The generated document is prepared and formatted in the report editor. The document data can come from a database.
Two types of print jobs are available:
  • Direct printing (on the server).
  • Generation of multiple documents (HTML, PDF, etc.).

Direct printing

Direct printing consists in printing on a printer directly. The printer is connected to the server or can be accessed from the network.
Direct printing with WEBDEV is recommended for an Intranet or Extranet site only. This type of printing makes it possible to print the customer connection logs or to directly print orders on the printer of the sales department.

Generating HTML, PDF or XML documents

Printing from HTML, PDF or XML documents consists in creating a document that will be displayed on the user's browser. To create this document, you can use the WEBDEV report editor. Thus, your WEBDEV site can generate a formatted file from a data source. It can be an HTML, PDF, RTF or XML file.
The main advantage of this method is that the file can be sent to the browser. The user can print the document or save it on the computer.
The generation of a file can be used for both an Internet and an Intranet/Extranet site (for example: when you want to send a purchase order as a PDF to the user, etc.).
What is a report?
In our example, the invoice to be printed corresponds to a report. A report is a project element used to group and format the data to be printed. WEBDEV includes a specific report editor to create and edit reports.
A report includes:
  • 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.
Let's see the report that we are going to create:
Report Invoice to create
Creating the "Invoice" report
First, we will define the data 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 the 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 the WEBDEV project (Table control, Looper control, etc.).


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 Create an element 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 (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.
The query description window is as follows:
Query description window
So far, this query is used to select all orders and the corresponding order lines.
We will reorganize the query items. This order will be used to create the different controls of the report based on this query. We will place the product caption just after the product reference.
  • To reorganize the 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 will select the data of a single order using an identifier. Therefore, we will define the order number as a parameter.
  • 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".


      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:
      Condition description
      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:
      Graphic representation of the query

Creating the report based on a query

  • To create a report:
    1. Click Create an element 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:
      Report creation wizard - 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.
      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 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.
        Report creation wizard - Items to display
        The following table shows the different items assigned to the blocks in the same order they appear in the wizard:
        OrderNumStart of document
        DatePage header
        TotalBT End of document
        TotalVATEnd of document
        TotalIOT End of document
        ProductCaption Body
        CompanyStart of document
        FullNameStart of document
        AddressStart of document
        ZipCodeStart of document
        CityStart of document
        StateCountyStart 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 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.
      Report creation wizard - Layout
      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 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".
        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 suggests to:
      • print the report on 2 pages horizontally,
      • switch to landscape mode,
      • reduce the table size.
        Reducing the report size
      Choose "Reduce the table".
    17. Validate the save information.
    18. The report is displayed in edit mode in the report editor:
      Report in the editor
    19. The different order lines are grouped in a table.
  • Run the report by clicking Test an element 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.


        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.
        Choose print mode
      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".
      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 will make some changes to the previously created 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.)".
        Alignment tab
    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.
      Changing the position of the 'Order number' control
  • 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 Configure borders in the upper-right corner of the control.
    3. Select "Edit borders". 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 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:
      Report displayed in the report editor
    4. Our "Invoice" report is created. Save the report by clicking Save an element in the quick access buttons.
    5. Check the changes made by running the report in "Report Viewer" mode (click Test report in the quick access buttons).
      Report in 'Report viewer' mode
    6. Close the report viewer.
Displaying the report preview via a Button control
As we saw at the beginning of this lesson, since the site runs on a server, the document will be sent to a printer connected to the server (inaccessible to the users).
The report will be generated as a PDF document on the server, and can then be downloaded or displayed on the user's computer. Thus, users will be able to print the document on their printers.
In our site, "RPT_Invoice" will be printed via a Button control located 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_Multicriteria_Search" page must have been created in Lesson 5.1. Multi-criteria search.

Implementing the print process

To print the "RPT_Invoice" report:
  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.
    Button control in the editor
  6. Open the button code (F2) and write the following code in the "Click xxx (server)" event:
    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 (Save an element 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.
      Print 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 opens.
    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?
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!
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 28
Click [Add] to post a comment

Last update: 05/31/2023

Send a report | Local help