In the DevCon 2018 training session on JavaScript, we took a look how to integrate various JavaScript libraries into FileMaker. We only got through one, and I’m sure I went pretty fast during the remaining minutes to make sure that I at least completed it. I might have lost a few folks. 🙂

But that’s okay. No DevCon Attendee left behind!

The week after DevCon I began to record videos of how to do the work. My plan was and is to work through each integration and walk through how I’d do the work.

So here’s the first one.

DataTables in FileMaker

Here’s the files for you to try out.

TL:DR

This video is long. It’s 53:00. So I broke it up into a few sections. Check out any of the sections in which you’re interested. (But, it’s good to watch the video in whole).

  • Basic Setup: 0:00
  • CSS Styling: 30:38
  • Functionality (adding the row click): 38:20
  • Table Options: 51:02.

Some Thoughts

It’s a fairly speedy process

I’ve done this enough that I can set up an integration in less than 20 minutes. I usually export all the code from a previous project or a practice file, so that makes things go even faster. And with more practice, you will get even faster. One DevCon attendee reported to me that he thinks it would take him 10-15 minutes to do another integration. The set up I’m advocating is simple. It’s fields and tables. That set up works for now.

Styling can take some time

The hardest part of this is styling it. You have to get down into the nitty-gritty of the CSS and adjust individual items. In the above video, I talk about it a bit, but this will require some more study.

The default library is a good start

DataTables comes complete with a full set of functionality. Once you install it into your custom app and load it with data, you can sort by columns, do filter-as-you-type, and adjust the number of records showing. There’s no additional scripting or buttons or tricks; just use what the (very well tested) library provides.

Alt ways

I’m suggesting one method here. But there are others, and we’ll discuss those in the future.

There’s one more method for using DataTables in FileMaker. For all my talking about using JavaScript in FileMaker, I’ve got a config file that will allow you to set up an integration without knowing any of the underlying JavaScript. Check that out here.

Onward

DataTables in FileMaker is one way we can innovate in FileMaker. We can provide a professional set of functionality to our clients. This functionality may not be needed for every list or portal. However, if the client asks that related records are sortable and searchable, we can turn to this library for complete help.

We’ll continue our study of JavaScript. Please join us in the SLACK channel, and we’ll talk about these. And stay tuned to our site for more integration videos.

Download the source, start file and finished file here.

Training Day at DevCon 2018 finally arrived, and I was ready. After fretting over my ‘lesson plan‘ for so long, I was ready to do some FileMaker DevCon JavaScript training, for FileMaker developers. So I left the breakfast room and entered my classroom. I was hoping to get some moments of calm before we started. To clear my head, to focus on the material at hand.

I walked in the room, and there were like 20 folks there. “Woo,” I thought.  I got them started on some ‘morning work’ to prepare for the time.

A few minutes later, there were over 60 people in the room., still barely 45 minutes before the 8:30 AM start time. I handed out more USBs.

By 8:30 am, the start time, folks were ready to learn JavaScript. A lot of them.

The JavaScript worm

Slowly but surely, JavaScript is becoming more present in FileMaker developers’ minds. The training session brought in over 150 people that think about JavaScript. These folks are interested in the power of JavaScript, in the fact that it is easy to learn and use. We are intrigued by the possibility that we can develop interactive charts or include a whole set of functionality in just a few minutes (maybe an hour at the most). We recognize part of making our custom apps innovative for the workplace is to use all the professional tools available, including JavaScript.

There’s a season for everything

I’m not the first to advocate for JavaScript in FileMaker. Many folks have come before me and have said the same thing. I rest on their shoulders. But now, it seems, is the good time to really explore what we can do with JavaScript (almost anything) in FileMaker. We get a glimpse at what we can do with the language. The time is right; let’s keep moving forward.

Many of the people & compaines who’ve contributed to my knowledge of JavaScript and the Web Viewer.

In the session

Focusing on pure JavaScript, we studied how to work with the Web Viewer.

For a very quick three hours, we took a look at JavaScript in the form of pure JavaScript and in the form of JavaScript libraries.

JavaScript, pure

First, we did a very brief study of some JavaScript concepts. I believe we all should know a little bit of the language so that when we want to do something in a library or in a blank web viewer, we have the knowledge to achieve it. So we spent time on pure JS, writing functions that added text to the web viewer or changed the color of a background. We built buttons in the web viewer and attached events to them. We learned a bit about variables and scope and functions.

JavaScript Integrations

After the break, we turned to JavaScript libraries, the fun part. Together we walked through how I have set up working with libraries to integrate into our custom apps using FileMaker data. We started with a chart and set it up, talking about that set up and how to customize the chart. The concepts we practiced in the first half helped us out here.

Along the way, I got to work with individuals and help them through very common mistakes (a missing comma or semi-colon). I also spoke about JavaScript concepts such as variables and scope and functions.

