The Original FileMaker Community
Business Templates - Demo Apps - Video Tutorials -Samples - Help - 46000 Member Forum

The Leading Filemaker Developer Tools

Devcon WebDirect Series – Day 2 – Printer Friendly CSS – FileMaker Today


Why is it when I see the word hack, I have to read on…here is the latest from Mike Beargie at Anvil Dataworks, read on….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 an 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 stylesheet that has rules for printing?”. Though it’s a bit of work in FileMaker, you can achieve a custom CSS stylesheet that will remove formatting to prepare any layout in your WebDirect solution for printing. Here’s how!


***Warning*** – 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:

Browse mode file


Next, here’s the layout in the browser’s (chrome) print “preview” window:

print preview before CSS


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 stylesheet 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.

media print ruleAdditionally, most print.css that web developers write have a built in “reset” line, that applies to the entire body.

CSS body reset for print


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.

CSS modifications


STEP 3 – Test and Adjust

Finally after that work, we are left with this:

After CSS mods


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?

Problem checkboxes and radio sets


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

CSS Code for modifying checkboxes and radio buttons

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 your options up in one column. Like this:

adjusted with CSS


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, 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! If you are interested in a copy of our style.css sheet used in this example, you can Download it here. Need expert help with FileMaker WebDirect? Anvil Dataworks is here to help! Contact us today to get started.


The post Devcon WebDirect Series – Day 2 – Printer Friendly CSS appeared first on Anvil Dataworks.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Privacy & Cookies Policy