{"id":8436,"date":"2015-01-15T11:21:01","date_gmt":"2015-01-15T19:21:01","guid":{"rendered":"http:\/\/www.seedcode.com\/?p=8436"},"modified":"2015-01-15T11:21:01","modified_gmt":"2015-01-15T19:21:01","slug":"javascript-portals-filemaker","status":"publish","type":"post","link":"https:\/\/seedcode.com\/javascript-portals-filemaker\/","title":{"rendered":"JavaScript Portals for FileMaker: Clicking on Rows"},"content":{"rendered":"

Coming full circle with JavaScript and SQLexplorer<\/h3>\n

Having the opportunity to work on a project like SQLExplorer<\/a> \"UROBOROS<\/a>has been a highpoint in my FileMaker career. It was a great way to participate in\u00a0the collective learning of the ExecuteSQL function by the community when it first hit the scene. But, it’s also been a great way to get a handle on the increasingly popular interaction of FileMaker Pro and JavaScript.<\/p>\n

The Idea:\u00a0JavaScript Portals for FileMaker<\/h3>\n

SQLexplorer has always displayed your\u00a0query results in a “JavaScript Portal” in a web viewer , and this\u00a0was born from a pretty simple requirement. Since you can choose different columns for your SQL query, having pre-formatted fields in a traditional portal often didn’t “look right.” We thought that with a “simple” JavaScript grid we’d be able to dynamically set column widths as well as apply some basic formatting, i.e. text floats left and numbers float right. We settled on using jQuery<\/a> and the jQGrid plug-in<\/a> for this. They’re \u00a0easy to set up, and being able to use Theme Roller<\/a> provided us an easy way to keep the “portal”‘s theme matching the layout’s theme. With this, we were able to get a great looking grid that not only met are original requirements, but\u00a0also had\u00a0some great\u00a0additional features that came with the jQGrid plug-in; notably, column sorting, changing the column order via drag and drop and a filtering tool. The end result ended up very polished, and to our great delight, several developers have re-engineered this technique for their own solutions.<\/p>\n

The Limitation<\/h3>\n

As exciting as the JavaScript portal was, it made the limitations glaringly obvious. At this point in history, the FMP URL protocol<\/a> was new (a byproduct of FMGo) and we didn’t have the ability to initiate action from our web viewer on local files. For SQLExplorer, this was OK: it was designed to display data, and\u00a0it did that beautifully. However, for the developer trying to take this technique to the next level in a production FileMaker solution, this limitation made the portal\u00a0pretty limited. This all changed when FileMaker 13v2 came out, which gave us consistent behavior for the FMP URL protocol across all deployments. Now we could write our JavaScript so it can actually fire FileMaker scripts, and we’ve seen an increasing number of web viewer based solutions hitting the scene.<\/p>\n

New SQLexplorer<\/h3>\n

With this in mind, we decided to revisit SQLExplorer and release a version that demonstrates firing a script from the jQGrid plug-in, so hopefully folks will be able to take this technique to the next level.<\/p>\n

onSelectRow Event<\/h3>\n

This actually turned out to be a pretty easy modification, because in the original JavaScript I had set up on onSelectRow event in the jQGrid plug-in. I had done this simply to give the ability to deselect\/unhighlight a row. The natural jQGrid behavior is for a row to highlight when you click it, and stay highlighted until you click another row. I ALWAYS write my FileMaker routines to deselect\/unhighlight the row if you click it again, and it was bugging me that the jQGrid wasn’t doing this, so I added:<\/p>\n

onSelectRow: function (id, status, e) {\nif(status===false){<\/span>\n$(\"#list4\").jqGrid('resetSelection');}<\/span>\n}\n<\/pre>\n
to the Configure jQGrid script<\/strong>, which is the API for the jQGrid settings. This is a simple event that simply checks if the current row is selected, and if so, we reset it.<\/p>\n
With this in place I just needed to add some code for my script. \u00a0I left my deselection in place, but if you are selecting, we add:<\/p>\n
onSelectRow: function (id, status, e) {\nif(status===false){<\/span>\n$(\"#list4\").jqGrid('resetSelection');}<\/span>\n}\nelse{<\/span>\nvar firstColumn = $(this).getCell(id,0);<\/span>\nvar p = encodeURIComponent(firstColumn);<\/span>\nvar url = \"fmp:\/\/$\/\"&Get(FileName)&script=RowOnClick&param=\" + p<\/span>\nwindow.location = url;<\/span>\n}<\/span>\n}<\/pre>\n
The id represents the row id and is passed from the event itself, you can then use the jQGrid method .getCell(rowId,columnIndex) to get the contents of a particular column\/cell. Remember, JavaScript uses 0 based indexing, so a column index of 0 is the first column. Once we have that value, we encode it and create a url that will call a script with our cell value as the parameter. Once we have that url, we just call it using window.location. The script itself is just a simple dialog that shows the parameter, but once you’ve got the circle completing in a script, the possibilities are endless.<\/p>\n
But I Need the ID!<\/h3>\n
It’s great to be able to pass the information in a row column back to FileMaker, but is FileMaker going to be able to do anything with it? My JavaScript portal doesn’t show the primary key, just the data I want to show, so returning the first column doesn’t really do me any good!<\/p>\n
\"sqlx1\"<\/a>What I need is the primary key, but I don’t want to show that in the portal. What we came up with is an option to “Hide The First Column” checkbox in the query, so you can add a column with your id to the “front” so you can reference it, but not see it. We’re already dynamically defining the columns in the script Test Query,\u00a0<\/strong>so we just added a little routine to see if we’re the first column, and if we are and the checkbox is checked, the first column will have it’s hidden property set to True.<\/p>\n
\"sqlx2\"<\/a><\/p>\n
Then you can set the id as the first column and return it to your script without messing up your display.<\/p>\n

\n\"sqlx3\"<\/a><\/p>\n
First column with the id is hidden, but can be referenced by jQGrid.<\/p>\n
\"sqlx4\"And that’s it!<\/p>\n
We hope you’ll take some time to download the newest version of SQLExplorer<\/a> and that it will be a useful tool for not just continuing to strengthen your SQL chops, but your JavaScript ones too!<\/p>\n","protected":false},"excerpt":{"rendered":"
Coming full circle with JavaScript and SQLexplorer Having the opportunity to work on a project like SQLExplorer has been a highpoint in my FileMaker career. It was a great way to participate in\u00a0the collective learning of the ExecuteSQL function by the community when it first hit the scene. But, it’s also been a great way to get a handle on the increasingly popular interaction of FileMaker Pro and JavaScript. The Idea:\u00a0JavaScript Portals for FileMaker SQLexplorer has always displayed your\u00a0query results in a “JavaScript Portal” in a web viewer , and this\u00a0was born from a pretty simple requirement. Since you can choose different columns for your SQL query, having pre-formatted fields in a traditional portal often didn’t “look right.” We thought that with a “simple” JavaScript grid we’d be able to dynamically set column widths as well as apply some basic formatting, i.e. text floats left and numbers float right. We settled on using jQuery and the jQGrid plug-in for this. They’re \u00a0easy to set up, and being able to use Theme Roller provided us an easy way to keep the “portal”‘s theme matching the layout’s theme. With this, we were able to get a great looking grid that not only met are original requirements, but\u00a0also had\u00a0some great\u00a0additional features that came with the jQGrid plug-in; notably, column sorting, changing the column order via drag and drop and a filtering tool. The end result ended up very polished, and to our great delight, several developers have re-engineered this technique for their own solutions.<\/p>\n","protected":false},"author":3,"featured_media":8457,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[7,18,23],"class_list":["post-8436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-filemaker-13","tag-filemaker-sql","tag-javascript"],"yoast_head":"\nJavaScript Portals for FileMaker - SeedCode<\/title>\n<meta name=\"description\" content=\"Using webviewers (and JavaScript) to display portal rows in FileMaker offers a lot of advantages. This article shows how to fire scripts from these rows.\" \/>\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\/javascript-portals-filemaker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Portals for FileMaker - SeedCode\" \/>\n<meta property=\"og:description\" content=\"Using webviewers (and JavaScript) to display portal rows in FileMaker offers a lot of advantages. This article shows how to fire scripts from these rows.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/seedcode.com\/javascript-portals-filemaker\/\" \/>\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=\"2015-01-15T19:21:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/seedcode.com\/wp-content\/uploads\/2015\/01\/onselect.png\" \/>\n\t<meta property=\"og:image:width\" content=\"109\" \/>\n\t<meta property=\"og:image:height\" content=\"110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jasonchryoung\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/seedcode.com\/javascript-portals-filemaker\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/seedcode.com\/javascript-portals-filemaker\/\"},\"author\":{\"name\":\"jasonchryoung\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/21c8e63200786c642eb068377e428ebd\"},\"headline\":\"JavaScript Portals for FileMaker: Clicking on Rows\",\"datePublished\":\"2015-01-15T19:21:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/seedcode.com\/javascript-portals-filemaker\/\"},\"wordCount\":995,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/seedcode.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/javascript-portals-filemaker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2015\/01\/onselect.png\",\"keywords\":[\"FileMaker 13\",\"FileMaker SQL\",\"javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/seedcode.com\/javascript-portals-filemaker\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/seedcode.com\/javascript-portals-filemaker\/\",\"url\":\"https:\/\/seedcode.com\/javascript-portals-filemaker\/\",\"name\":\"JavaScript Portals for FileMaker - SeedCode\",\"isPartOf\":{\"@id\":\"https:\/\/seedcode.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/seedcode.com\/javascript-portals-filemaker\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/javascript-portals-filemaker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2015\/01\/onselect.png\",\"datePublished\":\"2015-01-15T19:21:01+00:00\",\"description\":\"Using webviewers (and JavaScript) to display portal rows in FileMaker offers a lot of advantages. This article shows how to fire scripts from these rows.\",\"breadcrumb\":{\"@id\":\"https:\/\/seedcode.com\/javascript-portals-filemaker\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/seedcode.com\/javascript-portals-filemaker\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/javascript-portals-filemaker\/#primaryimage\",\"url\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2015\/01\/onselect.png\",\"contentUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2015\/01\/onselect.png\",\"width\":109,\"height\":110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/seedcode.com\/javascript-portals-filemaker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/seedcode.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Portals for FileMaker: Clicking on Rows\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/seedcode.com\/#website\",\"url\":\"https:\/\/seedcode.com\/\",\"name\":\"SeedCode\",\"description\":\"Build the Software You'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":"JavaScript Portals for FileMaker - SeedCode","description":"Using webviewers (and JavaScript) to display portal rows in FileMaker offers a lot of advantages. This article shows how to fire scripts from these rows.","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\/javascript-portals-filemaker\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Portals for FileMaker - SeedCode","og_description":"Using webviewers (and JavaScript) to display portal rows in FileMaker offers a lot of advantages. This article shows how to fire scripts from these rows.","og_url":"https:\/\/seedcode.com\/javascript-portals-filemaker\/","og_site_name":"SeedCode","article_publisher":"https:\/\/www.facebook.com\/seedcoder","article_published_time":"2015-01-15T19:21:01+00:00","og_image":[{"width":109,"height":110,"url":"https:\/\/seedcode.com\/wp-content\/uploads\/2015\/01\/onselect.png","type":"image\/png"}],"author":"jasonchryoung","twitter_card":"summary_large_image","twitter_creator":"@dayback","twitter_site":"@dayback","twitter_misc":{"Written by":"jasonchryoung","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/seedcode.com\/javascript-portals-filemaker\/#article","isPartOf":{"@id":"https:\/\/seedcode.com\/javascript-portals-filemaker\/"},"author":{"name":"jasonchryoung","@id":"https:\/\/seedcode.com\/#\/schema\/person\/21c8e63200786c642eb068377e428ebd"},"headline":"JavaScript Portals for FileMaker: Clicking on Rows","datePublished":"2015-01-15T19:21:01+00:00","mainEntityOfPage":{"@id":"https:\/\/seedcode.com\/javascript-portals-filemaker\/"},"wordCount":995,"commentCount":3,"publisher":{"@id":"https:\/\/seedcode.com\/#organization"},"image":{"@id":"https:\/\/seedcode.com\/javascript-portals-filemaker\/#primaryimage"},"thumbnailUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2015\/01\/onselect.png","keywords":["FileMaker 13","FileMaker SQL","javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/seedcode.com\/javascript-portals-filemaker\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/seedcode.com\/javascript-portals-filemaker\/","url":"https:\/\/seedcode.com\/javascript-portals-filemaker\/","name":"JavaScript Portals for FileMaker - SeedCode","isPartOf":{"@id":"https:\/\/seedcode.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/seedcode.com\/javascript-portals-filemaker\/#primaryimage"},"image":{"@id":"https:\/\/seedcode.com\/javascript-portals-filemaker\/#primaryimage"},"thumbnailUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2015\/01\/onselect.png","datePublished":"2015-01-15T19:21:01+00:00","description":"Using webviewers (and JavaScript) to display portal rows in FileMaker offers a lot of advantages. This article shows how to fire scripts from these rows.","breadcrumb":{"@id":"https:\/\/seedcode.com\/javascript-portals-filemaker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/seedcode.com\/javascript-portals-filemaker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/javascript-portals-filemaker\/#primaryimage","url":"https:\/\/seedcode.com\/wp-content\/uploads\/2015\/01\/onselect.png","contentUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2015\/01\/onselect.png","width":109,"height":110},{"@type":"BreadcrumbList","@id":"https:\/\/seedcode.com\/javascript-portals-filemaker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/seedcode.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript Portals for FileMaker: Clicking on Rows"}]},{"@type":"WebSite","@id":"https:\/\/seedcode.com\/#website","url":"https:\/\/seedcode.com\/","name":"SeedCode","description":"Build the Software You'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\/8436","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=8436"}],"version-history":[{"count":0,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts\/8436\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/media\/8457"}],"wp:attachment":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/media?parent=8436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/categories?post=8436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/tags?post=8436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
It’s important to note that onSelectRow is just one of many trigger events set up in the jQGrid plug-in, so this basic model can extend to all sorts of different triggers. Check out the jQGrid docs on this<\/a> to see all it can do.<\/p>\n