TRA09 - Advanced - Javascript for FileMaker Developers - Jeremy Brown

Document created by communitymanager on Jul 20, 2018Last modified by jbrown on Aug 14, 2018
Version 5Show Document
  • View in full screen mode

Jeremy Brown (Geist Interactive)

Session Description

JavaScript, the easy-to-read and most widely used language is the only programming language that is natively supported in all parts of the FileMaker platform. The language brings more functionality and speed to our custom apps. JavaScript is very much worth learning. In this course, we will learn JavaScript starting with our vast knowledge of FileMaker. We will focus on scope, variables, and functions, connecting those concepts to what we know already. By the end of the morning, you’ll have many small apps and have a better understanding of JavaScript

Session Materials

  • The materials will be available on a USB drive given out as you join the session.
  • The Slides will be posted here afterwards.

What You Will Learn

  • Learn JavaScript concepts starting with our knowledge of FileMaker
  • Build simple JavaScript apps
  • Be able to implement JavaScript libraries
  • Interact with FileMaker data and scripting


Essential Questions

This training session will strive to answer the following questions in all the activities and discussions in which we engage.

  1. How does our current understanding of FileMaker help us learn JavaScript?
  2. What are the benefits to using JavaScript in our FileMaker development?

We’ll keep these questions in our minds as we learn about JavaScript.



Additional Information

Class Materials

At the training session, you’ll be given a USB drive with the following files on it:

  1. JSPlayground - a FileMaker file where we can write functions that interact with the web viewer. Each exercise contains links to relevant JavaScript concepts, a place for notes, and the answer. The file is set up to work with the web viewer from the beginning, though we will explore how to do that.
  2. All About the Web Viewer - this is a FileMaker file that contains the exhaustive knowledge of the web viewer including tips, tricks, and known issues. It is a compilation of all the knowledge out there with links provided to those sources.
  3. FM-to-JS Functions - A FileMaker file that lists all the functions of FileMaker as well as the equivalent JavaScript function or method.
  4. JSPlayground with the Bridge - a FileMaker with Geist Interactive’s Web Viewer Bridge set up.
  5. DataTables Config - a FileMaker file that allows a set up of the DataTables integration with no knowledge of JavaScript


Topics Not Covered

There is a lot of information about JavaScript we will not cover in this training session. Here is a list of those topics, and we’ll provide great resources about each of these before and after DevCon.


  • The History of JavaScript
  • ES6
  • jQuery (a JavaScript library)
  • React.js
  • Node.js







We will try to stick to this timeline as best as possible.


Warm-Up: Self-Evaluation

FileMaker & JavaScript Exercises 8:30 am - 10:00 am

BREAK 10:00 am - 10:15 am

Working with JavaScript libraries 10:15 am - 11:15 am

FileMaker &  Bridging the gap 11:15 am - 12:00 pm

Closing: Additional resources & next steps.




Self Evaluation

We’ll open by doing a small pre-session assessment. I’ll ask a few questions about each person’s use of JavaScript, and we’ll review the results.


FileMaker & JavaScript Exercises

During this time we will get the basics of working with JavaScript and FileMaker. We’ll do exercises and along the way talk through the syntax and concepts of JavaScript as well as how this works with FileMaker. We’ll also talk through the web viewer implications.


Our task list is:

    • Setting up the FileMaker environment with the web viewer.
      • Using JS to do calculation
      • Using JS to do display work
    • Discussion of JavaScript syntax
    • Discussion of JavaScript concepts
    • Exercises that illustrate the following
      • How to write a basic JS function
      • How to return a value
      • How to get data from FileMaker to the function
      • How to return data from the function to FileMaker
      • How to work with dates
      • How to work with arrays



Working with JavaScript libraries

IN this section, we will review a few common and popular JavaScript libraries: C3Charting and DataTables. We’ll learn how to incorporate those into our FileMaker custom apps.


Our task list is:

    • Basic set up of a library - using it in FileMaker
    • Customizing it to meet our needs
    • Sending data to it
    • Building a dashboard for a custom app using these two libraries.


FileMaker &  Bridging the gap

In the last part of the training time, we will focus on how to work better with JavaScript in FileMaker. We will use a bridge JS library that works to get rid of some of the issues associated with the web viewer.


Our Task list includes:

    • What is the Bridge
    • Setting up the Bridge
    • Writing functions in the Bridge
    • Accessing functions using FileMaker scripts
    • Using a JS library and the bridge



We’ll close the session by revisiting the pre-session assessment and see if any of the responses should change. We will review additional resources and next steps one could take to continue to learn JavaScript in FileMaker.


Session Materials

Here are the materials for your review. We walked through some of this together, but you can explore it as well on your own.

I am working on more videos to supplement what we did at DevCon.


Start with the "FMforJSDevs.fmp12" file. That's a sort of dashboard for the others.