It was quite unfortunate that we didn’t have a full day to do this work. I wanted to spend more time on pure JavaScript and on how to integrate libraries. We completed 9 out of the 25 exercises, and only got to review one out of the eight integrations. But not all is lost. See below for more info on a plan.

I encouraged folks to sign up for the FM/JS SLACK group we started up a while ago. And many folks did. That’s one of the ways we’ll stay in constant contact throughout the next year.

Beyond the session

People left the session excited about using JavaScript. Many people approached me saying they see it as much more accessible now that we went through it. They were inspired to begin to use what we did in their own apps. That’s very cool. My goal has always been to excite FileMaker developers about JavaScript.

During the week of DevCon, at least two people continued the training session by working on an integration. Phillip Jaffe worked with the DataTables integration, and Logan Cornelius worked with the C3 Charting library. Through text messages or on SLACK or in person, I worked together with them to get their libraries integrated and to talk about the nuances of the library. We met at the Geist Interactive booth or in the hallway to get it worked out. Both attendees got their work done by the second day of the conference. Logan reported it took him about an hour to get the charting library working with data from his app.The rest of the week he tinkered with it, changing colors, adding options. 

I could tell he was excited about the work he did. And so was I.

Continuing the session

Lest anyone think they’ve heard the last of the session, we have a lot in store in the upcoming year. We want to keep this conversation going and inspiration hi, so we will do something with JavaScript every month leading up to DevCon 2019!. Here’s a list of what we’ll do and how you can participate.

  • On the FM/JS SLACK group, we’ll talk JavaScript and how we’re using it in our apps. It’ll be a great casual conversation. Please join and get in on the conversation.
  • The JavaScript training materials are found here. Download those and try them out.
  • I’ll do videos for each of the exercises in my JSPlayground file, and will set them up on a JavaScript-dedicated webpage.
  • I will do a ‘let’s integrate’ video for each of the integrations found in my session files. You can watch and listen as I work on one of these at a time.
  • As logistics allows, I’ll talk JavaScript at user groups throughout the community. Todd and I will be at the west coast user groups (Portland, Seattle, FMDIG, FMDisc, and San Diego) in October to talk JavaScript and other professional tools.
  • Occasionally we’ll do webinars on JavaScript and JS integrations. We’ll alert you in plenty of time so you can plan to attend.
  • And of course, I’ll suggest using JavaScript in the forums. I’ll be the first to admit not everything is a hammer (not everything needs JavaScript) but where it is a viable option, I’ll suggest and provide a sample file.

Join us for any of these events. We’ll take the next year to learn JavaScript and how it can be used in our custom apps.

Filemaker Devcon JavaScript Training

The future of FileMaker and JavaScript is bright. We will continue to promote its use and inspire folks, and I hope to work with others in the community to do the same. JavaScript is one of the many professional tools FileMaker developers can use to innovate.

 

In less than a week (as of Monday, July 30), I will work with FileMaker developers to learn, or get started learning JavaScript. I can’t wait. While I’m nervous about it, I’m also pumped that we get to talk the power of JavaScript and the power of the web viewer. It’s been my life’s goal (for the past 4 or so years) to get FileMaker folks excited about using JavaScript. We get to take another step in that direction. JavaScript is easy, it is powerful, and it is part of native FileMaker.

If you’ve not yet registered up for the training day (an additional cost), I encourage you to do so. I know it’s an investment. So to make sure your return will be adequate, I’ve described in pretty minute detail what we will do during the morning (there are other great sessions in the afternoon). You can check out the outline here. And you can review this video.

 

The Highlights

On our minds

As we wrap our brains around JavaScript, we’ll keep in mind two questions:

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

In education, these are called “Essential Questions”. These are vital mainly to our adoption of JavaScript as a viable tool in our FileMaker development, and they keep us grounded. As cool and powerful as JS is, we need to remained focused on our client’s data and custom app and needs.

Hands-on

We will spend most of the time in the session:

  • Working with pure JavaScript. We’ll write little functions that accomplish something for data presentation in FileMaker or data manipulation.
  • Exploring how to set up using JavaScript in any environment, for any custom app.
  • Implementing and customizing current JavaScript libraries out there for our use.

I’ve got quite a few files for us to work with. Here’s a few screenshots.

We will spend a lot of our time in here. writing functions that display our data in interesting ways.

We will spend a lot of our time in here. writing functions that display our data in interesting ways.

This file is a reference for what is known about the web viewer object

An example integration we’ll implement.

Join the JavaScript revolution

I encourage you to sign up for this training session. The more FileMaker developers that know and use JavaScript, the more the movement grows and the more awesome custom apps get delivered to clients.

Join me August 6, 2018 at 8:30 a.m. at DevCon 2018 to begin the JavaScript journey.

-Jeremy

