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

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

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

How Awesome is this??

Sign up now and learn how to use JavaScript in Claris FileMaker Pro.