Using HTML5 in the Web Viewer

I've put together a couple of demonstration files. These are not files that you're going to find in the exercise files folders, but some things that I put together, because I wanted to show you some particularly cool things that can be done inside the web viewer. In the last movie that we just did, we talked about how we can have some text show up as long as we wrap it in HTML and as long as we use the prefix, which we refer to as a data URL. So if you recall, what we did there is we had some text that was instructing our users to populate the address fields before a map could be drawn.

So instead of trying to draw the map with some field references, we just had some text show up. If you even have a limited knowledge of HTML, you know that any text that you put in between these tags can show up. So for example, instead of the instructions that we did in the last exercise, you see that I can just change some information. So what you're seeing that I have here is a demo file, again, not in the exercise files, but something I just set up for you to show you a couple of concepts. And on the left-hand side what I've got is a web viewer, and on the right-hand side I just have a field. As you can see, the web viewer, after I type something into the field and commit it, it's just rendering whatever text I write.

So the idea here is that I can show you on the right-hand side what it takes to actually have something appear on the left inside. So again, this is how you get a piece of text to show up in a web viewer. Of course, you could have an HTML file that's been hosted on a web server, but in this case we're just putting it right into a field, or we could have put it right into the web viewer set up, but we have to make sure to show the data URL first. So let me take this one step further. This is the idea of this demo is to kind of show you what's possible inside these web viewers. Now what I've done is I've still got the web viewer and it's still showing the information on this side, but instead of having just that HTML information that's showing the text, instead what I've done is I've put in some CSS and sort of style sheet information to, instead of showing text, to show a box, or to show a square with a certain color on it.

Of course, I could manually change what this says inside the box, maybe the color of the box. I could even change the size if I'd like to, or the location of the box within the web viewer. Now keep in mind that I'm just manually changing this data here inside this folder, but you kind of get the idea that if this wasn't a text field, if it was maybe a calculation field or concatenated set of a bunch of fields, I could have a field that just does how close to the top, how close to the left, the height, the width, even the color.

I could have all those be input field, or those could be something where I'm using the calculation engine to drive this information. So that's kind of part of what I wanted to help you see, to kind of get your imagination going. Also, I could do the same for the text that shows up inside of this box. Here I could type this over and put our Hello World message. Now of course, this assumes that you have a little bit of understanding of HTML and CSS. As I go forward I'll be using some JavaScript here, but I really want you to understand how powerful the web viewer is and how powerful using the data URL with HTML certainly can be.

So let's take this even one more step further. You see what I'm doing in step three is that I'm showing an image. Now this is another little thing that I've stumbled across that I wanted to share with you. I have another file here that I call image and in this file this is sort of a demonstration file that I put together. There's not much to it, you can easily extrapolate from what I'm doing. But when FileMaker 12 came out, we discovered a really interesting new tag. This was a URL syntax that allowed us to point to a database.

So in this case, I'm pointing to the ISOImage database and a layout called ISOimage; you see that here, and the field is called image. So I've got this field set up in the database, you see here its called image. It's a container field, it's even got external storage on it. What I'm doing in that case is, let's say we just blow that out, and if we look at our demo file, we'll see that we've already pulled this in. But that will effect the next time somebody loads this, because you can see I'm putting that exact same image reference into my HTML.

So what I'm doing here -- what we found out was kind of interesting is if I insert a picture into that field, you'll see what happens is that now it automatically shows up in a web viewer and the web viewer is just simply pointing to that address. Now you can freeze this, and feel free to use this code, but all we're doing is just using the same string that we stumbled across. The key to this string here is that it's going filemakerxml/cnt/data.png.

Now these are PNG files, so you can change that extension if you like to. This was the way that we found that we could store images inside of a hosted FileMaker file inside of a container, even with external storage, and then still be able to reference the contents of those containers within our interactive HTML. So you'll notice here, instead of having that box, what I've done instead, still use some CSS to talk about the position. You notice that I can manipulate that if I like to as well. But what I did, when I referenced the image, you'll see this information here, I'm going to give a little bit of padding, but here's that string.

The string that just simply finds the record, points to the file, points to the layout and then points to the container. Then I give it some sizes and this is the height and width that I want to show that at. So a really neat way to incorporate the contents of a container fields into your HTML that's been presented inside of a web viewer. So this is a neat way to allow your users to drive this. So again, I'm trying to show you different ways to use your imagination to make this web viewer interactive and dynamic at the same time.

So let's take this even a step further. I know what you are thinking now; we've gone way passed the HTML. But really, all this is a referenced JavaScript file. It happens to be called Kinetic. If you're interested in getting Kinetic, it's called kinetic_4.js and I just simply found that in the jQuery Library. This is something that you can go get. Its public access. Personally, I don't know much about JavaScript, but I looked in the library and found one that allowed me to manipulate different images and literally just copied and pasted it.

So what I did is I copied and pasted it after the data URL and before the rest of my HTML. So it looks very daunting and very scary. If you don't know JavaScript, you can find someone that does. If you've got a 10-year-old in your neighborhood I'm sure they know how to do JavaScript. But the idea is, it is all HTML. So I preceded the script and then we've got some additional information in here that references that script and does things like mouseovers and whatnot, and here you see those references again to the images. I've got three images this time. I've got an image for the person, which I can move around.

So part of the JavaScript is letting me move this person around, and the other part is allowing me to drag it on top of something. Now it looks like I've just seated the person into the chair, but really what I've done is I've instructed it. When I get into a certain area with the first one and I release, then I want to load the person in chair image, so there's really three images here. So again, I know it seems little daunting, but I just want to let you know what's possible with FileMaker Pro. This is really just a very rudimentary example, but try to get the imagination going.

So what I'm actually doing there is just some JavaScript, inside my HTML, a little bit of CSS, and I'm referencing images that are stored in a container. Now here's my favorite part; I can take all that same code and add one more step to it. So here's that same code again, don't be afraid of it. But now what I'm adding down on the HTML section is something that is a call. So I have a little function that I've said that when I drag this person over that seat, not only do I want to load the third image, the InSeat image, but I want to run something that's a fmp:// and then I reference a file, and you see what I'm doing here, is I'm running a script.

I've got a script in this database that's called ReportDragPosition. What it does is it puts some text and then it takes two variables; dollar sign ($) left and dollar sign ($) top and it displays the values of those variables. The interesting thing is this HTML is calling back to the database and running a FileMaker Script, but it's also passing it two variables dollar sign ($) left, which is the value 300 and dollar sign ($) top, which is the value of 200. So all that together allows me to drag this person onto a seat. When I release it, it runs a script and in this case the script just shows the dialog window.

These are some demo files that I put together, again, it's not in the exercise files, and these are things that I put together for myself, for the purposes of various other presentations. I wanted to share this with you, because this is the sort of the inception of some very exciting and compelling things are moving forward in the FileMaker world. It combines FileMaker Web Viewer Layout Object, data URLs, FMP URLs, a little bit of JavaScript, some CSS and some HTML5, put all that stuff together and you get some really compelling and imaginative things that you can do right inside the layouts in your FileMaker databases.

Now if you are interested in more information on this, I've written a free article that can be found at this address: www.isolutions-inc.com/html5.html, and I cover all of the different demonstrations that we went through here with a lot more detail on data URLs, HTML5, JavaScript even pointing back to some of the lynda.com Essential Training titles, and I even talk about the FMP URLs, which I think are also very fascinating.

So I appreciate you taking the time to look at this. I happen to think that after many years in the FileMaker market, this combination of technologies is going to lead to some of the most dynamic and creative and impressive things that we're going to see embedded into FileMaker Layouts that possibly we've seen ever.