- In this lesson you will learn the following concepts
- 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.
Estimated time: 45 mn
Users will be able to directly print the invoice of the search order.
- Open the project you worked on in the previous lesson.
- Go to the WEBDEV home page (Ctrl + <).
- On the home page, click "Tutorial", then in "Parts 3 to 6", double-click "Full WEBDEV Site - Exercise".
- 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 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.).
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:
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.
- Click in the quick access buttons. The new element window appears: click "Query". The query creation wizard starts.
- Select the "Select" option.
This query will allow you to select the records to be printed in the report. Go to the next step.
- 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.
- 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.
- Repeat this action for the OrderLine and Customer data files.
The query description window is as follows:
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:
- Select the ProductCaption item of the OrderLine data file.
- Click on the right of the list of items. The item moves up.
- 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:
- Select the Order.OrderID item (in the middle of the screen).
- 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: |
To access one of these options, simply click the corresponding column.
- 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.
- 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".
- 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.
- 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".
- Similarly, make the following items invisible:
- Validate the query description window ("OK").
- Validate the save information
- The graphic query representation is displayed:
Creating the report based on a query
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:
- Remove the text on the left of the customer details (Name, etc.).
- Move the item containing the city next to the zip code.
- 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.
- 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.)".
- Select the customer details and move them to the right of the report.
- 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.
- Create a Static control: on the "Creation" tab, in the "Text" group, click "Static".
- Click inside the "Start of document" area, where the customer details are displayed.
- 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).
- 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:
- Select the previously created Static control.
- Press R and click in the upper-right corner of the control.
- Select "Edit borders". The configuration options are displayed:
- 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:
- Select the controls in the "End of document" block that contain the totals.
- Place the controls at the lower-right corner of the table (above the text "Developed with WEBDEV").
- The report is displayed in the report editor:
- Our "Invoice" report is created. Save the report by clicking in the quick access buttons.
- Check the changes made by running the report in "Report Viewer" mode (click in the quick access buttons).
- 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.
Implementing the print process
To print the "RPT_Invoice" report:
- Go the "PAGE_Multicriteria_Search" page: click "PAGE_Multicriteria_Search" in the open document tabs.
- On the "Creation" tab, in the "Usual controls" group, click "Button".
- Click to the right of the Table control to create the Button control.
- Select the control and press Enter. The text becomes editable.
- Replace "BUTTON" with "PRINT" and confirm changes.
- Open the button code (F2) and write the following code in the "Click xxx (server)" event:
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.
- Close the code editor.
- Save the page ( or Ctrl + S).
- Now, all we have to do is run a real test:
- Test the "PAGE_Multicriteria_Search" page.
- Specify the desired criteria and start the search.
- Select one of the orders displayed in the Table control.
- Print the order via the "PRINT" button.
- The browser opens the PDF file. The browser has replaced the current page by the PDF file. We are going to change this behavior.
- Close the browser.
- To open the PDF file in another tab or browser:
- Double-click the "Print" button in the "PAGE_Multicriteria_Search" page. The description window opens.
- In the "General" tab, in the Destination control, select "New browser tab".
|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!