Displaying FileMaker Data in Web Viewers the Right Way

Using a web viewer to display FileMaker data is one of the easiest and most versatile ways to enhance the functionality of your FileMaker app. Implementing this the right way is key to making sure your web viewer doesn’t “break” down the road.

Displaying Data the Wrong Way

A common way to display data is to use a ‘Let’ function. We will use one for our example, but it isn’t necessary to accomplish our goal.

Let ([

data = [your_FileMaker_field_here]

];

“data:text/html,”

& “<html><head>”

& “<style type=\”text/css\”>

body {

font-family: ‘Arial’ ;

font-size: .9em ;

padding:0px;  

margin:0px;

width: 100%;

}

    </style></head>”

& “<body>” &

data

& “</body></html>”

)

The Result:

Your web viewer works! For now that is. Most likely, you will not notice anything wrong right away, until the day a user types a special character (specifically the ‘#’) into your data source. All of a sudden and seemingly out of nowhere your web viewer will be “broken” and will no longer display the data correctly.

How to Display Data the Right Way

Luckily, this issue is easily fixed using one additional FileMaker function! To get our data to display properly in the web viewer, we’ll simple wrap our data source in the ‘GetAsURLEncoded’ function. This will convert special characters into html friendly text that won’t break your web viewer.

Let ([

data = GetAsURLEncoded ( [your_FileMaker_field_here] )

];

“data:text/html,”

& “<html><head>”

& “<style type=\”text/css\”>

body {

font-family: ‘Arial’ ;

font-size: .9em ;

padding:0px;  

margin:0px;

width: 100%;

}

    </style></head>”

& “<body>” &

data

& “</body></html>”

)

It Works!

This simple modification will ensure that your web viewer displays your FileMaker data consistently and accurately.