This is the last of the series of posts about the Web Viewer Integrations Library.
Let’s take a look and review how to push from the library to your own custom app.
1. Find and Review the Integration
The first step, of course, is to decide which integration works to solve a particular use case in your custom app. In some cases I’ve provided a few different possibilities, and this file, over time, will only get bigger with more integrations.
After you pick one, review how it works and looks. Most of these integrations are such that the web viewer is the only thing you’ll see on a layout. The Calendar or the Data Maps integrations are full-screen, web viewer-only setups. Others, like the Color Picker or the Date Picker are best used as an element on the layout. This presents a drawback of an integration: a web viewer must be big to encompass all the parts of the integration. The Date Picker, for example, is rather large and needs a lot of space on the layout to get het full look. Putting it into a popover helps, for sure (see Figure 1). So you need to consider how this will be used in your app and design your layout for it.
Review the notes in the “Notes” tab for additional information as needed. I’ve tried to be very specific and detailed where needed.
Also adjust the integration to fit your needs. The basic functionality of the integration most likely won’t be changed, but you can adjust the look of it all you want. BEFORE you do this, however, you should make sure the default code is set. Press the “Default” button to double check and set the current code to the default.
2. Export / Import the Integration
This file is set up to be as simple as possible to allow any integration to be exported and then imported into your solution. In the code view, there’s a button called “Export” that walks you through the process of doing the work above.
Let’s take a look at the steps.
- Review the structure of your data tables. Sometimes an integration calls for specific fields in the table that holds the data to be displayed in the web viewer. Refer to the notes about what is needed.
- Export the code from this record. This button exports a one-record FileMaker file called “HTML.fmp12” onto your desktop.
- Import the code into your custom app. It is best to use the “New Table” part of the import process (found under the destination’s dropdown). A new table called “HTML” will be created, the fields from the library will be created, and the data will be imported. Keeping the table name “HTML” will ensure that the calculation field (when created) works properly. Note: this will import the sample data into your custom app. This is for testing purposes.
- Copy the calculation text. The popover contains the exact calculation you’ll need in your HTML table. Paste this calculation in a new field. I call it HTML_Calc but you can name it what you wish.
- Work with the scripts. At this point you will stop to consider what to do next. The scripts provided are needed to gather the data and to callback to FileMaker from the web viewer. The description of each is provided, so you can choose to write your own that does the same thing or copy and paste mine. See below for more about the scripting.
- Test out the integration by adding a web viewer to the HTML layout and pointing it to the HTML_Calc field. In Browse mode, then, you should see the sample data rendered correctly.
- Finally, review the dev notes for further information regarding the integration.
More About the Scripts
There are two scripts used in most integrations: the data-gathering script and the callback script. Each one needs to be in your custom app. You can choose to write the scripts yourself or copy and paste the scripts in this library.
If you choose to copy and paste my scripts, be sure and import the custom functions FIRST. Then do the copy/paste. You’ll end up with some errors; that is okay. Simply fix them for your solution and you are set.
The Callback script is vital for the integration to do something. For example, clicking on a photo calls the “OpenPhoto” script which opens up a detail view of the photo. The script name is captured in the “ScriptName” field, so make sure your callback script is set to the same name.
3. Finesse the Integration
Finish the implementation by finessing it a bit. Here are some thoughts:
- Consider a multi-user environment. The Data fields are not global by default, so they will be written to by the data-gathering script. This could cause record locking and other issues. You may want to make these fields global.
- Gather the data. My scripts sometimes use ExecuteSQL, sometimes they simply loop through records, and other times they use the great technique called “HyperList”. Use whatever you want to gather the data. Make sure, however, that the scripts format the data in the way the integration code needs it to be formatted.
- Consider the placement of the web viewer. The library simply has the HTML table. This table is the context for the web viewer’s layout, and all my buttons go to this layout. You may choose to put the web viewer on a different context. That is fine but make sure to allow the web viewer to, in some way, get the value of the HTML_Calc field. This field can be a global field, or you can use a relationship to refer to the field.
It seems a bit daunting at the moment, but it is fairly simple to push an integration into your custom app. I’ve tested this with folks, and this process has taken them less than 30 minutes to implement a nice integration into their custom app.
Feel free to reach out with any confusions or questions. And, if anything blocks you, let me know and I can work to resolve it.
Get the Demo File
If you have any questions, please reach out to our Carafe team.
These are the other blog posts and videos that go into further detail about this file and how to integrate these into your own custom apps: