{"id":11477,"date":"2020-05-05T19:02:14","date_gmt":"2020-05-05T19:02:14","guid":{"rendered":"https:\/\/www.directimpactsolutions.com\/?p=11477"},"modified":"2023-05-18T16:30:54","modified_gmt":"2023-05-18T16:30:54","slug":"displaying-pdf-files-in-filemaker","status":"publish","type":"post","link":"https:\/\/www.directimpactsolutions.com\/en\/displaying-pdf-files-in-filemaker\/","title":{"rendered":"Displaying PDF files in FileMaker"},"content":{"rendered":"<p>Displaying PDF files in FileMaker web viewers is convenient for users and adds depth and interactivity to a layout. This article includes a simple step-by-step guide for displaying PDFs in FileMaker, as well as a backend look at why this method works.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/app.works\/wp-content\/uploads\/2020\/05\/ezgif.com-video-to-gif-1.gif\" alt=\"displaying PDF file FileMaker demo\"\/><\/figure><p>Interactive PDF in a container field<\/p><h3 class=\"wp-block-heading\" style=\"font-size:25px\">To display PDFs:<\/h3><ol class=\"wp-block-list\"><li>Add a container field to the layout<\/li>\n\n<li>Go to layout mode<\/li>\n\n<li>Select the container field then go to the \u201cData\u201d tab in the inspector and select \u201cInteractive content\u201d<\/li><\/ol><figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/To_Display_PDFs.png\" alt=\"display PDF\" class=\"wp-image-11478\" width=\"285\" height=\"148\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/To_Display_PDFs.png 384w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/To_Display_PDFs-300x156.png 300w\" sizes=\"auto, (max-width: 285px) 100vw, 285px\" \/><\/figure><p>You should now be able to see PDF files in interactive container fields in FileMaker Pro, FileMaker Go and WebDirect. I prefer to use the \u201cInsert File\u201d script step because I can customize its dialog box to have a consistent behavior for users. For example, I can set it to only allow certain files to be uploaded to the container field, and to always display the content of the file when possible. Make sure to select \u201cContent of file\u201d to display the contents of PDF files in interactive container fields.<\/p><figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Insert_File_Script_Step.jpg\" alt=\"insert file script\" class=\"wp-image-11482\" width=\"386\" height=\"479\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Insert_File_Script_Step.jpg 485w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Insert_File_Script_Step-242x300.jpg 242w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><\/figure><p>Insert File script step<\/p><h3 class=\"wp-block-heading\" style=\"font-size:25px\">Caveats:<\/h3><ul class=\"wp-block-list\"><li>Selecting \u201cOptimize for Images\u201d will only render the first page of the PDF file<\/li>\n\n<li>If you\u2019re having problems opening the PDF file check out\u00a0<a href=\"https:\/\/directimpactsolutions.com\/en\/why-cant-i-view-pdfs\/\">this blog<\/a><\/li>\n\n<li>Hosted\u00a0solutions must have a valid SSL certificate. Getting \u201cThe webpage cannot be found\u201d is often caused by not having a valid SSL certificate on both the web\u00a0server and the FileMaker\u00a0Server.<\/li>\n\n<li>Use&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Server_Name_Indication\" target=\"_blank\" rel=\"noreferrer noopener\">SNI<\/a>&nbsp;on the web server if you\u2019re using an SSL certificate on the web server that\u2019s different than the one installed on the FileMaker server. This is often the case in large WANs. By \u201cweb server,\u201d I\u2019m referring to the web server of the FileMaker server, which is Apache for MacOs and IIS for Windows.<\/li>\n\n<li>Storing files as references is a recipe for disaster. For wisdom about container fields, check out our videos about them:&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=3jKETRmGR_8\" target=\"_blank\" rel=\"noreferrer noopener\">part 1<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=Qf4SpveMua0\" target=\"_blank\" rel=\"noreferrer noopener\">part 2<\/a><\/li>\n\n<li>For internal networks,&nbsp;<a href=\"https:\/\/letsencrypt.org\/docs\/challenge-types\/#dns-01-challenge\" target=\"_blank\" rel=\"noreferrer noopener\">install an SSL certificate<\/a>&nbsp;on FileMaker Server and add a DNS record in order to get a valid SSL connection to the server from the client (fms.mycompany.com \u2013&gt; 192.168.1.10)<\/li><\/ul><figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Website_Page_Error.png\" alt=\"Screen SSL certificate not valid\" class=\"wp-image-11484\" width=\"391\" height=\"346\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Website_Page_Error.png 600w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Website_Page_Error-300x266.png 300w\" sizes=\"auto, (max-width: 391px) 100vw, 391px\" \/><\/figure><p>Screen if SSL certificate is not valid<\/p><h3 class=\"wp-block-heading\" style=\"font-size:25px\">Under the hood:<\/h3><p>The FileMaker server streams the PDF files to the container field. The container field opens&nbsp;<em>https:\/\/[your domain]:16000\/Streaming_SSL\/\u2026<\/em>&nbsp;to display the PDF file in the interactive viewer.<\/p><blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p class=\"has-medium-font-size\"><strong>Interactive containers are rendered using the web browser technologies that web viewer uses.<\/strong><\/p><cite>FileMaker Glossary (<a href=\"https:\/\/fmhelp.filemaker.com\/help\/18\/fmp\/en\/FMP_Help\/glossary.html#ww1045835\" target=\"_blank\" rel=\"noreferrer noopener\">source<\/a>)<\/cite><\/blockquote><figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Notice_URL_Bottom.png\" alt=\"\" class=\"wp-image-11486\" width=\"396\" height=\"352\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Notice_URL_Bottom.png 599w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Notice_URL_Bottom-300x267.png 300w\" sizes=\"auto, (max-width: 396px) 100vw, 396px\" \/><\/figure><p>Notice the URL at the bottom<\/p><h3 class=\"wp-block-heading\" style=\"font-size:25px\">Cool things you can do with PDF files in FileMaker (including WebDirect):<\/h3><ul class=\"wp-block-list\"><li>Export layouts as PDF (e.g. sales reports)<\/li>\n\n<li>Interact with PDF\u00a0<a href=\"https:\/\/directimpactsolutions.com\/en\/how-to-download-a-file-from-filemaker-server-19\/\">files within FileMaker<\/a><\/li>\n\n<li>Convert PDF files to HTML using Javascript in a web viewer<\/li>\n\n<li>Convert any Word, Excel or Powerpoint file to PDF without a FileMaker plugin (<a href=\"https:\/\/directimpactsolutions.com\/en\/word-excel-to-pdf-in-filemaker\" target=\"_blank\" rel=\"noreferrer noopener\">click here for more info<\/a>)<\/li>\n\n<li>Append pages to existing PDF files<\/li>\n\n<li>Use OCR with scanned documents through FileMaker to create PDF files with selectable text<\/li><\/ul><p>If you\u2019re interested in an in-depth guide on any of the above, feel free to contact us!<\/p><hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)\"\/><p class=\"has-small-font-size\"><em>*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":"<p>Displaying PDF files in FileMaker web viewers is convenient for users and adds depth and interactivity to a layout. This article includes a simple step-by-step guide for displaying PDFs in FileMaker, as well as a backend look at why this method works. Interactive PDF in a container field To display PDFs: You should now be &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.directimpactsolutions.com\/en\/displaying-pdf-files-in-filemaker\/\"> <span class=\"screen-reader-text\">Displaying PDF files in FileMaker<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":6,"featured_media":11717,"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":"","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":"","footnotes":""},"categories":[29],"tags":[39,203],"class_list":["post-11477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-low-code","tag-filemaker","tag-pdf"],"uagb_featured_image_src":{"full":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2020\/05\/Displaying_PDF_Files_in_FileMaker.jpg",1500,900,false],"thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2020\/05\/Displaying_PDF_Files_in_FileMaker-150x150.jpg",150,150,true],"medium":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2020\/05\/Displaying_PDF_Files_in_FileMaker-300x180.jpg",300,180,true],"medium_large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2020\/05\/Displaying_PDF_Files_in_FileMaker-768x461.jpg",768,461,true],"large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2020\/05\/Displaying_PDF_Files_in_FileMaker-1024x614.jpg",1024,614,true],"1536x1536":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2020\/05\/Displaying_PDF_Files_in_FileMaker.jpg",1500,900,false],"2048x2048":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2020\/05\/Displaying_PDF_Files_in_FileMaker.jpg",1500,900,false],"woocommerce_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2020\/05\/Displaying_PDF_Files_in_FileMaker-300x300.jpg",300,300,true],"woocommerce_single":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2020\/05\/Displaying_PDF_Files_in_FileMaker-600x360.jpg",600,360,true],"woocommerce_gallery_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2020\/05\/Displaying_PDF_Files_in_FileMaker-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":"Displaying PDF files in FileMaker web viewers is convenient for users and adds depth and interactivity to a layout. This article includes a simple step-by-step guide for displaying PDFs in FileMaker, as well as a backend look at why this method works. Interactive PDF in a container field To display PDFs: You should now be&hellip;","_links":{"self":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/11477","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=11477"}],"version-history":[{"count":8,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/11477\/revisions"}],"predecessor-version":[{"id":21017,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/11477\/revisions\/21017"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media\/11717"}],"wp:attachment":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media?parent=11477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/categories?post=11477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/tags?post=11477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}