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.
*This article was originally written for AppWorks, which has since joined Direct Impact Solutions. This article is intended for informative purposes only. To the best of our knowledge, this information is accurate as of the date of publication.