Working with the web viewer, stage one
Likewise, it is a problem when the use case requires a button to make a change to how the web viewer shows its information. If I have a chart, and I want the chart to transform from a bar chart to a line chart, I’d have to update the chart options from “bar” to “line” in the JS function text field (which I could do using Filemaker Scripting).
Let’s breakdown what happened
- I sorted by Last Name Ascending.
- I added a new related record to the table using a popover, global fields, and a script.
- When I pressed “Add Row”, a script ran to grab the related data of this one parent record. The script formatted the data properly and then set the data in the Data field.
- This field refresh triggered the web viewer to reload.
- When the web viewer reloaded, it took the calculated HTML document and reloaded it into the web viewer, causing the flash and causing the sort state to be reset to its default for this configuration.
The FileMaker Web Viewer Bridge solves the problems described above. This framework bridges the FileMaker platform and any JS libraries you are using, forming, as most bridges do, a two-way connection. FileMaker can ‘talk’ to the JS loaded into a web viewer, and the web viewer can call back to FileMaker.
Here’s what it looks like.
Did you see it? Let’s breakdown what did and didn’t happen.
- I sorted the data using both position and Last Name (yes, that’s built into DataTables).
- I used a FileMaker popover, global fields, and a FileMaker script to add a new record.
- When the record was added:
- The new row immediately appeared
- The sort state did not change
- The record was added to the rows, there was no flash.
Calling back to FileMaker
The Devil’s in the details
We’ll go into detail about how you can use the FileMaker Web Viewer Bridge to accomplish the above tasks for any JS library in future posts and videos. There’s some specific points to cover. We cover the following topics:
- Loading all HTML / CSS / JS into the web viewer.
- Connecting to the FileMaker Web Viewer Bridge
There will probably be other topics along the way.
It’s for Everyone
Download the sample shown in the screen casts above as well as the original FileMaker Web Viewer Bridge file. Read through the documentation (found there on Github) and stay tuned here to learn more about the FileMaker Web Viewer Bridge.
Also published on Medium.