• 2

Render WebDirect in an Iframe

Tags : 

Is there a feature you want to add to your website that you could quickly implement using FileMaker but not using the language your site’s programmed in? You could send users to a WebDirect app, but replicating all of your website’s design elements in FileMaker can be time consuming. Plus, if your site’s style is not carefully carried over to WebDirect, you risk weakening your brand’s cohesiveness in the eyes of users. What if you could create the feature in FileMaker and drop it into a page of your website as a component, letting your website’s theme take care of unrelated components like headers, navigation bars, and footers?

The HTML Iframe element loads another website or web resource as a child element of the surrounding page. They’re useful in cases when there’s an external resource you’d like to serve to visitors of your website, but you do not want to send visitors to a whole new site. Most if not all modern browsers support Iframes, and you can even include multiple Iframe elements on a single page. This post describes how to embed a FileMaker WebDirect solution within a website using an Iframe element.

Before we get started it may be helpful to see an example of a framed WebDirect app in production. If you’ve visited our Downloads page recently, you already have. That page uses a framed WebDirect app to collect contact details before providing access to file downloads. The parent elements (header, navigation bar, footer, etc.) are the exact same as other sections of our website. Changes we make to the WebDirect app via FileMaker Pro get pushed to the framed element, and changes we make to our website’s template get pushed to the parent elements.

To accomplish this we had to make a few server-side configuration changes. By default, FileMaker Server’s HTTP response headers only allow pages to load WebDirect content within an Iframe if those pages have the same origin. According to Mozilla, “pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages.” For example and have the same origin, but and do not. This is the default configuration because it prevents other sites from surreptitiously framing your FileMaker WebDirect solution. Without the right response headers in place, your app would be vulnerable to attacks like Cross-Frame Scripting.

Luckily, you can maintain your site’s security and take advantage of Iframes by using Content-Security-Policy (CSP) and X-Frame-Options response headers. These headers tell web browsers whether or not to load a page within an Iframe. CSP, the newer and more robust of the two headers, lets you specify which sources to trust for specific resource types using what are called directives. For example, you can use the “font-src” directive to define as the only valid source of fonts for your page. In the case of framing WebDirect, the CSP directive we care about is “frame-ancestors”, which lets us define who can frame our app.

X-Frame-Options has been deprecated in favor of CSP, however it still needs to be included in order to support certain browsers including Internet Explorer. If your web server’s response headers include CSP but not X-Frame-Options, browsers that do not support CSP will assume you have not set any restrictions on who can frame your site. Unfortunately, X-Frame-Options only provides three options: do not allow framing at all, allow same origin framing, or allow from one specific origin (single frame ancestor).

Now that the details are out the way, here’s how you implement these response headers. In the following steps I’ll assume you’re running FileMaker Server on Windows.

  1. Open File Explorer and go to this folder: C:\Program Files\FileMaker\FileMaker Server\HTTPServer\conf 
  2. Copy a backup of the file C:\Program Files\FileMaker\FileMaker Server\HTTPServer\conf\web.config to another folder like the Desktop. If you make an irreversible edit to the web.config file, you can simply restore your backup copy.
  3. Run your preferred text editor as administrator and open the web.config file.
  4. Scroll to the bottom of the file. Add or edit the <customHeaders> element to include the Content-Security-Policy and and X-Frame-Options headers.
  5. Save and exit the web.config file.

One last change is needed to ensure your WebDirect app renders within an Iframe. In Safari 11, Apple enables the “Prevent cross-site tracking” privacy preference by default. This preference prevents cookies from being set across domains if the user has not already visited the domain setting the cookie. In other words, if frames and a user at has never visited, Safari will not allow to set cookies as a frame element.

To workaround this setting, a few lines of JavaScript code (courtesy of Github user vitr) at both the parent site and the framed site are necessary. First, add this code to the parent site’s html within a script tag:

