{"id":13127,"date":"2020-11-23T05:49:55","date_gmt":"2020-11-23T13:49:55","guid":{"rendered":"https:\/\/www.seedcode.com\/?p=13127"},"modified":"2020-11-23T05:49:55","modified_gmt":"2020-11-23T13:49:55","slug":"filemaker-19-asynchronous-javascript-for-web-viewers","status":"publish","type":"post","link":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/","title":{"rendered":"Web Viewer Tips for FileMaker 19 &#8211; Writing Asynchronous JavaScript"},"content":{"rendered":"<p>Should we trust the script execution order in FileMaker?\u00a0Or should we write web viewer code that doesn&#8217;t care?<\/p>\n<p>In FileMaker 19, developers can now use JavaScript in their web viewer apps to call FileMaker scripts directly. And when those FileMaker scripts complete, they can, in turn, call JavaScript in the web viewer to pass results back. While it&#8217;s tempting to assume these two things will happen right after each other, it can be more useful to write JavaScript that doesn&#8217;t expect FileMaker to hand its results right back.<\/p>\n<p>This article describes writing &#8220;asynchronous JavaScript&#8221; that&#8217;s much more forgiving of different script behaviors in FileMaker and, at the same time, is much more like the JavaScript you&#8217;d write when connecting to sources other than FileMaker. As a result, JavaScript developers on your team may find this asynchronous pattern more recognizable than FileMaker-specific methods.<\/p>\n<p><a href=\"https:\/\/www.seedcode.com\/wp-content\/uploads\/2020\/11\/JSsocial.jpg\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-13136 size-full\" src=\"https:\/\/www.seedcode.com\/wp-content\/uploads\/2020\/11\/JSsocial.jpg\" alt=\"FileMaker 19 JavaScript\" width=\"1909\" height=\"1074\" srcset=\"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSsocial.jpg 1909w, https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSsocial-300x169.jpg 300w, https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSsocial-1024x576.jpg 1024w, https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSsocial-768x432.jpg 768w, https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSsocial-1536x864.jpg 1536w\" sizes=\"(max-width: 1909px) 100vw, 1909px\" \/><\/a><\/p>\n<h2>Background: JavaScript in the FileMaker Web Viewer<\/h2>\n<p><span data-preserver-spaces=\"true\">There&#8217;s a lot of excitement over the\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.geistinteractive.com\/2020\/05\/22\/filemaker-19-javascript-bffs-for-life\/\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">new JavaScript enhancements<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0introduced in\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.codence.com\/resources\/blog\/software\/filemaker-19-overview-of-the-new-features\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">FileMaker 19<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0that allow bi-directional communication between FileMaker and the web viewer. This means that developers can now write JavaScript apps for FileMaker that follow the typical pattern of sending a request to a data source, receiving a response asynchronously, and then updating the view without having to do any kind of refresh of the web viewer. Experienced JavaScript developers can now approach writing a JavaScript app for FileMaker without learning all the workarounds required to achieve something similar before these enhancements were introduced in version 19.<\/span><\/p>\n<p>Technically, it has been possible to do this kind of communication since FileMaker 13, but it involved many complex processes, often using FileMaker&#8217;s temp directory. Doing this also relied on the FMPURL protocol, which couldn&#8217;t talk to more than one FileMaker version at a time. Worse still, these methods wouldn&#8217;t work in Web Direct since neither the temp directory nor the FMPURL protocol is supported there. What you would typically end up with is a JavaScript architecture that was unique to supporting FileMaker.<!--more--><\/p>\n<p>At SeedCode, this meant that before FM19 we needed to maintain a separate branch in our code base for our FileMaker version of DayBack. In contrast, all the other DayBack platforms (Google, Salesforce, Basecamp, etc.) could all share a single code base as they all communicate with their APIs in a typical asynchronous way.<\/p>\n<blockquote><p>Using async JS in the web viewer turned out to be a good decision when Claris changed the order in which FileMaker.PerformScript executed scripts in v19.1<\/p><\/blockquote>\n<p><span data-preserver-spaces=\"true\">Asynchronous calls are used in JavaScript because there&#8217;s no way to know how long the call will take. If there&#8217;s more than one call being executed, there&#8217;s also no way to determine which one will be returned first. If these calls were done synchronously, the view would lock with each call until the response was returned. To prevent this locking, async JavaScript is written so the call to an API is decoupled from the response. The response is also written so that it doesn&#8217;t depend on being run at a particular point of the code&#8217;s overall execution. This is accomplished by having the response part of the routine written as its own function known as a\u00a0<\/span><em><span data-preserver-spaces=\"true\">callback<\/span><\/em><span data-preserver-spaces=\"true\">\u00a0(or a\u00a0<\/span><em><span data-preserver-spaces=\"true\">promise<\/span><\/em><span data-preserver-spaces=\"true\">\u00a0in more modern JavaScript environments).<\/span><\/p>\n<p>Here\u2019s a typical JavaScript example of doing an asynchronous call to Salesforce. In this request, the callback function is defined in the settings.success property. When the response comes back from Salesforce the processResult function will run with the payload from Salesforce as its data argument.<\/p>\n<pre class=\"prettyprint\">\/\/build settings object for Ajax call to Salesforce\n var settings = {};\n settings.client = client;\n settings.contentType = 'application\/json';\n settings.success = processResult;\n \n\n \/\/execute call to Salesforce\n Sfdc.canvas.client.ajax ( targetURL , settings );\n \n\n \/\/define callback function\n function processResult(data) {\n \u00a0 if(data.status===200){\n \u00a0 \u00a0 \/\/successful call, update the view\n \u00a0 \u00a0 document.getElementById('companyName').innerHTML = data.records[0].CompanyName;\n \u00a0 }\n }\n<\/pre>\n<h2>Using Asynchronous Calls in FileMaker 19&#8217;s Web Viewer<\/h2>\n<p>With the new features in FileMaker 19, we can now write a similar flow in DayBack from FileMaker. When a typical API call is made, the function that should be run to handle the response is registered as the callback. This is done at the browser level, and it is the browser that keeps track of which callback is executed for each API call. In FileMaker 19, if we want to query data from the FileMaker file itself, there is no API per se, but the FileMaker.PerformScript method that\u2019s now injected into the Web Viewer <strong>lets us roll our own API including callbacks<\/strong>.<\/p>\n<p>In DayBack, for example, as the calendar loads into the web viewer, it\u2019s going to start making calls to gather data from the FileMaker file using find requests. These functions start looking something like this:<\/p>\n<pre class=\"prettyprint\">function getFileMakerEvents ( layout, findRequests, callback) {\n  var payload = {\n    layout: layout,\n    findRequests : findRequests,\n  };\n  FileMaker.PerformScript (\u2018getFileMakerEvents\u2019 , JSON.stringify( payload ));\n}\n<\/pre>\n<p>(We use the same name for the JS function and for the FileMaker script so we can remember they&#8217;re part of the same routine. Both are called \u00a0&#8220;getFileMakerEvents&#8221; in this example.)<\/p>\n<p>Then in FileMaker, the &#8220;getFileMakerEvents&#8221;\u00a0script looks something like this to start and finds our records:<\/p>\n<p><a href=\"https:\/\/www.seedcode.com\/wp-content\/uploads\/2020\/11\/1.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"aligncenter wp-image-13132 size-full\" src=\"https:\/\/www.seedcode.com\/wp-content\/uploads\/2020\/11\/1.png\" alt=\"Web Viewer JavaScript in FileMaker\" width=\"946\" height=\"672\" srcset=\"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/1.png 946w, https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/1-300x213.png 300w, https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/1-768x546.png 768w\" sizes=\"(max-width: 946px) 100vw, 946px\" \/><\/a><\/p>\n<h2>Deciding to Use Callbacks<\/h2>\n<p><span data-preserver-spaces=\"true\">The new\u00a0<\/span><strong><span data-preserver-spaces=\"true\">Perform JavaScript in Web Viewer<\/span><\/strong><span data-preserver-spaces=\"true\">\u00a0script step provides a way to send the results from our FileMaker script back into the web viewer, but how do we tell the script which JS function to call? Even though FileMaker scripting is not asynchronous, we wanted to treat it like it was and not rely on anything in FileMaker&#8217;s behavior to determine when or where that result would be returned. We decided to treat it just like any other API call.<\/span><\/p>\n<p>That turned out to be a good decision when Claris changed the order in which FileMaker.PerformScript executed scripts in v19.1. In version 19.0, the FileMaker.PerformScript function placed the requested script into the current script, very much like a script trigger executes when triggered by an action in another script. In version 19.1, this was changed, and the script is now placed at the bottom of the script stack. If your JavaScript relies on the execution order of the script stack to process the result, it&#8217;s likely something broke with 19.1. As a developer, you&#8217;d now need to worry about which version of FileMaker 19 your JavaScript is running in and branch your code accordingly.<\/p>\n<h2>How The Callback Works<\/h2>\n<p>We roll our own callback registration process. This starts by setting a simple empty object at the global level of our app. The Perform JavaScript in Web Viewer script step requires the function to be available at the global level, so we\u2019ll create a single function for that here at the global level as well.<\/p>\n<pre class=\"prettyprint\">\/\/object for \"registering callbacks\"\n dbk_fmFunctions={};\n\n\/\/function for processing fileMaker results\n function processFileMakerResponse( data ){\n   \/\/convert JSON to object\n   var response = JSON.parse( data );\n   \/\/get callback for this response\n   var callbackId = response.callbackId;\n   \/\/execute callback\n   dbk_fmFunctions[callbackId](response);\n   \/\/clean-up object\n   delete dbk_fmFunctions[callbackId];\n }\n<\/pre>\n<p>Now we can update our JavaScript function getFileMakerEvents to \u201cregister\u201d the callback in our global object. We\u2019ll assign it a UUID and send that as part of the payload to the FileMaker Script. A simple JavaScript utility function is used for generating a unique id.<\/p>\n<pre class=\"prettyprint\">function getFileMakerEvents( layout, findRequests, callback ) {\n  var callbackId = getUUID();\n  \/\/register callback at global level   \n  dbk_fmFunctions[callbackId] = callback; \n  \/\/include callback id in payload to fileMaker\n  var payload = {\n    layout: layout,\n    findRequests : findRequests,\n    callbackId: callbackId\n   };\nFileMaker.PerformScript ('findEvents', JSON.stringify( payload ));\n}\n<\/pre>\n<p>Then in the FileMaker script, we can now call the global function and specify the exact callback to handle the result:<\/p>\n<p><a href=\"https:\/\/www.seedcode.com\/wp-content\/uploads\/2020\/11\/2.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"aligncenter wp-image-13133 size-full\" src=\"https:\/\/www.seedcode.com\/wp-content\/uploads\/2020\/11\/2.png\" alt=\"JavaScript for FileMaker 19\" width=\"1315\" height=\"896\" srcset=\"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/2.png 1315w, https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/2-300x204.png 300w, https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/2-1024x698.png 1024w, https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/2-768x523.png 768w\" sizes=\"(max-width: 1315px) 100vw, 1315px\" \/><\/a><\/p>\n<h2>Conclusions<\/h2>\n<p>For a company like SeedCode, we can now have a single code base and request architecture for all of our DayBack platforms. These all follow a single pattern for working with their data sources and the functions used all have the same shape. The structure for working with FileMaker and working with Salesforce, for example, is now the same:<\/p>\n<pre class=\"prettyprint\">getFileMakerEvents ( layout , findRequests , callback )<\/pre>\n<p>and<\/p>\n<pre class=\"prettyprint\">getSalesforceEvents ( object , soql , callback )<\/pre>\n<p>Understanding asynchronous calls is essential to writing good JavaScript, whether working inside a FileMaker web viewer or in the browser. Even though the FileMaker.PerformScript doesn&#8217;t require an asynchronous approach, by treating it as such we can isolate our app from changes in FileMaker&#8217;s script execution order. We also end up writing JS that isn&#8217;t so specific to FileMaker and that other developers will recognize more easily.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Should we trust the script execution order in FileMaker?\u00a0Or should we write web viewer code that doesn&#8217;t care? In FileMaker 19, developers can now use JavaScript in their web viewer apps to call FileMaker scripts directly. And when those FileMaker scripts complete, they can, in turn, call JavaScript in the web viewer to pass results back. While it&#8217;s tempting to assume these two things will happen right after each other, it can be more useful to write JavaScript that doesn&#8217;t expect FileMaker to hand its results right back. This article describes writing &#8220;asynchronous JavaScript&#8221; that&#8217;s much more forgiving of different script behaviors in FileMaker and, at the same time, is much more like the JavaScript you&#8217;d write when connecting to sources other than FileMaker. As a result, JavaScript developers on your team may find this asynchronous pattern more recognizable than FileMaker-specific methods. Background: JavaScript in the FileMaker Web Viewer There&#8217;s a lot of excitement over the\u00a0new JavaScript enhancements\u00a0introduced in\u00a0FileMaker 19\u00a0that allow bi-directional communication between FileMaker and the web viewer. This means that developers can now write JavaScript apps for FileMaker that follow the typical pattern of sending a request to a data source, receiving a response asynchronously, and then updating the view without having to do any kind of refresh of the web viewer. Experienced JavaScript developers can now approach writing a JavaScript app for FileMaker without learning all the workarounds required to achieve something similar before these enhancements were introduced in version 19. Technically, it has been possible to do this kind of communication since FileMaker 13, but it involved many complex processes, often using FileMaker&#8217;s temp directory. Doing this also relied on the FMPURL protocol, which couldn&#8217;t talk to more than one FileMaker version at a time. Worse still, these methods wouldn&#8217;t work in Web Direct since neither the temp directory nor the FMPURL protocol is supported there. What you would typically end up with is a JavaScript architecture that was unique to supporting FileMaker.<\/p>\n","protected":false},"author":3,"featured_media":13135,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[40,23,28],"class_list":["post-13127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-filemaker-19","tag-javascript","tag-webdirect"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>FileMaker 19 - Asynchronous JavaScript for Web Viewers - SeedCode<\/title>\n<meta name=\"description\" content=\"Should we trust the script execution order in FileMaker?\u00a0Or should we write web viewer code that doesn&#039;t care? Writing async JavaScript is our approach.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"FileMaker 19 - Asynchronous JavaScript for Web Viewers - SeedCode\" \/>\n<meta property=\"og:description\" content=\"Should we trust the script execution order in FileMaker?\u00a0Or should we write web viewer code that doesn&#039;t care? Writing async JavaScript is our approach.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/\" \/>\n<meta property=\"og:site_name\" content=\"SeedCode\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/seedcoder\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-23T13:49:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSsocial.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1909\" \/>\n\t<meta property=\"og:image:height\" content=\"1074\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jasonchryoung\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSsocial.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@dayback\" \/>\n<meta name=\"twitter:site\" content=\"@dayback\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jasonchryoung\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/\"},\"author\":{\"name\":\"jasonchryoung\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/21c8e63200786c642eb068377e428ebd\"},\"headline\":\"Web Viewer Tips for FileMaker 19 &#8211; Writing Asynchronous JavaScript\",\"datePublished\":\"2020-11-23T13:49:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/\"},\"wordCount\":1257,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/seedcode.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSfeat.png\",\"keywords\":[\"FileMaker 19\",\"javascript\",\"WebDirect\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/\",\"url\":\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/\",\"name\":\"FileMaker 19 - Asynchronous JavaScript for Web Viewers - SeedCode\",\"isPartOf\":{\"@id\":\"https:\/\/seedcode.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSfeat.png\",\"datePublished\":\"2020-11-23T13:49:55+00:00\",\"description\":\"Should we trust the script execution order in FileMaker?\u00a0Or should we write web viewer code that doesn't care? Writing async JavaScript is our approach.\",\"breadcrumb\":{\"@id\":\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#primaryimage\",\"url\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSfeat.png\",\"contentUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSfeat.png\",\"width\":319,\"height\":325},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/seedcode.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Viewer Tips for FileMaker 19 &#8211; Writing Asynchronous JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/seedcode.com\/#website\",\"url\":\"https:\/\/seedcode.com\/\",\"name\":\"SeedCode\",\"description\":\"Build the Software You&#039;ve Always Wanted\",\"publisher\":{\"@id\":\"https:\/\/seedcode.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/seedcode.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/seedcode.com\/#organization\",\"name\":\"SeedCode\",\"url\":\"https:\/\/seedcode.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png\",\"contentUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png\",\"width\":595,\"height\":189,\"caption\":\"SeedCode\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/seedcoder\",\"https:\/\/x.com\/dayback\",\"https:\/\/www.linkedin.com\/company\/seedcode\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/21c8e63200786c642eb068377e428ebd\",\"name\":\"jasonchryoung\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"jasonchryoung\"},\"url\":\"https:\/\/seedcode.com\/author\/jasonchryoung\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"FileMaker 19 - Asynchronous JavaScript for Web Viewers - SeedCode","description":"Should we trust the script execution order in FileMaker?\u00a0Or should we write web viewer code that doesn't care? Writing async JavaScript is our approach.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/","og_locale":"en_US","og_type":"article","og_title":"FileMaker 19 - Asynchronous JavaScript for Web Viewers - SeedCode","og_description":"Should we trust the script execution order in FileMaker?\u00a0Or should we write web viewer code that doesn't care? Writing async JavaScript is our approach.","og_url":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/","og_site_name":"SeedCode","article_publisher":"https:\/\/www.facebook.com\/seedcoder","article_published_time":"2020-11-23T13:49:55+00:00","og_image":[{"width":1909,"height":1074,"url":"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSsocial.jpg","type":"image\/jpeg"}],"author":"jasonchryoung","twitter_card":"summary_large_image","twitter_image":"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSsocial.jpg","twitter_creator":"@dayback","twitter_site":"@dayback","twitter_misc":{"Written by":"jasonchryoung","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#article","isPartOf":{"@id":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/"},"author":{"name":"jasonchryoung","@id":"https:\/\/seedcode.com\/#\/schema\/person\/21c8e63200786c642eb068377e428ebd"},"headline":"Web Viewer Tips for FileMaker 19 &#8211; Writing Asynchronous JavaScript","datePublished":"2020-11-23T13:49:55+00:00","mainEntityOfPage":{"@id":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/"},"wordCount":1257,"commentCount":0,"publisher":{"@id":"https:\/\/seedcode.com\/#organization"},"image":{"@id":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#primaryimage"},"thumbnailUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSfeat.png","keywords":["FileMaker 19","javascript","WebDirect"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/","url":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/","name":"FileMaker 19 - Asynchronous JavaScript for Web Viewers - SeedCode","isPartOf":{"@id":"https:\/\/seedcode.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#primaryimage"},"image":{"@id":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#primaryimage"},"thumbnailUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSfeat.png","datePublished":"2020-11-23T13:49:55+00:00","description":"Should we trust the script execution order in FileMaker?\u00a0Or should we write web viewer code that doesn't care? Writing async JavaScript is our approach.","breadcrumb":{"@id":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#primaryimage","url":"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSfeat.png","contentUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2020\/11\/JSfeat.png","width":319,"height":325},{"@type":"BreadcrumbList","@id":"https:\/\/seedcode.com\/filemaker-19-asynchronous-javascript-for-web-viewers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/seedcode.com\/"},{"@type":"ListItem","position":2,"name":"Web Viewer Tips for FileMaker 19 &#8211; Writing Asynchronous JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/seedcode.com\/#website","url":"https:\/\/seedcode.com\/","name":"SeedCode","description":"Build the Software You&#039;ve Always Wanted","publisher":{"@id":"https:\/\/seedcode.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/seedcode.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/seedcode.com\/#organization","name":"SeedCode","url":"https:\/\/seedcode.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/#\/schema\/logo\/image\/","url":"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png","contentUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png","width":595,"height":189,"caption":"SeedCode"},"image":{"@id":"https:\/\/seedcode.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/seedcoder","https:\/\/x.com\/dayback","https:\/\/www.linkedin.com\/company\/seedcode\/"]},{"@type":"Person","@id":"https:\/\/seedcode.com\/#\/schema\/person\/21c8e63200786c642eb068377e428ebd","name":"jasonchryoung","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"jasonchryoung"},"url":"https:\/\/seedcode.com\/author\/jasonchryoung\/"}]}},"_links":{"self":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts\/13127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/comments?post=13127"}],"version-history":[{"count":0,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts\/13127\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/media\/13135"}],"wp:attachment":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/media?parent=13127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/categories?post=13127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/tags?post=13127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}