JS Learning Path

JavaScript takes time to learn, but we don’t always have the time to learn the language. There’s a lot in the JavaScript language; as FileMaker developers we might be unsure of what to learn.

Luckily there’s a JavaScript Learning Path–a path into JavaScript from our FileMaker experience. Based on five common workflows, we can identify the parts of the JavaScript language to learn so that we can be effective sooner rather than later.


GET PREPARED

Before you begin your journey, please take a few moments and prepare yourself. We don’t want you to be left behind. So here’s a list of what you can do to prepare yourself.

  1. MacOS users: enable the debugger in FileMaker. Read this wonderful blog post by our friends at Beezwax.
  2. Download the first part of the Learning Path file. Note: This will only contain one module at the start. Additional modules will be added in later (through importing records).
  3. Watch this video on how this Learning Path file works.
  4. Read up on JavaScript. Use the “Concepts” section of the Learning Path file to read about what’s interesting to you among the choices. We’ll refer to them in the subsequent videos, but if you got time, take a gander through the pages.

Download the file here.


BEGIN THE JOURNEY

Now let’s begin the journey. Below are Use Case sections, one for each of the five use cases we will explore. Pick any of them to study; skip any you don’t need to look at. If you’re new to JS in FM, then I recommend starting at the top.

Always feel free to reach out to support@geistinteractive.com for clarification if you don’t understand something or you see an issue.

Here we go . . .


Perform Actions

Every day in FileMaker we build layouts and workflows to allow a user to do something. We build buttons and script triggers to run FileMaker scripts that performs an action.

In JavaScript we can do the same: build HTML elements or even FileMaker scripts to perform some action in the web viewer with the displayed data. So we need to learn the basics of JavaScript functions and the two-way communication between FileMaker and the web viewer’s code.

Download the file here.

Exercises

In these sets of exercises, we focus on the bare bones of writing JavaScript functions, how to attach those functions to elements–elements in the HTML or in FileMaker.

Here’s the exercise playlist.  You can follow along with this set of videos (feel free to change the speed to 1.5x or faster), or you can study the concepts and answer on your own.

Load Data

Everyday we build workflows to display data. Whether we find and display records in a list or on a form view, we need to show data to the users.

When working with the web viewer, since it is an additional object, we have to build scripts to put code and data into the web viewer so it can display the data / UI for the user. We’ll explore how to load code and data into the web viewer from FileMaker.

Download the File or Exercises

Download the file here. This is a new file with bug fixes, so my recommendation is to download this file and run with it. If you want your Perform Actions exercises in the same file, import from your old file into the new one, updating records by the ID field.

Exercises

In these sets of exercises, how to load data from FileMaker.

Here’s the exercise playlist.  You can follow along with this set of videos (feel free to change the speed to 1.5x or faster), or you can study the concepts and answer on your own.

Manipulate Data

When we build UI widgets using JavaScript in a web viewer, we often need to take the data from FileMaker and manipulate it in some way to fit what we’re building. Many JavaScript libraries use a specially-constructed array as their data source, for example.

We can use the power of the JavaScript language and certain parts of it to manipulate the data received from FileMaker to fit our needs.

Download the File or Exercises

(Coming Soon)

Exercises

(Coming Soon)

Retrieve Data

FileMaker developers typically build web viewer widgets using JavaScript to display data or to perform some calculations. Clicking on a row in a web viewer or ‘crunching some numbers’ happens in the web viewer, and so we need to get the clicked row or the calculated result back to FileMaker

Download the File or Exercises

Download the file here. This is a new file with bug fixes, so my recommendation is to download this file and run with it. If you want your Perform Actions exercises in the same file, import from your old file into the new one, updating records by the ID field.

Exercises

Here’s the exercise playlist.  You can follow along with this set of videos (feel free to change the speed to 1.5x or faster), or you can study the concepts and answer on your own.

Update the Web Viewer

Everyday we work to build widgets that display data, whether through a chart or a table or some other kind of graphic. When new data comes in to the web viewer from FileMaker, or when the user interacts with the web viewer, it’s important to show an update.

So we can use JavaScript to cause the web viewer to update–either with new data, with changed data.

Download the File or Exercises

Download the file here. This is a new file with bug fixes, so my recommendation is to download this file and run with it. If you want your Perform Actions exercises in the same file, import from your old file into the new one, updating records by the ID field.

Exercises

Here’s the exercise playlist.  You can follow along with this set of videos (feel free to change the speed to 1.5x or faster), or you can study the concepts and answer on your own.