// Safari 11.0 cross-site tracking support.
// If the user is browsing in a Safari Private Window,
// browse to the framed site. The framed site should then
// set a cookie and navigate back to the original site.
// Reference:
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
if ((is_chrome) && (is_safari)) {is_safari = false;}
if (is_safari) {
if (!document.cookie.match(/^(.*;)?\s*fixed\s*=\s*[^;]+(.*)?$/)) {
// JavaScript at sets a cookie and
// navigates back to

Second, create a file called “cookie.html” and save it within the C:\Program Files\FileMaker\FileMaker Server\HTTPServer directory. Then add these lines to cookie.html within a script tag:

// Reference:
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
// Chrome has Safari in the user agent so we need to filter (
var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
if ((is_chrome) && (is_safari)) {is_safari = false;}
if (is_safari) {
// See if cookie exists (
if (!document.cookie.match(/^(.*;)?\s*fixed\s*=\s*[^;]+(.*)?$/)) {
// Set cookie to maximum (
document.cookie = 'fixed=fixed; expires=Tue, 19 Jan 2038 03:14:07 UTC; path=/';

With these changes applied, your framed WebDirect app should render correctly in all modern browsers while still being secured against unwanted framing.

  • 0

DevCon 2018 Details Revealed

Tags : 

FileMaker Developer Conference 2018 (DevCon 2018) has been officially announced! See below for a snippet of the press release from FileMaker. More information is available on FileMaker’s website, including a schedule of events, session topics, and recommended tracks. We’ll see you in Texas!

August 6-9, 2018 | Gaylord Texan Resort | Dallas, Texas

Join 1500 developers, just like you, at the FileMaker Developer Conference 2018.

DevCon 2018 is the must-attend event to learn everything and anything about FileMaker custom app development:

Broaden your development skill set with more than 80 sessions to choose from. Attend beginner, intermediate, advanced, business, and special focus sessions.

Discover how to build more innovative FileMaker apps using technologies such as REST, JSON, cURL, SSL, JavaScript, SQL,OAuth, AI, iOS, and more.

See how to plan and develop FileMaker projects that will differentiate your business from the competition and maximize ROI.

  • 0

Women of FileMaker DevCon Scholarships

Tags : 

Are you interested in an in-depth look at FileMaker 17’s features? How about bolstering your understanding of cryptography and its uses in FileMaker? Do you want to adopt an Agile approach to your next project but don’t know where to start? These topics plus many more will be covered this August 6 through August 9 at FileMaker Developer Conference (DevCon) 2018 in Dallas, Texas.

If you’re a woman considering attending for the first time, you may be able to have the conference registration fee covered thanks to the Women of FileMaker community group.

The Women of FileMaker community has been providing scholarships to first-time attendees of DevCon since 2016. This year, scholarship recipients will have DevCon’s pre-paid registration cost covered and be assigned a conference mentor. They’ll also be introduced at the twelfth official Women of FileMaker luncheon.

Scholarship hopefuls can apply now by completing a short form and submitting an essay. The application deadline is Friday, March 16.

Funding for the scholarship and conference mentors are provided by the FileMaker community. If you’d like to contribute to the scholarship fund, make a donation via the GoFundMe page. If you’re interested in becoming a mentor, visit the Women of FileMaker website. Our very own Kimberly Carlson has been a mentor since its inception and would be happy to answer any questions you may have about the program.

And don’t forget to say hi to those of us attending this summer from AppWorks!

  • 0

FileMaker Portland – Integrating Web Services

Tags : 

Thank you to everyone who attended the January FileMaker Portland meetup. The evening was packed with presentations about how people are leveraging FileMaker 16’s JSON support to connect to web services.

Some of the integrations we discussed were:

  • Magento – This popular e-commerce platform has REST and SOAP APIs. Use them to connect data about products, customers, and orders to FileMaker.
  • SmartyStreets – Supercharge your address entry fields with five different APIs.
  • Google Charts – A Javascript library for creating interactive HTML5/SVG charts.
  • FileMaker – Why not the other way around? Make POST, GET, PUT, and DELETE calls to FileMaker using the Data API.

Have something you’d like to share or discuss with other FileMaker developers? Consider attending the next meetup.

  • 0

FileMaker Academy: JSON and Multiple Script Parameters

On Tuesday, January 23, Rohit Roy from IT Solutions presents FileMaker JSON and Multiple Script Parameters.

Short for Javascript Object Notation, JSON has quickly become a web standard. Since FileMaker 16 gave us new functions to easily implement JSON into our code, many developers are switching to JSON as a native method to support multiple script parameters. In the first half of this webinar, we will cover the basics of JSON and the new FileMaker JSON functions. In the second half, we will learn how to use JSON to pass multiple script parameters without plugins or custom functions!

Date: Tuesday, January 23
Time: 2:oo – 3:00 pm ET / 1 pm CT /  11 am PT
Register Now! 



  • 0

Generating Google Charts in Web Viewer

Tags : 

Google deprecated Google Image Charts in 2012. While that API can still be used to create charts with a URL, Google currently recommends that people use the similarly named Google Charts. This blog post will go over how to format data for the Google Charts library and generate a chart within a Web Viewer object.

Classic vs Material

Google Charts offers two versions: Classic and Material. The two versions differ in how charts look and feel, and how customization options are defined. Material charts are redesigns of core charts that follow Material Design guidelines. They offer marked style improvements over Classic charts, and will appear familiar to users of Google products. However, they are currently in beta and do not support all of the features of Classic charts. If you are having trouble implementing a Material chart, make sure that you are not trying to include an unsupported customization option by referencing the open Feature Parity issue.


When you need to use an option that is only available for Classic charts, you can still style your chart like a Material chart by including the “theme : material” option.




Information to be charted must be sent as a DataTable. The simplest approaches to generating DataTables within Web Viewer are by combining addColumn() and addRows(), or by using arrayToDataTable().

The addColumn() method requires either a type, or an object describing the column’s type and role. You can optionally pass labels as parameters as well.

In the example below, the x and y axes of a scatter plot are defined by calling data.addColumn(‘number’, ‘Revenue’) and data.addColumn(‘number’, ‘Gross Margin’). The third column is a tooltip, which displays when a user hovers over a datapoint.

Material-Themed Scatter Chart


The addRows() method accepts a nested array as a parameter. In the above example, a FileMaker script was used to assign a list of arrays to global variable $$A. When inspected using Data Viewer, $$A looks like this:


While these two methods do the job, if you are adding more than a few columns it will likely be more helpful to use arrayToDataTable(). This method converts a nested array to a DataTable and can infer the data types of each column, meaning you do not need to manually define them using addColumn().

Material Bar Chart


The global variable $$B referenced in the above code was generated using a FileMaker script and looks like this:

Trying It Out

  1. Add a Web Viewer object to a layout and open Web Viewer Setup. Set the website to Custom Web Address and select Specify…
  2. Begin your calculation with the following line: “data:text/html;charset=UTF-8,” & “
  3. Prepare your own html code or sample code from Google’s Chart Gallery in a text editor. Specifically, replace any double quotes within the html with single quotation marks. This makes inserting FileMaker variables and fields into html code easier, since you can define a block of html between double quotes, concatenate a variable or field, then concatenate another block of html between another pair of double quotes.
  4. Following the quotation mark, paste in the prepared html code.
  5. End your calculation with a double quotation mark.


If you’re interested in integrating Google Charts within a FileMaker solution but could use some more guidance, please feel free to contact us. We have experience with various web services, and have even created a free downloadable FileMaker module, fmMapping, using the Google Maps API.

  • 0

Season’s Greetings from AppWorks

Thank you for being a part of our prosperous 2017.

We wish you the same in the coming year!

  • 0

AppWorks Spreads Holiday Cheer with Volunteer Project

To encourage a work-to-live not live-to-work balance, each month AppWorks’ team members engage in a “Project Fun” whereby the staff steps away from the computer and participates in team activities. These activities vary from going to the movies, showing off their athletic abilities while bowling or sharing their love of adventure with indoor skydiving.

In December, the team decided to give back to their local community and spent a few hours volunteering at the Portland Homeless Family Solution (PHFS). The mission at PHFS “is to empower homeless families with children to get back into housing and stay there long-term.” Now that the colder weather is here, AppWorks wanted to show their gratitude for organizations such as this one, that keep families sheltered, fed and together through volunteering.

The AppWorks employees added some holiday cheer while decorating, preparing supplies and creating examples for the craft tables for the annual Holiday Village. The Holiday Village provides dinner with pizza, activity and craft stations, and a visit from Santa Claus for families who have been a part of PHFS’s services in the past year. The party also provides parents an opportunity to pick out and wrap gifts for their families.

AppWorks would like to thank Bethany Rocci, the PHFS Volunteer Manager, for her enthusiasm, dedication and organization of the event.

As stated on their website, the three main programs at PHFS are:
• Housing First Program – PHFS helps families experiencing homelessness move back into housing as quickly as possible. The organization provides rent assistance and case management for 12-24 months to help families keep their housing long-term.
• Shelter – PHFS operates 24 hours of shelter every day of the year for families experiencing
homelessness at Goose Hollow Family Shelter and Thirteen Salmon Family Center. They rely on a team of over 800 volunteers to help provide supportive, compassionate services.
• Life Lab Skills Training – PHFS teaches evidence-based classes to help families learn new tools and skills they can use to help them get and retain housing. Classes include Incredible
Years Parenting, Rent Well Tenant Education, and the ARISE Life Skills Curriculum.

Read more about Portland Homeless Family Solution and how you can get involved at



  • 0

FileMaker Portland – Holiday Potluck

Tags : 

FileMaker Portland would like to thank everyone who feasted at our Holiday Potluck. Plates were stacked high with homemade chili and cornbread, smoked salmon, and three types of sandwiches from Lardo. In between bites, revelers discussed all things FileMaker and toured our new office.

Interested in joining us at our next event? Check out the FileMaker Portland meetup page for more information.

  • 0

Have You Been Wingdinged?

Tags : 


Have your FileMaker layouts miraculously transformed into a collection of nonsensical symbols? Does your data resemble a prehistoric cave painting? If so, you’ve likely been wingdinged. Due to a known FileMaker bug affecting Windows computers running Adobe products, fonts can be replaced with a dingbat-style temporary font. Before translating your application character by character, try following these steps for a quick fix.

The Simple Solution

First close FileMaker completely, then close any open Adobe programs. Next, reopen FileMaker before reopening your Adobe programs. Your FileMaker fonts should now have returned to normal.

Other Things to Try

Keeping Adobe products up to date can potentially help mitigate font-related issues. To make sure you’re running the latest available version, open your Adobe program, choose the Help menu, then select Check for Updates.

There are a few advanced troubleshooting steps available if neither restarting your programs nor updating Adobe restored your FileMaker layouts to normal. Take care while attempting these fixes, as deleting the wrong file can lead to more headaches.

Delete the file “fntcache.dat” located within the C:\Windows\System32 folder, then restart your computer. Your operating system temporarily saves font data to this file. Deleting it and rebooting forces your computer to recreate it, hopefully clearing away any corrupt data.

Close any open Adobe programs, then delete the folder “acrord32_sbx” located within the C:\Users\\AppData\Local\Temp folder. Adobe programs save temporary files to this folder. Recreating it has been known to resolve various Adobe issues.

Hopefully these troubleshooting tips have brought your FileMaker application back from wingdingland. If you’re still running into issues, it may be time to bring in one of our experienced developers to help get things working again. We’re always happy to help, so feel free to contact us!