This is the third in the series of videos about the Web Viewer Integrations Library.
The Web Viewer Integrations library contains 22 integrations available for use in your custom apps. Jeremy Brown walks through the file and explains its features.
Video Transcript:
Hello, this is Jeremy Brown with Soliant Consulting. We’re taking a look at the Web Viewer Integrations Library.
In my previous video, we looked at how this file is set up. But, in this video, we’re going to take a look at the actual file itself and the many features that make it easy for you to manipulate and push an integration to your file. Let’s get started.
The library consists of more than 20 integrations. I tried to find ones that made sense in FileMaker that solved a particular use case. For example, we have a calendar here. It’s very useful to show appointment records on a calendar. We have some charting, of course. We have a date picker that allows you to pick a range of dates and so forth.
The idea was to make these as useful as possible, not replacing any functionality, but enhancing it.
You have a list here of the different integrations, and I’ll be adding more as I go along here and continue to play with this file. Each integration has its own demo and code view that you can view. The demo simply takes you to a page that shows you how it would work. For example, with this Card Flip, we can go to the demo, and we can see some nice cards here. We can click on one and flip it and then mark it correct and so forth.
Up here, in the upper right of the demo view, there are some quick little buttons here. In some cases, you can actually add a question to the list and it will render in the integration. There might be some additional settings, and of course, then the descriptions of the features for this particular integration.
Code View is where you’ll spend most of your time. So, let’s go to that and take a look. This is set up to be a playground of sorts so that you can view some information, manipulate some information, and see the changes happen in the preview. My colleague Agnes Riley and my friend helped me to make this the best possible for you, so I hope it really meets your needs.
In the first tab on the left, we have some simple notes. I’ve tried to write up the notes in the best way possible to give you the most information about how this is set up. You can also print these notes, by the way, with the button up here on the right side of the ribbon. You can print this out and have a nice printable view of the notes.
The next tab is the Code View. Code View is where you’ll spend most of your time, as you manipulate a particular integration. Now, like I said, what you do over here on the left will be reflected on the right side. We’ll get into the manipulation in the next movie.
Each of the pieces of code is shown in a popover. You can take a look at how the function is set up, how the JQuery is set up, and how the data is set up. I put the same developer notes on here so that you can refer to that as you are working with code.
The third tab is the simple, Final HTML field. It’s that calculation field that combines all of the different fields’ contents together. This has been very useful for me as I develop these and work with these. If something wasn’t working correctly over in the Web Viewer, I would copy and paste the code into some application that I could view then on the browser to find the errors. That was very useful and you may find it useful as well.
The source tab is the place from which this integration came. It tries to give you the version and the dates. Then, it gives you some nice resources you might use during your work with these. As you manipulate, for example, the colors, you probably will want to open up the Hex color picker. If you need some information on a button tag, you can go to that as well. And of course, on Soliant Consulting’s blog, we have a bunch of posts tagged as web integration which gives you more information about how to use the web viewer.
Up on the top right, we have some buttons that we’ll get into specifics about later on in other movies. I’ll just point out a few. We have the “Preview” button that takes you to the preview.
We have the “Print Notes” button that I talked about.
The “Export,” “Default,” and “Reset” buttons, we will get into in another movie.
The “Data” button opens up a new window to show you the records that make up this integration.
And there are additional “Settings.” As I was developing, it allowed for different options on the preview. At the top of the Settings drop-down, this checked box is letting me know there is a JQuery library under the hood. That’s actually a field that you don’t see here in the code.
I’ve got 3 JavaScript fields that you can see and you could potentially manipulate. But there are actually fourth and fifth fields in this table that hold with JQuery min library and the UI library. The reason why those are not available here for editing is simply, you will not edit those. If there is ever a reason to update them, you do that on another layout. But, for the typical integration, you would leave those hidden.
Notice if I uncheck the JQuery Min box, I lose the functionality that the JQuery min library provides, so I’m going to add it back to make sure it’s there. There is also the Google API box. There is a field in this system that holds a Google API key, and I’ll leave that for a couple of the integrations.
We have an “Other” button that allows us to go to another integration.
And finally, we have the “Home” button as well.
So, that’s it. Those are the features that make this library work for anyone. It allows you to understand, view, and manipulate the code and see how the integration will work. It also gives you some background information on this particular integration. So, there you have it.
In the next video, we’ll look at how to manipulate one of these integrations. We’ll look at how to make it work for your custom app before you export it into that file.
Thank you for watching! Stay tuned to our website for more blog posts and videos.