You know me. I enjoy working with JavaScript. I learned it from my context of a FileMaker developer, and I think everyone can and should consider using it in some aspect of their work. We all can adopt a FileMaker integration. This year I’m lucky to teach a training session at DevCon, where I’ll guide people through the basics and how to apply it to their work. While not every answer I give on the forums is about some JavaScript integration, I do promote it where applicable.

The time barrier

But I do realize that there are barriers to the language for us FileMaker people. I asked a question about this a couple of weeks ago. Most people responded with ‘time’. They simply don’t have time to learn the language. I think that is more of a perception than reality, but I acknowledge that idea. My training session will work to break down that barrier, by the way.

Because of this perceived barrier, I want to give folks a way to use JavaScript integrations without actually knowing JavaScript. How you ask? Well, this goal is accomplished by a cleverly-created FileMaker file: The DataTables config file. Let’s take at this barrier-smashing setup.

Introducing DataTables Config

The goal of this file was to give anyone the ability to implement the DataTables integration into their custom app. And the DataTables JavaScript library provides a heck of a lot of functionality for list views or lists of related records with no additional coding. You can set up a web viewer that shows related records with column sorting, go-to-related-records, column or row colors, filtering, etc.

DataTablesConfig.fmp12 is a  FileMaker file that simply generates the JavaScript needed for the integration after the developer adds or removes functionality. Here’s what it looks like.

I’ll say it again. This config file lets you set up the DataTables integration without messing with the JavaScript. After only ten minutes of setting it up, the above configuration produces this:

Gettin’ you hooked

This config file is meant to be a gateway drug into using JavaScript. Once you try it out and see how much functionality it adds to your custom app and how easy it is to set up, you’ll be interested in diving into the JS code. I guarantee that. You’ll want to look at the JS code (it really is just text) that makes this all happen. You’ll find it is easy to read (JavaScript is easy to read) and you’ll be inspired to mess around with it, to change something to see what happens. And in this case, no one gets killed by the curiosity. Mess it up, you can use the config file to revert back.

You’ll be hooked on JavaScript, and then you can continue to learn more about the language. We at Geist Interactive will guide you along.

Features of the DataTables config file

There’s too much to explain in detail here in a blog post, so be sure and check out the video that walks you through the app. But here are some highlights of its features.

  1. DataTables comes with a lot of default features and options. If you don’t want to customize your implementation, you can generate the default code quickly.
  2. You can add or remove features and options using the FileMaker data fields and UX provided here.
  3. There are detailed examples of how to format the text you wish to put in. For example, if you choose to have your default table sorted by column 3, you can choose the ‘order’ option and then pass to that option the following text: [2, “asc”] (this is a 0-based index). That’s easy enough to type, don’t you think?
  4. You can add additional extensions to your implementation, functionality that makes the integration more complex. Such as something that looks like a sub-summary report (grouped records) in little time.
  5. There’s plenty of help and descriptions of the features.
  6. You can (and should) map your fields to this config, and you can describe how each column should behave.
  7. You can add a callback function (Run a FileMaker script when you click on a row) and even assign a column to use in the search.
  8. You can set this file up to be a module, a separate file next to your custom apps and link to it. This action allows you to use the code stored here to display the data.
  9. Give some basic custom styling to the table.

There’s so much more that can be done, and we’ll explore Extensions, custom CSS, and calling FileMaker scripts in later posts and videos.

FileMaker Integration: Give it a try

I strongly encourage you to give it a try. Play with it, mess it up, do all sorts of stuff to it and figure it out. I promise it will not take hours and hours (maybe one or two). It won’t be a huge drain on your life.

Download the free tool. Watch the video. There are some fine points in this, and it is best shown in the demonstration.

Feel free to reach out at jeremy@geistinteractive.com with questions if you wish. I can answer some questions, or we can set up an implementation package to do some custom development with this configuration in your custom app.

Let me know how it goes.

 

 

 

 

You, Ms. / Mr. FileMaker developer can be a JavaScript developer as well. You can learn JavaScript and use it in your daily work.

FileMaker folks are suited for JavaScript. Though we may have stumbled into the FileMaker platform, we have enough knowledge and conceptual understanding to program also in JavaScript. There are many reasons why we can learn and why we should learn JavaScript. Let’s examine them.

Can Learn

A simple & powerful language

JavaScript was designed to be a beginner’s language. Like the Dick & Jane books or Sesame Street, JS’s structure and language is simple. It uses normal words and and a straightforward syntax. I bet you could figure out what this JS function does:

function sum (){
var a = 3, b = 5;
return a + b;
};

(answer: this is a function called “sum” that assigns values to two variables and then returns the sum).

This simple language is appealing. That’s not to say the language is impotent in any way. It is incredibly powerful.  Complex powerful applications that are used by billions of people around the world, like QuickBooks Online, and Facebook are built with JavaScript.

