This is the fourth in the series of posts about the Web Viewer Integrations Library.
The FileMaker Web Viewer Integrations library is a great source for deeper functionality for your custom app. There are 22 web integrations that might be a great solution for a use case you’re trying to solve for yourself or for a client. For example, you can use the “Google Auto-Complete Address” integration to use the power of Google to get the exact full address as the user starts to type it in as shown in Figure 1.
That is extremely handy.
Or the Data Tables integration. This could be a good substitute for a typical list view in FileMaker (see Figure 2). The integration allows a user to click on a column header to sort by that column or to do a filter to see only certain records.
Regardless of the integration that becomes useful to you, it might need some revision of its current state. This library provides the perfect opportunity to adjust what is here to make it work well for your custom app. You might change the colors or the font. You might want to add additional functionality, or even remove some of the functionality. Whatever needs to happen, you can do it here without fear of messing up your app.
For those that have less experience with the languages of the web (HTML5, CSS, JS...), you can use this tool to learn more about how the CSS interacts with the rendering. While this library does not give you a complete understanding, it can add to your knowledge. I know I learned a lot while setting up these integrations.
This library allows you to play with and update the settings as necessary. There are a few features in here that allow for this. Let’s take a look at them.
Features of the Library
Each integration can be manipulated to your satisfaction, but there’s always a danger, in the manipulation, to mess the code up beyond repair. I bungled the code many times in my own work with this. Agnes Riley had the great suggestion of creating a table of the default code: a record hidden in the database that you can fallback on for any reason to restore the original code.
A benefit of this is that once you’ve manipulated the code perfectly for your use, you can set that as the new default. That way it becomes your default ready for further manipulation.
In the event you have to revert back to the default code, there’s a reset button. This gives you the option to reset any or all of the text, including the data sample provided. I’ve used this often. It is a lifesaver.
The CSS, JS and Data fields are found in popovers. You can simply open them up to view and edit the existing code. See Figure 5.
This library is yours to manipulate. If you don’t like the colors I’ve provided, change them. As an example, let’s look at the Data Maps integration.
I want to integrate into a client’s custom app the map of the US showing different colors depending on the underlying data. These default colors are decent, but they don’t fit the color scheme of my client’s file.
I also want to remove the gray background, and make the sub-header font bigger. I can make those changes easily.
The first thing I’ll do is make sure there’s a default code. So I’ll set the default to what I’ve got on the screen at the moment. That probably will come in handy as we move along.
The next step is to get rid of the gray background and make the sub-head font bigger. Since those elements are part of the HTML, the place to manipulate those is in the CSS.
Changing the CSS
CSS1 provides the text we need to update.
Here I can simply change the color of the html background-color attribute. Colors rendered in HTML are in the format of the Hex value, so I can use the Hex Color Picker, found as a link in the Sources tab to find the color with which I want to update the color. I chose a plain white background, or code #ffffff. You choose what you wish.
Now I need to update the sub-head. It is too small compared to the title and the map. So I’ll find the tag that surrounds the text. It is in a <header> <p> </p> </header> tag set, so I need to find the styling of that attribute in the CSS1.
I made my font-size attribute to be 20px. That looks good.
With those two simple changes, my integration looks better. Since I want to keep it that way, I'm going to press the "Default" button to set this as my new default.
I need to make one more change: the colors of the states. Those look pretty bright, and they’re the wrong color for my custom app.
I can update the colors of each type of state here in the JS2 fields (see Figure 9). Using the hex color picker in the source tab, I can select any four colors I want.
Once I’ve got the colors how I want them, I’ll be sure and set this current code as the default code.
Play around with the file; experiment with the code and see what happens in the preview pane.
As always feel free to reach out if you need some advice on manipulating a particular integration. I’d be happy to lend a hand.
Get the Demo File
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: