Data Structure of the Web Viewer Integrations Library

This is the second in the series of videos about the Web Viewer Integrations Library.

The Web Viewer Integrations Library is set up using best practices found in web development. Jeremy Brown explains how this file is set up and discusses the advantages and disadvantages.

• Read the blog post

Video Transcript:

Hello, this is Jeremy Brown with Soliant Consulting.

We’re taking a look at this Web Viewer Integrations Library. In previous videos, we’ve discovered how this file is set up. We’ve looked at some of the features of the file. In this video, we’re going to take a look at how to manipulate an integration to fit your custom app.

Let’s get started.

We’re going to take a look at the data maps integration. I like this integration. So, let’s take a look at the demo. It shows a nice little US map full of colors for each state. When hovering over the states, it shows FileMaker Developers by state. Notice this is just made-up data. Here, in Colorado, apparently, there are 800 people that develop in FileMaker. Again, just made-up data.

These colors are pretty nice, but they may not fit your custom app. You may want it to fit your color scheme. So, we’re going to go into the code view and make those changes. As you read through the integration notes, you’ll find a lot of information about how this is setup.

For example, it tells you that the Data 1 text field contains the actual data. So, it must contain “Orgeon” and “900 people.” It also contains the color code. The JS2 text field contains the default colors and so forth.

Let’s take a look at the code. As it’s set up right now, these are the colors that I have. But, I want to make some changes. For example, I may want to have a different color background. So, I’m going to go into the CSS, because the CSS manipulates the style of the integration. And I’m going to make some changes.

Before I do that though, I’m going to set this to my default. We’ve got a button on the top ribbon that says “Default.” This writes all of this current code in all of these fields as the default. This has been very useful, because as I’ve developed these, I’ve messed up a lot. It allows me to ensure that I have a default code that isn’t messed up.

I’ll click “Yes” when it confirms the default code. This has been set to my default. That means, if I accidentally come in here, and I change something, like I delete everything, notice it only messes up the integration. I can go to the “Reset” button in the top ribbon and reset any or all of the text fields that I may have messed up. In this case, I only messed up the CSS1, so I will take care of that and now we’re back to the defaults. Very useful.

So, let’s get in and make some adjustments. I’m going to change the background color. It’s too bright so I’m going to give it a gray background. I’m going to go into the CSS and just look around here. I have an HTML tag which is controlling the whole thing. Everything in this tag will affect what’s in the HTML page.

I notice that there is a background color, and this color is set to white. I don’t want it to be white, I think it’s too bright so I’m going to go to the “Source” tab, find the color picker, and open that up. This opened to a nice color picker where I can find what I’m looking for. I’m looking for a more gray background, so I’m going to go right to the center and work with the colors here. This looks pretty good, it is a very light background. I’m simply going to copy the color value and go back to my file, click on the “Code” tab in the CSS, pop-over and simply paste in the value from the color picker. As soon as I do that, it updates over on the right. Very nice.

Let’s make one more change. I think this subtitle is too big, so I’m going to change the height of that. Let’s see here. Over in the HTML template, I see that the text I want to change is in the P tag. So, I’m going to find that in the CSS. “Header p” is telling me to select the paragraph elements inside the header tag. It says that it’s at 20 points, which is pretty large. So, I’m going to change this to bring it down a couple of pixels. Now we’re at 16, so that’s a little bit better.

I can change the font weight if I want. If you’re not sure what that is, you can the W3Schools and look up font weight. Maybe I want to bring it up a little bit. Let’s see what that looks like. That’s too dark; let’s go back down to 200 here. There we go.

This is looking good. I like this gray background. It’s not too bright on the eyes. Before I go anywhere else, I want to make sure this is my default. I’m going to reset the default, and all the changes that I have made so far have now been stored elsewhere.

The colors of the actual states may not fit my color scheme, so I’m going to make those changes. I write in the notes somewhere that the JS2 text field contains the default colors. I’m going to find that field (JS2), and here is the functionality that makes this happen. We have a lot of stuff going on here. There’s a callback function that runs a FileMaker script, and we’ll get into that in a later movie. But, up in the top of the code, we have some colors. We have the fills options, and we have 4 fill colors with different keys on them. We have high, medium, low, and unknown, and that matches my legend down at the bottom.

By the way, that does match how the data is set up. Notice, in the data pop-over, we have each state with a fill key, and it has a value. Alabama will have the color that is assigned to “high,” because it has that fill key. All of this comes from the data.  If we look at the data, we see that Alabama has the label “high” based on the number here in the data column.

I don’t want these colors in my setup, so I’m going to make some changes. I’m going to go to a great website Adobe Color CC. This is pretty awesome, because it gives me color themes that I can work with. I don’t have to guess at colors that can work together. You’ll notice, these are my colors from the scheme I was previously using.

I’m going to quickly explore some schemes. This one is nice.  I’m going to quickly choose this and find the color’s HEX value in the HEX field. What I’m going to do from here is simply copy the HEX value from the website into my library. I’ve only got 4 colors to work with. Let’s go with the last 3, and then the first we’ll use as the unknown.

I’ll first copy the HEX color and put it into my JS2 field for high. Immediately, it updates nicely. Beautiful – it’s looking good. Let’s go to the next one and copy paste it – beautiful. Last, copy and paste it. And there we go, so that looks very nice. That green is a little bit too light, so I think I’m actually going to go back to that color. I’m going to bring it over into the HEX color picker, enter a value here, and I get the same value. I’m just going to pick a little bit darker shade of that. And we’ll come over into the code view and update it, and as soon as I click out of the field, the web viewer re-renders.

Alright, so maybe this works for my integration, maybe not. If I like this, I want this to become my default. I’m going to say no here, but this could become my new default. So, there we have it. We were able to manipulate the integration, see the updates immediately, and have it set as my default. I can now import it into my custom app. We’ll do that in the next video.

Thanks for watching! Stay tuned to our website for other blogs on this library and other great techniques. Thanks for watching. Have a great day!