BlogFileMaker

Best Practices for FileMaker Web Viewer Integrations

By October 4, 2017 January 15th, 2020 5 Comments

A year ago, I knew very little about the web viewer and how to use it in a FileMaker custom app. I could use the presets, of course, but couldn’t adapt it to my own needs.

My, how much has changed in one year. Through careful study that took many hours, I finally came to some understanding of how to integrate languages of the web (HTML, CSS, JavaScript) into a custom app to provide deeper functionality.

As a result of that hard work, I was lucky enough to be able to share my experience and offer some advice at FileMaker DevCon 2017 on this very subject, and I’m grateful for the opportunity.

This hour-long session barely scratched the surface of the lessons I’ve learned over the last year. I could have gone for two or more hours on these insights I have to share. In an effort to give DevCon attendees the information I find most important, I focused my session on the best practices of integrating a JavaScript library into FileMaker, showcasing my guides through the lens of real-life examples.

Web Viewer Library-FileMaker Integration Best Practices

These best practices include:

  1. Placing all web-language code into fields;
  2. Using one field for each of the files a library requires;
  3. In the main field, called HTML in my library, putting in placeholders, such as “**CSS**” that will be eventually substituted out for the code in another field; and
  4. Using the fmp protocol to call back to FileMaker and perform some action on the data.

I illuminated these best practices and ideas through a few examples of the web viewer library, a collection of 35 (and growing) integrations. I also reviewed how to manipulate an integration and finally, how to push it to any custom app.

Does an Integration Make Sense for Your Custom App?

Throughout the discussion, I emphasized a key point: always make sure an integration is the best method for your custom app. They look pretty and can deepen FileMaker’s functionality, but the end solution may not always be worth your development efforts.

I tried to set up my library to make it very easy to implement one of these, but if you don’t know JavaScript that well, your productivity can be less than desired.

The session gave us a chance to skim the surface of this amazing possibility. If you were unable to make it, FileMaker is sharing the entire session here in a video. I hope that you found (or find) the hour engaging and informative and most of all, inspiring.

If you have any questions, please reach out to our Carafe team.

Watch the full session below:

Jeremy Brown

Jeremy Brown

Jeremy is proud to be a certified FileMaker developer. He has worked previously at a charter school network where he built the student information system used for three schools. As with many other developers, Jeremy stumbled into the world of FileMaker and has become fascinated with solving business needs in the platform.

5 Comments

  • Hi Jeremy,i integrated the calendar with my own file.Everything works perfectly,i especially would like to thank you for that.But I could not find the line of code needed for localization. Thank you in advance.

    Şemsi Saracoğlu

  • Avatar Anthony Harris says:

    Hi Jeremy
    Enjoyed your video immensely.
    IΓÇÖm developing a bed management app for my Hospital and feel that a visual display, a map if you will, would be great for the many users (active) that is expected. Are there any libraries currently for this sort of thing?
    Thanks

    • Wim Decorte Wim Decorte says:

      Hi, much will depend on how you want the map to look and what level of interaction you are after. I would start by looking at the D3 library. Also feel free to reach out community.filemaker.com and take advantage of the collective wisdom there. Many of us are active there.

  • Avatar Ivan Maesepp says:

    Hi Jeremy,

    I am trying to use the calendar integration in my solution. For a while I thought I had done something wrongh because when I put an event into the calendar it wouldn’t show. The problem was the date formatting. I was putting in an event for todays date – October 6th 2019 (6/10/2019 Aussie style) and it was showing the calendar page for June 10th 2019 (6/10/2019 US style). When I hit the “Today” button it showed up. I am new to Javascript so, I do not where to look to change the format to Aussie style. Can you please help me and tell me how to change the formatting. I would also like to change the way the dates are displayed on the title and at the top of each dfay on the calendar layout. Another important popint would be to have the calendar go to todays date in Aussie style and not US style.

    Thanks in advance.

    • Wim Decorte Wim Decorte says:

      Hi Ivan,

      We have since consolidated our JavaScript integrations into a new and easier way of integrating with FileMaker. Head to https://carafe.fm/ to download it and get started.

      Best regards,
      Wim