JS in FM Content

All the details including links, videos, and maybe even images that clarify what you will learn. Check out the Experiences and Discussions here.

The Experiences

Throught this course, you will experience the following topics. By the end of this you will be able to put the knowledge you have learned into practice.

The JS Dev Environment

Experience the ease and simplicity of working with JavaScript in FIleMaker.

Objectives: Become familiar with the JS Dev Environment. Answer these questions: what's it used for? How does it improve coding JS for FileMaker, and how can I use this to get the code into my app?
Documentation: JS Dev Environment

Setting up JS Libraries: Importing the Library

Modern JS allows an easy way to install and then access a JS Library.

Objectives: Successfully import a JavaScript library using NPM. Understand this module importing process.
Documentation: C3

Setting up JS Libraries: Getting Started

Make the web viewer render a chart in a few easy steps.

Objectives: Identify the major patterns of a JavaScript library. Get a library up and running.
Documentation: C3

Loading JS

Load the JS into a web viewer as easily as running a script.

Objectives: Use FileMaker to load the JavaScript into the web viewer
Documentation: C3

Getting Data Into the JS

Get data from FileMaker to the web viewer.

Objectives: Use FileMaker to pass data into the web viewer for use in a library or other code.
Documentation: C3

Getting Data Out of the JS

Easily retrieve data from the web viewer.

Objectives: Get data from the web viewer back into FileMaker. Apply a click event to the library using its functionality. Identify when the JS function can be used.
Documentation: C3

Customizing a Library

Make any library your own.

Objectives: Customize a JS library by working with its documentation. Become familiar with how documentation is written.
Documentation: C3

Refreshing the Web Viewer

Add interactivity by using FileMaker scripting to update the library

Objectives: Utilize both FileMaker and the JS library's functionality to refresh the library with a new configuration or new data.
Documentation: C3

Deploying to FileMaker

Take all your hard JS coding work and make it available for everyone.

Objectives: Take the code you have finished working on and push it to the FileMaker file.
Documentation: C3

Setting up JS Libraries: Loading from a CDN

It is too bad, but we must review how to work with older JS libraries.

Objectives: Explore how to make a library accessible through a content delivery network.
Documentation: Date Range Picker

Styling: Bootstrap

Add some professional styling to your widget.

Objectives: Explore styling our DOM using Bootstrap
Documentation: Bootstrap

Manipulating Data: Object Methods

JS makes it so easy to work with objects.

Objectives: Explore how to manipulate objects
Documentation: Object Methods

Manipulating Data: Array Methods

JS makes it so easy to work with arrays.

Objectives: Explore how to manipulate arrays
Documentation: Array Methods

Manipulating Data: Creating Elements

Create any kind of element on the fly in the web viewer.

Objectives: Explore how to create elements in the DOM
Documentation: Create Elements

Using the Execute FileMaker Data API

Get FileMaker data from any table quickly and easily.

Objectives: Retrieve data from FileMaker for the web viewer.
Documentation: FileMaker Data API

Loading Different Data Sets

Use one web viewer to display any type of widget and data.

Objectives: Build a system to push different kinds of data into FileMaker
Documentation: DataTables

The Discussions

As we learn specific skills, we will have broader conversations about the general concepts that will help us be better JS in FM Developers.

The File Structure

Organize your files & know what files you have in the dev environment.

Objectives: Understand all the files that are part of the JS Dev Environment
Documentation: Environment Components
Video Link: The JS Dev Environment File Structure

The DOM

Appreciate how a web viewer renders its code.

Objectives: Identify the major purpose and parts of the Document Object Model
Documentation: The DOM
Video Link

Git Workflow: A conversation about versioning

Control your code versions with pro tools.

Objectives: Understand the Git flow and its use in our workflow
Documentation
Video Link

The Quirks of the Web Viewer

How to not pull your hair out with this one.

Objectives: Be aware of how the web viewer works and how we should treat it.
Documentation
Video Link

The Dev Environment in the Real World

Connect this dev environment to your own client files.

Objectives: Set up the dev environment to work with your own client file.
Documentation
Video Link: Connecting

Web Viewer Context

Place a web viewer anywhere on any layout and have it work.

Objectives: Understand how context plays a role in the web viewer, where it is placed and the data source.
Documentation
Video Link

A bit about jQuery

A library of useful functions is ours for the using.

Objectives: Get familiar with the jQuery library and its purpose and use.
Documentation: jQuery
Video Link

JS Separation of Concerns

Organize your JS code.

Objectives: Set up your file structure in an organized fashion
Documentation
Video Link

Styling Customization

Make the styling your own

Objectives: Make your rendered view different by overriding the default styling.
Documentation
Video Link: Office Hours Demonstration

Web viewer as a Calc Engine

Expand your use of the web viewer.

Objectives: Set up a FileMaker file to use JS as a calc engine.
Documentation
Video Link