February 17 – IT Solutions – The FileMaker Web Viewer

By On February 20, 2015 · In FileMaker Development

Thank you to everyone who attended the event on Feb. 17th presented by Beth Latta of IT Solutions, “The FileMaker Web Viewer: Barcodes, Maps, and More without Ever Leaving FileMaker”.  We had over 300 attendees on this webinar. There were a lot of questions, some pretty advanced – this tells us there’s likely interest in future webinars where we can  go more in-depth on the web viewer feature.

The sample file is Here. This sample file is based on the Contacts starter solution provided with your copy of FileMaker Pro.  Thank you to FileMaker, Inc. for this excellent template!

If you’d like to view the webinar recording, it can be found at the bottom of this page.

Here’s a recap of the Q&A – this includes questions answered on the webinar and ones we could not get to due to time constraints:

Q: How can you regulate the size of returned content in web viewer?

and…

Q: Can you show how the GetLayoutObjectAttribute() function works when manipulating an image?

A: I think these questions were specifically related to the resizing of an image in a web page.  This is actually a tough one to answer in the format of a blog post like this and probably deserves its own dedicated post.

That being said – you can use the format GetLayoutObjectAttribute(“webviewer name”, “content”) to read in the source HTML and then manipulate it.

Inside the returned HTML content, you might find the URL to the image that you are trying to resize. You could then create another web viewer (or use Set Web Viewer) with its source as a “Data URL” (see this great post on Data URLs: http://www.databuzz.com.au/filemaker-web-viewer-and-data-urls/).  In that Data URL you could use the img src HTML tag and its sizing options to redraw that image to your desired size.

Remember to use the full path to the image including the domain name of the site when you do this.  References to images on web pages often do not include the full path (since you’re already there) but this won’t help you when you are trying to reference it from another location (your FileMaker database).

 

Q: How do you get a website to fill the size of the web viewer so it doesn’t get cut off?

and…

Q: I just made the same web viewer with the same URL. Yours shows the full web size, re-sized perfectly to fit. In mine, the site is full size and the viewer is only showing a portion that will fit. Why?

A: In order to have the web viewer stretch to fit the available space, make sure you have the web viewer anchors (AKA “autosizing”) setup properly in the FileMaker object inspector.  Another factor is that some websites simply re-size better than others and even then, there is a limit to how small the content can be without getting cut off.

 

Q: What browser does the Web Viewer use?

A: On Mac OS X – Safari, on Windows – Internet Explorer.

 

Q: Can you execute a script in the web viewer?

A: There are probably a number of ways to do this and we’re anxious to hear what others are doing.  One way is to use the 360Works RemoteScripter (http://www.360works.com/remotescripter/) to execute the script.  I believe there is also a way to do this with the MBS FileMaker Plugin 4.4 (http://www.monkeybreadsoftware.de/filemaker/) mentioned a few times in this post.

 

Q: How to pass latitude/longitude to Google Maps?  Where do I find GetMap custom function?  It’s not on my install.

and…

Q: Where do I get the GetMap Function?

A: The GetMap() custom function is included in the Contacts starter solution that comes with FileMaker Pro 13.

 

Q: When using https websites, how do you get around the username and password requirement?

A: This is a challenge that affects any website requiring a login but it’s most common with https sites. These sites require a username and password in order to start a session.  Once the session is established, that application can be used normally inside the web viewer. We are not aware of a trick to get around authenticating to a website that requires this type of authentication, unfortunately.

 

Q: Using www.where-am-i.net, can I get the Latitude and Longitude off of this page and directly into FileMaker as data?

A: It is not always possible to get the textual data from a web page using the GetLayoutObjectAttribute() function.  Sometimes, there are sophisticated JavaScript techniques on a page which make the source of the page difficult to parse. In these cases, we recommend looking for a published API.  For this need, the Google Geolocation Service would be great: https://developers.google.com/maps/documentation/geocoding/

Of course, on iOS – use the built-in Location() function and don’t worry about all this web viewer stuff.

 

Q: How do you determine if a website offers an API?

A: This is a good question – there are a few keywords that will assist when searching (on your favorite search engine) for this information.  One of them is definitely “API”, another might be “SDK” (solution developer’s kit), and another is “web services”.  You might also try “integration”. All of these keywords plus the name of the product or website you are trying to integrate with, will help you identify if they offer an API.

 

Q: Can the web viewer access plugins like Adobe Flash?

A: Yes, the web viewer can display and make use of Flash on websites.

 

Q: What version of FMP Advanced is being used for the demo?

A: FileMaker Pro Advanced 13 is being used.

 

Q: Can you comment on using web viewers in WebDirect?  I have heard that they do not work if you have an SSL certificate/https turned on.  Do you know if there is a work-around?

A: It is my understanding that if you deliver your WebDirect solution with an SSL certificate (the URL is prefixed with https://), then the content you present in the web viewer must also be presented from a website that uses SSL.  I believe this has to do with built-in browser security precautions.  When browsing to a website in IE that has mixed content (secure and insecure) you are warned about the risks. Perhaps that same warning is happening in the web viewer, but silently and without giving you the option to proceed.

 

Q: (more of a comment) Mapquest also has an extensive set of APIs on their developer site that has allowed us to build a very extensive map functionality into our solution. Auto mapping of several comparable properties for appraisal using latitude/longitude coordinates.  We can then PDF/Print the maps for use in our appraisal reports. Google doesn’t support full page display as well as MapQuest.

A: Thank you to Mike Hendricks for this insightful comment!  Mike generously offered to share his sample files so if you are interested in this technique, please contact webinar@filemakeracademy.com and we’ll make the connection.

 

Q: “Your browser’s current font size is not supported.” How do you fix this?

A: We haven’t encountered this one before but here’s a thread on the FileMaker Support Forum about this with an apparent solution: http://forums.filemaker.com/posts/52459162cc

 

Q: How can we add multiple pins to one map?

and…

Q: Do you have any good examples of mapping multiple locations on a single map?

A: Check out GoMaps or ProMaps (or both) from http://www.seedcode.com.

 

Q: Any information on how to draw a Google map with boundaries?  (A KML file?)

A: It is strictly a manual process, I haven’t found an automated way yet.

 

Q: With iOS 8 you can use the device’s camera to scan and import secure credit card information. Can the web viewer be used to accomplish this and how?

A: Fascinating question!  Unfortunately, this one would require quite a bit of experimentation.  I would think you could have a form which invokes the card scan capabilities of iOS 8 and present that form in a web viewer.  This StackOverflow post goes into detail on exactly how to tell Safari on iOS 8 that you want the card scan option: http://stackoverflow.com/questions/25163891/when-scan-credit-card-option-is-available-on-ios8-safari/25925195#25925195

Whether or not having a web form that matches these requirements would then invoke the card scan feature from inside of the web viewer in FileMaker Go is anybody’s guess, but I would be interested in knowing this too. Your form could then post its data back to FileMaker Server via the PHP API (or a number of other methods) and it would arrive in your FileMaker database. If anyone wants to experiment and report back on the results, we would like to hear about it!

 

Q: Is it possible to use JavaScript and jQuery Mobile?

A: Yes, definitely.

 

Q: Can you show us how to setup your web viewer for labels?

A: I think this question pertains to printing barcodes when the source is from the web viewer.  I believe there might be an example of this in the sample file.

 

Q: Can the content of the formatted web viewer be copied as formatted text to an email?

A: This is another example of grabbing the content of the web viewer and then doing something with it using the GetLayoutObjectAttribute() function.  Once you have the HTML, you can use the 360Works Email 2 Plugin (http://360works.com/email-plugin/) to send from FileMaker Pro.

 

Q: Can you do another demo showing script extraction of data from a web viewer?

and…

Q: Can you pull web viewer results into FileMaker fields?

A: We think that based on the feedback from this demo and the really advanced questions we received, we will plan a future demo on reading data from the web viewer using the GetLayoutObjectAttribute(“webviewer name”, “content”) function and parsing/manipulating it.

 

Q: On a web page with JavaScript, JavaScript will see events. Can you somehow use the JavaScript event within the page to read information out of the database?

A: Please check out one of the third-party tools mentioned in this Q&A for information on manipulating the database contents based on JavaScript activity taking place in the web viewer.  There may be others but the two we identified were:

Q: It appears that Google has a ton of Map APIs; which one were you using in the example with the work address?

A: This is a custom function that comes built into the Contacts starter solution in FileMaker Pro 13.  The function is called “GetMap()”.  This function uses the Static Maps API from Google.

 

Q: Can you zoom in on the map or satellite views?

A: Yes, definitely – make sure you check off the “allow interaction with web viewer content” check box in your web viewer setup.

 

Q: Would you be able to draw a pie chart in a web viewer?

A: Yes, definitely.  There are a number of charting APIs, Google has one.  You could always use the built-in pie chart that FileMaker gives us – this works in Pro, Go and WebDirect.

 

Q: (more of a comment) jqPlot is a JavaScript graphing API that works well in Web Viewer to support even more chart and graph types than the already large selection of options in the FileMaker charting engine.

A: Thank you for your input on this, Dennis!

 

Q: I’ve had a lot of issues with Google Docs and web viewers. Example: viewing a Google doc via the web viewer. Any ideas? Also I tried to do a Gmail web viewer and it only worked for the simple layout of Gmail (old version).

A: I just tried this on Yosemite (10.10.2), Safari 8.03 and FMP 13v5.  I can confirm that I got a message in Google Docs that reads:

“This version of Safari is no longer supported. Please upgrade to a supported browser.”

Things still seem to work OK though – not sure what that message is about. Regarding issues with Gmail, I didn’t see any problems and it looks like I have the new modern Gmail theme, again, with this specific setup.  As far as Google Inbox is concerned, I got stopped with a message that reads:

“It’s been a while since your browser was last updated. Please upgrade to the latest version to continue using Inbox.”

So, it didn’t work at all in the web viewer using my setup.

 

Q: If you change address information in the dynamic Google Maps container, does it change the information in the address book?

A: No, not in the sample Contacts starter solution but that would be pretty slick, though.  There may be a way to accomplish this by parsing the resulting HTML after you change the address in Google Maps by using the GetLayoutObjectAttribute() function.  Then you could return the new address to the appropriate fields in FileMaker.

 

Q: Can you please restate the 3rd party products that can be used alongside the web viewer?

A: The two products we cited in the webinar were:

We are certain that you will find other tools that can add functionality to the web viewer.  If you have additional suggestions, please email us at webinar@filemakeracademy.com and we’ll post them here.

 

Q: Do you have any experience with SVG?

A: If there is Scalable Vector Graphics (SVG) support in the browser then there is SVG support in the web viewer. We’re in luck because both Safari and IE have support for SVG.  The support of the specification varies between these two browsers so it’s a good idea to test what you’re doing with both platforms.

 

Here’s a link to the sample file.

 

Here’s a link to the webinar recording, enjoy:

 

Comments are closed.