Case Study - How to Display All Items in "Printable" Format to Make a Booklet

The Goal

A customer contacted us and explained that he wanted to make a booklet which combined all the items in his inventory and asked how 20/20 DataShed could help him.

The Process

There are a number of ways that such a task could be accomplished but the "best" solution for this customer would be one which met these specific objectives:

The "booklet" would not be printed/published by a professional print shop. (If this were the case we might have suggested that the data be exported in a raw format such as XML and the print shop could then do as they please with the data.)
Instead, the agents (users) of the web site would print their own booklets (in a three-ring-binder for example). This would enable the agents to take the listings with them to meetings with potential buyers. (In other words, this customer really wanted a streamlined way that the users could display specific search results in their web browser and then print the items on their own desktop printer.)
And last, the customer wanted to ensure that the pages excluded other agent's contact information and would be optimized for printing with appropriate background colours and without extraneous information like web menus and advertisement banners.

We determined that this customer wasn't asking us for a "booklet"! Instead, he was asking how the items in 20/20 DataShed could be printed as easily and quickly as possible. 20/20 DataShed already provides a "printable" view of each listing (by clicking on the "Printable Brochure" icon: ), but it would require a lot of time to click to and print each item separately -- surely there's a way to display and print all the items in one simple process.

The Solution

First, we developed a new "template.html" file for this customer. This revised file is very "plain" and simple:
- Unecessary costmetics have been removed and the page provides only the most basic navigation and layout.
- This file contains new <style> declarations which "undo" (or override) some of the styles that may be inherited by other stylesheets like the "2020applications_stylesheet.css" file.
- We wanted to ensure that background colours are always white.
- Extraneous borders and margins have been removed from the default style definitions.
- Font-sizes are redefined so that they're measured in "Points" instead of "Pixels" -- this will help ensure that the layout is more consitent on various printers.
Then we used the "item_template(Default).html" file as a starting point to create a detailed view of the items (but again we eliminated unecessary "clickable" elements that have no meaning on a printed page). As well, we've added some new CSS definitions specific to print media to create appropriate page breaks.
Then we duplicated the revised template and gave the duplicates the following file names:
- item_template(Default).html
- summary(5)view_template(Default).html
- summary(10)view_template(Default).html
- summary(25)view_template(Default).html
- summary(50)view_template(Default).html
Doing this ensures that the "detailed" view of the items is always displayed no matter how many search results are returned are being viewed on a single page.
And last, we created an empty file and called it "contactinfo_template.html". This effectively removes the contact information of the original listing agent.

With these seven (7) revised templates, the 20/20 DataShed inventory will be displayed on a plain white page that is very friendly to printers. Furthermore, users can still access the search form and therefore can print specific sets of search results. For example, the users can print all items in a particular city or state; they can print all items that are above or below a certain price; they can print only "new" items since a specific date (this is very handy if they want to update their "booklet").

Instructions

First, you can download the example templates here.
Then you can extract that zip file on your computer and view the "ReadMe" document.
We recommend that these templates should not be used as your "primary" templates (read the "Notes" below), but you can upload them to a different folder on your web site:
- Do not upload these files to the "templates" folder on your web site.
- Instead, we recommend you make a new folder, perhaps called "for_print" or "print_templates", and upload these files to that new folder at your web site.
Then you can view your inventory within these new templates by entering this link into your web browser's address bar:
http://[YOUR WEB SITE]/listings.asp?strTemplatesURL=http://[YOUR WEB SITE]/print_templates/
You should see your inventory now loaded with a very plain template. You can navigate to the search form, locate any items you want to print, then use the "Print" and "Print Preview" features of your web browser. Tip: If you want to provide room on the printed page for holes (if you inted to put the pages into a three-ring-binder), then you can use the "Page Setup" options in your web browser to create a margin on the left-side of the pages.
Note: When you visit this link, only you will see these new templates. This does not effect other pages of your site; other visitors at your web site will still see your original design.
The example "template.html" file also provides a link that you can use to revisit your web site's original template.

Notes

The template files available for download in this example should not be used as your "primary" templates -- it would cause too much unecessary strain on your web server. With these templates, it's possible to view all the information and all the images for all of your listings on a single web page. This of course makes it very easy to print but this is not practical in most settings and would cause your web server to work very hard to send enormous amounts of information to the web browser -- not to mention it would take the average web browser a significant amount of time and energy to download the huge file.

We also recommend that you do not publish the link anywhere that might be visible to the public or to search engines (for the same reason as above). Instead, we recommend that you could add the link to the "admin_template.html" that your registered members can use to access the pages.