I have shown you code before for printing reports in WebDev, so that the report opens as a PDF in a separate tab of the browser. Which is an important feature to include, especially on a WebDev dynamic site, otherwise the user will lose their “place” in your site.

Recently I had a project where the user could select several reports that would print at once and I quickly learned that the technique used for a single report needed some tweaking for multiple reports.

So this week we will review the original technique for a single report, and then extended it for multiple reports.

So let’s start by reviewing how to print single report in WebDev.

Here’s an example page with buttons to print one of 4 versions of the products report. If we take a look at the code behind the All Products button we will see

The first thing to note is the Browser code. The ChangeTarget function is what causes the next display to be in a separate tab of the browser.

Next you should not that the Server code is not ran in “AJAX” mode. The FileDisplay command will not work in “AJAX” mode.

Line 1 creates a unique file name for the resulting PDF file.

Line 2 tell the report to generate the PDF.

Line 3 initializes the Query for the report.

Line 4 actually prints the report and generates the PDF

Line 5 displays the resulting PDF, and because of the ChangeTarget in the browser code it will be in a separate tab. Without the change target the PDF would be displayed in the current tab, and the user will have lost any of your websites interface. They would be forced to use the back button to get back to your site, which if you have spent anytime working with WebDev Dynamic sites you know is fraught with issues.

Line 6 delete’s the PDF file, to keep the server clean. Note you will probably need a routine that occasionally cleans up the PDFs, as you will run into the occasional issue that keeps it from being deleted, such as a user closing their browser while the report is generating, etc.

That is all there is to printing a report in WebDev and having it show as a PDF in a separate tab of the browser. If you reviewed the code behind the other buttons, you would see they are very similar.

But that sure isn’t the nicest interface. What if the user wants several of these reports? He would be forced to print them one at a time. If we redesigned the interface to use checkboxes instead we could have something like this

Now the user can select all the reports that he wants, and just click the print button once and each report will open in a separate tab.

You might expect the code behind the button to look something like this

However that code will not work correctly. Only the first selected report will ever be displayed. The issue is that we are not able to issue multiple file display commands in a single call. So we need a way to run issue the commands in separate calls. Hopefully you have been paying attention to some of my webinars, and you already have an idea how I am going to solve the issue.

If you guessed a timer, some hidden entry controls and buttons, well then you have definitely been paying attention.

We start by declaring three global browser variables. A variable to hold the id of the timer we start. We also create two variable that will be used as a counter to know how many reports have been selected and how many have been printed. These is define in the Onload event, which is how you declare a global browser variable.

We create 5 hidden edit controls, Four will hold the name of the PDF files to print, and one will be used will each loop of the timer to print a single report.

We change the server code of our non working button slightly.

We removed the FileDisplay and fDelete functions, and instead replaced them with lines that move the PDF file names into the hidden edit controls. Also note that the button is now AJAX enabled, since we are not issuing a FileDisplay directly in this code.

Note: We will be changing the Browser code of the button as well, but we have a few other things we need to do first.

Next we create a hidden button that will issue the FileDisplay and fDelete functions

The code behind this button is:

Notice this is the “missing” code we removed from our other button. We use the ChangeTarget function in the browser code. And we issue the FileDisplay and fDelete function using the Hidden Entry Control to get the filename. And finally we clear the hidden entry control.

Next we create a local browser procedure. This procedure will be ran via a timer that we will be creating shortly.

This code is pretty simple. Each time it runs (the timer fires) it looks to see if any of the four hidden edit controls contain a file name. If they do it increments the global browser variable “ReportsPrinted”, moves the file name to the hidden edit control used by the “Actual Print” button. Clears the hidden edit control, and then “Presses” the “Actual Print” button. The ExecuteProcess function is very valuable in situations like this, as it reacts the same as if the user had press the button manually.

Note the way the IF statements are structured only one report will be printed each time the procedure runs (the timer fires).

The final 3 lines of code, check to see if all the reports have been printed and if so it ends the timer, so the procedure will quit being ran.

Finally, as mentioned above we need to change the browser code of the visible button that the user actually presses.

Instead of changing the target (that code was moved to the hidden button), we start the timer. So every 1/4 of a second the PrintOneReport function that we just wrote will be executed.

We set both the ReportCount and the ReportsPrinted to 0.

The a series of IF statements increase the ReportCount for each checked report. This is how we know how many reports need to be printed, so we can compare that to how many reports have printed so far, and once all reports have been printed we can stop the timer.

And now we have an interface that will let the user select multiple reports, and then open then as individual tabs in the browser.

As always hopefully this has inspired you with ways that you can use these techniques to expand your own websites and applications.

Uncle Pete’s Corner is webinar series on all things WX, to watch the watch the Uncle Pete’s corner webinar that is the companion to this article, and many other WX related webinars go to the WinDev US YouTube Channel and be sure to also join the WxLive – US Communityon Google+ to get notices about upcoming webinars. On the Google+ community you will find a active group developers discussing all things WX.

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

• WEBDEV
• WX