Welcome to the first full day of DevCon! I’d like to start things off with a bang and show off a bit of the hacking we’ve been doing to WebDirect.

Printing functionality

One of the largest hurdles to jump over in WebDirect’s scope of operation is the printing functionality. Thinking like a Web developer instead of a FileMaker developer for a moment, what would you do to make your WebDirect site printable?

As a FileMaker developer, you would first jump to having a secondary layout for printing that already has the formatting screen-ready. While that’s easy and possible, a Web developer might ask, why not just use a style sheet that has rules for printing? Though it’s a bit of work in FileMaker, you can achieve a custom CSS that will remove formatting to prepare any layout in your WebDirect solution for printing. Here’s how!

Note: This technique is not supported by FileMaker natively and should be used with caution. Future updates of FileMaker may break this hack, and you should always keep backups of your original system files when taking this kind of action. For this example, we will be using a virtual machine, Windows Server 2012 Standard, Chrome for Web browsing, Notepad++ for editing, and the FileMaker server sample file as our test file.

First, let’s take a look at the layout in WebDirect in browse mode:
WebDirect in browse mode


Next, here’s the layout in the Chrome browser print preview window:
layout in Chrome print preview
Pretty bad right? Let’s customize the CSS and clean it up.

Step 1: CSS structure
For this to work, you need to find a CSS style sheet that FileMaker will always load into all pages by default, regardless of theme or styles on your layout. Luckily Vaadin uses a style.css file that fits this description. In windows, this file is located at:

C:/Program Files/FileMaker/FileMaker Server/Web Publishing/publishing-engine/jwpc-tomcat/fmi/VAADIN/themes/default/style.css

Be sure to make a backup copy of this file. Once you have backed up style.css, you can begin to make your modifications.

Step 2: Write the print rules
First off, that big old line of code that starts with @import, there is a semicolon at the end of that line you need to remove. This will allow you to add CSS below that line. You will need to wrap your CSS in a media = print rule so that it is only applied during printing and not ALL the time. So, add @media print {}; braces in.

Note: the trailing semicolon that we took off the first line now goes on the end here.
print rules

Additionally, most print.css that Web developers write have a built in reset line that applies to the entire body.

built in reset line
Inside the print rule braces, we just add our CSS as we normally would. For this example we will focus on hiding the WebDirect menu bar and the layout’s header part.

CSS rules are applied by either object (e.g. “a”, “div”, “h2″), ID (e.g. #divname) or class (e.g. “.titletext”, “div.menuitem”). So by viewing the full rendered source of the page, I was able to find that the top menu had a class of menubar and the header part has a class of .v-csslayout-iwps_header. To hide items, the CSS tag of display: none is used.

SC5 - hiding the menu bar

Step 3: Test and adjust
Finally, after that work we are left with this:
 test and adjust

Notably better? I’ll let you decide. Remember, since this style.css file is always loaded with Vaadin, the print CSS will apply to all WebDirect files on the host in all layouts in each file. We protected browse mode by putting the @media print{} brackets around our CSS so it only applies during printing. Make sure to check all of your files and layouts once you implement this for errors

Step 4: Bonus step, align checkboxes and radio buttons
Are you irritated that your checkbox and radio sets are all squished together like this?
squished checkboxes and radio buttons

Well, since we’re adding CSS why not add this line to the CSS file?
added line to CSS file


The v-checkbox and v-radiobutton classes are applied to all of the checkbox sets and radio button sets in your file. The display:block CSS parameter will force the options to have a break before and after, so it will line up your options in one column, like this:
display block CSS parameter


Unfortunately, this style only allows for one column of options, so it will cut off the values that do not fit into column one. You can solve this by dividing your value lists, or making a really tall field. But hey, it’s a start!

We hope you enjoy this post. Feel free to download a copy of our style.css sheet used in this example. If you’re inspired, please let us know the results!

No comments

Leave a comment

Your email address will not be published. Required fields are marked *