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.
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 say, “Why don’t I 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 off, let’s take a screenshot of what the layout looks like in WebDirect in browse mode:
Next, here’s the layout in the browser’s (Chrome) print “preview” window:
Pretty bad right? Well, some adjusting wouldn’t hurt. 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
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.
Additionally, most print.css that Web developers write have a built in reset line that applies to the entire body.
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.
Step 3: Test and adjust
Finally, after that work we are left with this:
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, but 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
Irritated that your checkbox and radio sets are all squished together like this?
Well, since we’re adding CSS why not add this line to the 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:
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 enjoyed 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 your results! Have a CSS class you’re using to modify WebDirect? Post it in the comments below!