Join Cris Ippolite for an in-depth discussion in this video Using HTML5 in the Web Viewer, part of FileMaker Pro 12 in Depth.
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.
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.
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.
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.
- Managing access to your database
- Parsing text with calculation functions
- Using calculations in field validation and auto enter options
- Creating nested subsummary and crosstab reports
- Creating user-driven and multi-criteria relationships
- Working with intermediate script techniques
- Extending Web Viewer using HTML5 and data URLs
- Sharing databases on a network using FileMaker Server
- Publishing your databases to the web using the Instant Web Publishing or PHP