Error handling for web viewer

November 5, 201411 yr

Hi there,

I'm using the web viewer to display product images that are stored on our web server.

I didn't want to bloat our filemaker file and since all our images are already on the web I though using the web viewer would be the fastest way to show images.

I'm using a calculation field that autg enerates some html which includes the image path and name. (see code below)

"data:text/html,
<html>
<body>
<img src='http://www.mysite.com.au/media/import/" & image & "' style='width:100%; height:100%'/>
</body>
</html>"

That part works - I can see the image when it's present on the web server.

One issue I'm having is that for some products we don't yet have images, so the web viewer just displays a small black box with a "x"

I'm trying to work out a way to detect that the source image is missing and then replace it with a default image instead.

Is there a way that I can "test" to see if the image is there and if not then using and if statement use a different image path?

When there is no image I have the following text returned on the page:

"Server Error"

But I can't seem to figure out how to use that to trigger the if statement.

I've tried using pattern count within an IF statement but that isn't working. here's the calculation I tried:

If ( PatternCount ( Products::ImageCalc ; "Server Error" ) ; "data:text/html,
<html>
<body>
<p>No Image</p>
</body>
</html>" ; Products::ImageCalc )

But that doesn't seem to be working - it's still either shows the image OR the black box - in other words it's not recognising the pattern.

Can anyone point my in the right direction here?

November 5, 201411 yr

Goya's BaseElements plugin has URL functions which allow you to query a webserver and get the results straight back into FM. I use it to send SMS's via a web API and retrieve status results from the SMS gateway. You could use that to probe the webserver and check the result code for your image prior to loading it in a page.The free plugin has a ton of options.

November 5, 201411 yr

I suspect it would be more convenient to solve this problem in HTML, rather than in Filemaker.

What exactly is in your Products::ImageCalc field?

November 5, 201411 yr

Author

It's just the path to an image URL.

( the code block at the beginning of my post)

November 5, 201411 yr

I am sorry, you have lost me.

November 5, 201411 yr

Author

The Products::ImageCalc field contains the following html code:

"data:text/html,

<html>

<body>

</body>

</html>"

Basically just a reference the the product image, so it can display in the web viewer.

Just realised the code block did not copy correctly ( on iPad so text features limited) the full code block can be found in my original post.

November 5, 201411 yr

I see (I think). Well, you can't reference the calculation field itself in the formula. Besides, the calculation field is unnecessary - you can perform the calculation in the web viewer itself.

The important point here is that the string "Server Error" does not exist anywhere except in the returned response - so the only way you have a chance of detecting it is by using GetLayoutObjectAttribute ( "your web viewer name" ; "content" ). I haven't tested it, but I doubt you can use this in the same calculation where the HTML code for fetching the image is calculated, because the HTML code must exist first. That's why I think a purely HTML solution would be preferable.

November 5, 201411 yr

Author

Got you. I'll investigate that and see how I go. Thanks for the pointers, will save a lot of wasted testing time.

November 5, 201411 yr

Comment makes a good point. You could solve this in HTML. http://stackoverflow.com/questions/18837735/check-if-image-exists-on-server-using-javascript

November 11, 201411 yr

Got the javascript to work however doesn't seem to function within my FM

"data:text/html,<html>
<body>
<body style='border: 0; margin: 0'>
<script>
var im = document.getElementById('imageID'); // or select based on classes
im.onerror = function(){
  // image not found or change src like this as default image:

   im.src = 'new path';
};
</script>
<img src='http://www.mysite.com.au/media/import/" & image & "' onError="this.src = 'http://www.mysite.com.au/media/import/404.jpg'" />
</body>
</html>"

I think it's the quotation marks here that's the issue

onError="this.src = 'http://www.mysite.com.au/media/import/404.jpg'" />

I would like to be able to use the result in a field which I can run a report/script on. e.g If (webviewer = "http://www.mysite.com.au/media/import/404.jpg";"No" ; "Yes" )

Here is the original javascript

<html>
<body>
<body style='border: 0; margin: 0'>
<script>
var im = document.getElementById('imageID'); // or select based on classes
im.onerror = function(){
  // image not found or change src like this as default image:

   im.src = 'new path';
};
</script>
<img src="http://www.mysite.com.au/media/import/image.jpg" onError="this.src = 'http://www.mysite.com.au/media/import/404.jpg'" />
</body>
</html>

November 13, 201411 yr

Have a look at the GetLayoutObjectAttribute Function (http://help.filemaker.com/app/answers/detail/a_id/6146/~/using-the-getlayoutobjectattribute-function). It allows you to retrieve the content of webviewers too. Maybe that will allow you to do what you want. (only just stumbled upon it myself :-P)

December 13, 201411 yr

Been trying to get the GetLayoutObjectAttribute to give me some results. I've definately got the right webviewer cell however it does not return any data using GetLayoutObjectAttribute ("webviewer" ; "content" ) or GetLayoutObjectAttribute ("webviewer" ; "source" ). If I use GetLayoutObjectAttribute ("webviewer" ; "bounds" ) I get data back (110 -157 198 -77 0)

Is there an option I need to enable somewhere?

This is what my webviewer looks like:

"data:text/html,
<html>
<body>
<body style='border: 0; margin: 0'>
<img src='http://images.mywebsite.com/" & Products::Brand & "/" & Products::Model Year & "/" & Images::Image1 & "' style='width:100%; height:100%'/>
</body>
</html>"

December 14, 201411 yr

I have found an alternative solution for this issue which if you host your own images is probably more beneficial as uses little or no bandwidth upon your website.

Having copied my website images to a local directory I then I installed MooPlug and use the Moo_FileExists ( sFile ); function which checks if the file is valid. Either returns a 0 (Not Valid) or 1 (Valid)

For example: Image directory is C:My WebsiteImages

Example image located in C:My WebsiteImagesApple2014Ipad-Mini_1.jpg

Function is Moo_FileExists ( "C:/My Website/Images/" & Products::Brand & "/" & Products::Model Year) & "/" & Images::Image1 )