{"id":11509,"date":"2019-04-15T18:45:23","date_gmt":"2019-04-15T18:45:23","guid":{"rendered":"https:\/\/www.directimpactsolutions.com\/?p=11509"},"modified":"2024-08-06T01:14:51","modified_gmt":"2024-08-06T01:14:51","slug":"displaying-filemaker-data-in-web-viewers","status":"publish","type":"post","link":"https:\/\/www.directimpactsolutions.com\/en\/displaying-filemaker-data-in-web-viewers\/","title":{"rendered":"Displaying FileMaker Data in Web Viewers the Right Way"},"content":{"rendered":"
\"displaying<\/figure>

Using a web viewer<\/a> 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<\/em> way is key to making sure your web viewer doesn\u2019t \u201cbreak\u201d down the road.<\/p>

Displaying Data the Wrong Way<\/strong><\/h3>

A common way to display data is to use a \u2018Let\u2019 function. We will use one for our example, but it isn\u2019t necessary to accomplish our goal.<\/p>

Let ([\n\ndata = [your_FileMaker_field_here]\n\n];\n\n\u201cdata:text\/html,\u201d\n\n& \u201c<html><head>\u201d\n\n& \u201c<style type=\\\u201dtext\/css\\\u201d>\n\nbody {\n\nfont-family: \u2018Arial\u2019 ;\n\nfont-size: .9em ;\n\npadding:0px;  \n\nmargin:0px;\n\nwidth: 100%;\n\n}\n\n    <\/style><\/head>\u201d\n\n& \u201c<body>\u201d &\n\ndata\n\n& \u201c<\/body><\/html>\u201d\n\n)\n\n<\/code><\/pre>
The Result:<\/strong><\/h3>
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 \u2018#\u2019) into your data source. All of a sudden and seemingly out of nowhere your web viewer will be \u201cbroken\u201d and will no longer display the data correctly.<\/p>
How to Display Data the Right Way<\/strong><\/h3>
Luckily, this issue is easily fixed using one additional FileMaker function! To get our data to display properly in the web viewer<\/a>, we\u2019ll simple wrap our data source in the \u2018GetAsURLEncoded\u2019 function. This will convert special characters into html friendly text that won\u2019t break your web viewer.
<\/p>
Let ([\n\ndata = GetAsURLEncoded ( [your_FileMaker_field_here] )\n\n];\n\n\u201cdata:text\/html,\u201d\n\n& \u201c<html><head>\u201d\n\n& \u201c<style type=\\\u201dtext\/css\\\u201d>\n\nbody {\n\nfont-family: \u2018Arial\u2019 ;\n\nfont-size: .9em ;\n\npadding:0px;  \n\nmargin:0px;\n\nwidth: 100%;\n\n}\n\n    <\/style><\/head>\u201d\n\n& \u201c<body>\u201d &\n\ndata\n\n& \u201c<\/body><\/html>\u201d\n\n)\n\n<\/code><\/pre>
It Works!<\/strong><\/h3>
This simple modification will ensure that your\u00a0web viewer displays your FileMaker data<\/a> consistently and accurately. \u00a0<\/p>
*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.<\/em><\/p>","protected":false},"excerpt":{"rendered":"
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\u2019t \u201cbreak\u201d down the road. Displaying Data the Wrong Way A common way to display data is to use …<\/p>\n
  Displaying FileMaker Data in Web Viewers the Right Way<\/span> Read More »<\/a><\/p>\n","protected":false},"author":6,"featured_media":11769,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","footnotes":""},"categories":[29],"tags":[39,212],"class_list":["post-11509","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-low-code","tag-filemaker","tag-web-viewers"],"uagb_featured_image_src":{"full":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Good-vs-Bad-edited.jpg",1279,767,false],"thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Good-vs-Bad-edited-150x150.jpg",150,150,true],"medium":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Good-vs-Bad-edited-300x180.jpg",300,180,true],"medium_large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Good-vs-Bad-edited-768x461.jpg",768,461,true],"large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Good-vs-Bad-edited-1024x614.jpg",1024,614,true],"1536x1536":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Good-vs-Bad-edited.jpg",1279,767,false],"2048x2048":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Good-vs-Bad-edited.jpg",1279,767,false],"woocommerce_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Good-vs-Bad-edited-300x300.jpg",300,300,true],"woocommerce_single":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Good-vs-Bad-edited-600x360.jpg",600,360,true],"woocommerce_gallery_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Good-vs-Bad-edited-100x100.jpg",100,100,true]},"uagb_author_info":{"display_name":"Direct Impact Solutions","author_link":"https:\/\/www.directimpactsolutions.com\/en\/author\/direct-impact-solutions\/"},"uagb_comment_info":0,"uagb_excerpt":"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\u2019t \u201cbreak\u201d down the road. Displaying Data the Wrong Way A common way to display data is to use…","_links":{"self":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/11509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/comments?post=11509"}],"version-history":[{"count":7,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/11509\/revisions"}],"predecessor-version":[{"id":17790,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/11509\/revisions\/17790"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media\/11769"}],"wp:attachment":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media?parent=11509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/categories?post=11509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/tags?post=11509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}