This is the last in the series of videos about the Web Viewer Integrations Library.
In this video, Jeremy Brown shows how you can push a Web Viewer integration into your custom FileMaker application in 30 minutes.
Video Transcript:
Hello, this is Jeremy Brown with Soliant Consulting. We’re taking a look at the Web Viewer Integrations Library.
In previous videos, we’ve looked at how the file is set up. We’ve looked at the many features of the file, and we’ve looked at how to manipulate a particular integration.
In this video, we’re going to take a look at how to push an integration from this library into your own custom app. Let’s get started.
Pushing an integration from the Web Viewer Integration Library to a custom app is the reason why this library was built. We’re going to look at the data tables integration.
Go to the demo and review what it does. Here, we have a nice list of 466 records. These are records from a FileMaker table. This integration allows me to change the number of records that I can view at once. It allows me to sort by columns. It even allows me to search. I can type in search parameters to find all the CEOs that are in Texas, for example. Very nice functionality built into this integration.
Let’s say I want to put this into my custom app. We’re going to do that now. We’re going to go to the code view and review the notes quickly about this integration.
It shows a list of records; it can have any number of columns. We went over the features a little bit ago. The Dev Notes give some information about how this could be an alternative to a list view. There is a price to pay, however, in that the script has to gather the data. That is definitely an issue. It looks like this table gathers the ID of the record in column 0, but it’s not visible. We don’t see the IDs here and so forth.
We have two scripts being used and the script used in the FMP Protocol. That is what happens when I click on a record. It runs a script in FileMaker. It will open up the detail view and so forth. And we have a Data Collection script, or in this case, scripts. These are the scripts that collect the data and format it correctly, as you see here, and push it into the correct field.
We can see the code here, under the code Tab. In the previous video, we took a look at how to manipulate one of these, and that is an important step. If this look doesn’t work for your particular custom app, you can make some changes here on the left before you export.
Now, we’re going to go right to the export. We’ve got a handy little button here at the top that says “Export” to export the code. It opens up steps that you can follow to push this integration. I tried to list all the steps in order and give you some important information about what to do. Let’s walk through these, and we’ll do it in real time here.
“Review the structure in your data tables.” This brings up the fields where I write if there are any special fields needed for this integration in either the Data table or the HTML table. It doesn’t look like there is anything here. We’re going to export this code from the record. The “Export the Code” button simply exports the code for this one record, so you’re going to get one record HTML.fmp12 file. And, it has been placed on your desktop. Let’s take a look at that.
I open it up, and sure enough, what this export script did was simply exported all of the fields that you’re going to need for this integration to work. It exported the template field; the three CSS fields, even though in this case, there is only one CSS field that has data in it. It exported all three JS fields and the three data fields.
Now, this is a key point here: it did export the sample data that you see in my integration. You’re going to get 466 rows in your integration. I chose to do that simply because it allows you to see this integration working before you hook up any other scripts. It exported the JQuery min library, because we needed that, and it exported the script name that is used in the callback. In this case, that is “GTRR_People.”
The next step says, “Import the code (using ‘Import Records’) found in the HTML.fmp12 file of your desktop into your custom app.” So, I have a custom app here called “People_Test.” We’re going to simply import what I exported previously. I go to File > Import File > File, and I choose that particular file. Then I set it to import into a new table called “HTML.” All the fields get pushed over. Go ahead and import all of these fields as it is even if they don’t have any data. We’ll take a look at why in just a moment. We do an import, and it imported one record. So, in my custom app, I have all the data that is needed to run the integration.
Now, let’s take a look at step 4. It says we need a calculation field in my custom app. That is the only thing that didn’t get brought over because importing does not create a calculation field. Luckily, however, we have a nice button (“Copy Calc Text”) that allows you to copy what you need in the calculation field. So, I’m going to press “Copy,” and it has been put to my clipboard.
Now I’ll go over to my custom app and go to the HTML table and add a new field called “HTML_Calc,” make it into a calculation field, paste in that text that I copied from my library and now we’re set. Again, Data 2 doesn’t have anything in it. Neither does Data 3, but they are still in the calculation.
I’ve got my calculation field set up. Now, I’m going to skip step 5 for just a minute and go right to step 6. It asks me to create a Web Viewer on the HTML page, so I’ll do that quickly here. I’m simply going to replace the text under Specify Calculation and have the Web Viewer point to that calculation field. I press “Okay,” and if everything goes correctly, which we can check by going into browse mode. Now the data that I have in the Data box is showing, and this integration is working perfectly.
At this point, you need to make a decision about what to do, because obviously, this data is my test data. I’m going to clear it out, because that’s not what I want to have in my custom app. I need to have a script in my custom app that gathers the data.
In this box, under Step 5, it gives some information about that. It tells you the name of the script that I’m using to gather the data and you can see that information right here, click on the “Gather Sample Data Notes” button. This shows you how it should be formatted. It reminds you that you have the option to copy and paste the scripts from this library into your solution, or you can write your own scripts.
However you do that, the formatting needs to be set up this way. So, in this particular case, the header row needs to be added to the script, and each row of data needs to be formatted in this way. You can simply copy and paste from one to the other. If you do that, you’re going to need to make sure you import custom functions, because my scripts sometimes use custom functions to gather the data, like ExecuteSQL custom function and so forth.
Gathering the data is important, and you have a couple of methods for doing that. If you don’t want to copy and paste it, you can simply go into my script and find that particular script (called GatherPeople) and you can look and see how I wrote this out. I tried to give some good comments so that you can know what is happening in this case.
For this particular integration, this shows the parent script, the subscript does the work of first creating the header row in the correct format and then formatting each record as I loop through them. You are welcome to do any copying/pasting. Here, it doesn’t look like we have any custom functions, so the custom functions are not vital here.
The second script we need to work with is the Callback function. This integration uses a script called GTRR_People, and when you click on the “Script Info” Button, it shows you what it does. It grabs the ID of the row that they’re on, the first column, found in Data 1, and opens up the detail view. This is just a typical script that grabs the ID and passes it to this script and finds that particular record.
So, again, you can copy or paste mine. Let’s take a look at that. We’ll click on “GTRR_People,” and you can see that it is grabbing the script parameter and finding it. You can either choose to copy and paste mine or write your own in your custom app.
Finally, you can review the Dev Notes for any other information about it so that you know what’s going on. But, like I have just shown you here, this integration is fully set up in your custom app. We did it in less than fifteen minutes. All we need to do is get the Data 1 field to hold the data from our custom app, and we’re done.
As I said before, this library is meant to make it so easy to push an integration from here into your custom app. So, that’s it. That is the Web Viewer FileMaker Integrations Library. It is my hope that it is very useful to you and that it gives you great ideas about what you can do with the Web Viewer and it allows you to quickly set one up in your custom app.
Thank you for watching! Stay tuned to our webpage for more posts on this library and other great techniques. Have a great day!