FileMaker knowledge

Our FileMaker knowledge can help us to learn JavaScript faster. We already have an understanding of such things as variables, variable scope, functions ( scripts and FM functions), and parameters. We can leverage what we know about FileMaker to help us learn JavaScript better.

The VAST community

On the recent StackOverflow survey, 62% of respondents said JS was their favorite language. People devote their career to working in JavaScript, so there’s a plethora of resources out there from which to learn and ask questions.

I learned it

Though I’m still plugging away, I feel pretty confident in my JavaScript knowledge. I played around with the language a lot and built countless FileMaker and html filles and watch hundreds of hours of video, but I learned it. You can too.

There are many reasons we can learn JavaScript. Let’s take a look at why we should learn the language.

Should Learn

Native FileMaker

We should learn JavaScript because it is a native part of FileMaker. It is supported on every part of the platform: FileMaker Pro and FileMaker Go runs JS in a web viewer, and FileMaker Server 16 includes node.js ( a JavaScript framework) in the install. Even WebDirect can run JavaScript in a limited way.

Since it is part of the platform, it behooves us to spend time with it and learn it. We can use JS to solve some vexing UI and scripting problems we occasionally encounter in normal FileMaker development. If your client wants a portal to have columns that sort in whatever combination she wants, a JavaScript library can solve this problem in much less time than it takes to develop it using FileMaker buttons and scripts.

If we have our way, FileMaker functions one day will call JavaScript functions. Right now we can do that with some small workaround (and will show that very soon). GoDraw3 uses this FileMaker-calling-JS-functions idea (check it out and download the unlocked trial version).

‘Tis the future

JavaScript will be around a long time:

  • JavaScript ranks number 1 in a survey of favorite languages or languages in use.
  • JavaScript is a cross-platform language.
  • The JS community invests tons of time in creating libraries
  • JS runs both on the client (in the browser) and server-side (using node.js).

If you do not learn it, your competitor will

Some day, some client will come to you with a use case to solve using their FileMaker custom app. Without the multi-tool capabilities of JS in your belt, the problem cannot be solved easily, and your client will find someone that can solve it.

Moonlighting

I know you’re not looking, but knowing JS can open up other job possibilities. JS developers are few, and the jobs are abundant. It’s a developer’s market.

So what’s your excuse?

Answer: there is none. It is important for FileMaker developers to see beyond just scripts and layout objects and view what’s possible and the tools that make those possible. So learn it.

Okay, I thought of an excuse: timing / familiarity. Folks think they don’t have the time to learn something that looks scary. Learning FileMaker is a full-time job, they say. These folks do not recognize their brains are primed for this language. It’s scary to jump into something new.

Join me at DevCon & Learn JavaScript

At FileMaker DevCon 2018, I will do my best to help folks learn JavaScript concepts and some techniques, taking away the scary and unfamiliar nature of it. We will spend a half-day training session learning the syntax and JS concepts, and will spend lots of time coding. We’ll start with FileMaker and use our knowledge of that platform to learn JavaScript. My training session is on Monday, just before the full conference starts.

Learning objectives

We have specific learning objectives. You’ll walk away with a lot of knowledge:

By the end of the session, FMDWBAT*:

  • Write JavaScript apps using the FileMaker web viewer and a text field
  • Pass FileMaker data to a JavaScript function
  • Retrieve the result of a JavaScript function to FileMaker
  • Customize an integration of popular JavaScript libraries
  • Use FileMaker scripts to call JavaScript functions (passing data to and retrieving data from the JS function).

*FMDWBT = “FileMaker Developers will be able to” –a derivation of a phrase I wrote on my classroom chalkboard/ whiteboard / smartboard everyday that proceeded that day’s objectives.

Complete documentation

Because I’m a teacher, you will be given lots of materials with which to participate during the session and continue your study afterwards. Here’s what will be available during and after the training:

  • The similarities between FileMaker and JavaScript
  • JavaScript use cases of varying levels
  • A playground in which to try out our JS code.
  • Videos of yours truly demonstrating a JS app for your repeated viewing at your own pace.
  • Great differentiated help.
  • Extensions: tasks and learning materials continuing through the week. Who needs the pool when you can continue to solidly your knowledge of JS.

Welcome anyone of any level

Join me and learn JavaScript as painlessly as possible no matter where you’re at in your FileMaker development path.

I’m a teacher at heart, so I’m there to guide and redirect and support anyone. We will work together to bring JavaScript more into the community so that we can talk about it from the FileMaker perspective just as often in the community as we talk about SSL or ExecuteSQL.

Feel free to shoot me any questions about the training. I’m happy to answer them: jeremy@geistinteractive.com.

See you in just three months!

 

 

My presentation, “JavaScript is Eating the World” was released last week along with the rest of the Web Track presentations.

Read more