Episode 34: What We’ve Been Building: Web viewers and Javascript

So today we're gonna be talking about using web viewers in FileMaker to do things other than just display a web page.

So the first example is a client that asked us to...

They have field technicians using iPads, and they had three requests.

One, they, the technician needed to be able to upload additional images beyond the amount they currently had, which was limited to 17.

They needed the ability to select multiple images at the same time, versus one at a time.

And for situations where the image on their iPad wasn't in the correct orientation, they needed the ability to rotate the image.

So the first issue was that they were currently storing the container field as a single field with 17 repetitions.

So every time they asked a developer to add the, have the ability to add more images, the layouts needed to be expanded, or slide panels needed to be expanded to add the additional repetitions.

And FileMaker doesn't really have any native support to allow users to select multiple items to upload into containers, nor the ability to rotate.

So the solution was to use a web viewer.

Actually, we used multiple web viewers in this scenario.

So first I had to create a table to store the images in so that we were no longer using the container, uh, the single repeating field, and then to create a layout that featured the web viewers.

So there are essentially two web viewers, the one that allows the person to select multiple images, and a gallery th- display so the person can see what's been uploaded.

The setup is that I created a field in the preferences table to store HTML for each of the three different functions that needed to happen, the upload, the rotation, and the gallery.

You could use persistent storage for that now in 26, right?

Yeah.

Yeah, I believe so.

Yeah.

Yeah, we could do that.

Mm-hmm.

Well, they're, uh, the client currently isn't using 26 yet, so, but that, in the future we could definitely use that.

So then there's a calculated field that essentially gathers the objects that are uploaded, converts them to Base64, and does a substitution in the HTML which is rendered in the web viewer.

So that's what it looks like on the, in the layout view, the two different web viewers.

And then there's, when the person clicks on an image in the gallery, a card window opens with another teeny-tiny web viewer that allows them to rotate the image if they need to.

So here's how we would select, you know, multiple images.