Introducing the Web Viewer Integrations Library

/ By / Claris FileMaker, FileMaker Web Viewer, JavaScript, jQuery, Software Development, Web Integration

This is the first in the series of posts about the Web Viewer Integrations Library.

I seem to have developed an obsession with the web viewer in FileMaker. That fact is surprising because it was only three years ago that I knew nothing about the object. Back then, I decided that, while continuing to learn FileMaker, I’d start to learn how to do more in my custom apps with the the languages of the web. Every chance I got, I’d try to implement a Google map or a chart either into a project or in a simple demo file. At first it was painfully slow; trying to get a chart into FileMaker via the web viewer was too complex and was overkill in the time spent on the implementation. Never one to back away from a challenge, I pushed through, and eventually, it became much easier. The object became more fun to work with, and I pushed myself to try and do more with it.

I’m grateful to people here at Soliant for helping with the inspiration. My colleague Mike Duncan has written about it in his “Getting Started with Javascript and FileMaker” post, and so has Ross Johnson in his post, “Drag and Drop jQuery Interface for Exploring Records to CSV“. I’ve explored what could be done with it briefly as well. Suffice it to say, we at Soliant like the web viewer.

It occurred to me one day: why not put all of the integrations together in one library? I had put together many sample files but they were all over my computer and, in some cases, I had forgotten the password to open it up. This idea, putting all the integrations together, led me to creating the Web Viewer Integrations library, which I present to you fully open and unlocked.

My goal for the library was twofold:

  • First, the collection should gather together integrations that are useful in FileMaker and that are useful for normal solutions to use cases presented by the client.
  • Second, it needed to be standardized as much as possible and easily extracted from this file into a client app.

I set about that by scouring the internet for those integrations that are useful to FileMaker use cases: filling in an address form, charting, mapping, and so forth. I got ideas from the work I’ve done in projects as well as use cases that other people were working on. While on the hunt, I allowed myself the time to play a bit with less-useful integrations. What is contained in this library is probably 85% extremely-useful and 15% less-but-still useful.

Screenshot of the Web Integrations Menu
Web Integrations Menu

To achieve the second goal, I took up a number of best practices that have been discussed between myself and various people here at Soliant. In the next post, we’ll take a look at the way this file is set up and have a brief discussion on those best practices.

So this library, version 1.0, is the result of my scouring the internet, wrestling with the structure, and lots of testing to get these 22 integrations to work well inside a web viewer and with FileMaker data. It is free and open for you to use and to manipulate and export into your own custom app.

My hope is that anyone can learn how to use the web viewer and can bring deeper functionality into their FileMaker custom app quickly.

About the cross-platform compatibility: I built this file primarily on the mac OS. On Windows, most of the integrations work well; some are missing cool animations and such. So be aware of that. I’m looking into dealing with this compatibility issue. I hope to have an update soon.

A final note: the integrations presented in this library are the result of the work I did to find usable features for FileMaker data. All of these integrations should carefully be considered before implementing into your own custom app. Also, as I mentioned, this is version 1.0. I plan to keep adding resources to this library. Stay tuned to this blog for updates to the file, and if you have any integrations that would be great, let me know!

PS. I am extremely grateful to colleagues here at Soliant: Agnes Riley, Mike Duncan, Wim Decorte, and others for offering specific feedback on this file. My buddy David Jondreau pitched in and offered some good UX experience. And to Jan Jung. She helped get these posts up and kept reminding me to finish the accompanying videos. Her eagle eye ensured that everything looks good. Thanks all.

Get the Web Viewer Integrations Demo File

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

Next Post

These are the other blog posts and videos that go into further detail about this file and how to integrate these into your own custom apps:

24 thoughts on “Introducing the Web Viewer Integrations Library”

  1. Pingback: Soliant Consulting представила Web Viewer Integrations Library | FileMaker Team

  2. Hans Erik Hazelhorst

    Hi Jeremy,
    Thank you for this excellent work. To me, it looks extremely useful.

    Perhaps of interest to you and other readers: I use the MBS plugin from Monkey Bread Software. It is worth mentioning that, among many other functions, the WebView.getHTMLtext function allows you to retrieve the complete DOM contents in a very simple way. This is a function that should have been part of FMP for a long time, IMHO.

    Best regards
    Hans Erik

    1. Jeremy Brown

      Hi Hans
      Thanks for that information. IΓÇÖve not used those functions. IΓÇÖll check them out.
      And thanks for the feedback. I really hope it is useful to people.

  3. Josep Mª Miró

    It is sensational the work you have done, thank you very much for sharing it.
    Two of the demos that I put I would like to use them, one is MAP and the other DRAWIN CAPTURE, MAP I can integrate it without problems but DRAWIN CAPTURE does not just work well, when you press the save button almost never does it, so that it reacts You have to press the one to clean several times and the same with the one of record, has solution?
    I use your code in an application of our entity ?, we are an entity that we work with people with psychic disabilities.

    —————————————————————

    Es sensacional el trabajo que as realizado, muchas gracias por compartirlo.
    Dos de las demos que as puesto me gustaría poder utilizarlas, una es MAP y la otra DRAWIN CAPTURE, MAP lo puedo integrar sin problemas pero DRAWIN CAPTURE no acaba de funcionar bien, cuando aprietas el botón de guardar casi nunca lo hace, para que reaccione debes pulsar el de limpiar varias veces y lo mismo con el de grabar, tiene solución?
    Puedo utilizar tu código en una aplicación de nuestra entidad?, somos una entidad que trabajamos con gente discapacitada psíquica.

    1. Jeremy Brown

      Thanks for the feedback. I’m happy to share it with everyone.
      The Drawing capture should work. Are you on a Windows machine? There is an issue with some of the integrations on that platform. I’ll check it out. Also check the table that stores the drawings: go to the code view and click on “Data”. Hopefully your records are saved there.

  4. Josep Mª Miró

    In the CALENDAR application, how can we make the week start on Monday instead of Sunday?

    ———————————-

    En la aplicaci├│n CALENDAR como podemos hacer que la semana empiece en lunes en lugar de domingo?

    1. Jeremy Brown

      Check out the documentation of calendar: https://fullcalendar.io/docs/display/firstDay/
      Here you set in the options of the calendar this key and value.
      I put near the top right before the defaultDate option:
      firstDay: 1,
      defaultDate: ‘**Data2**’,
      slotDuration: ’00:15:00′,
      slotLabelInterval: ’00:30:00′,
      slotLabelFormat: ‘hh:mm’,
      eventLimit: true, // allow “more” link when too many events

  5. Pingback: WebViewer Integrations Library, Complete CS EducationΓÇô$39, Stop Procrastinating - FileMakerProGurus

  6. Eric Chiquet

    Hi Jeremy,

    I really found your file and video very useful. it’s an amazing work… giving us a lot of new possibilities and good advice. i was looking for an agenda solution based on FC and now its working with your help…thanks again…

    1. Jeremy Brown

      Hi Eric.
      Thanks for the compliment. I’m glad it is useful to you. FC is a great integration. I appreciate their hard work and how easy it was to put into FileMaker. Good luck!

  7. Josep Mª Miró Martínez

    I use it in a machine with windows, what is curious is that if the “drawing” is a straight line works well, that is to say it saves the image, but if it is more “complicated” than a simple straight does not work.

    ————————————————-

    Efectivamente lo utilizo en una maquina con windows, lo que es curioso es que si el ΓÇ£dibujoΓÇ¥ es una linea recta funciona bien, es decir que guarda la imagen, pero si es mas ΓÇ£complicadoΓÇ¥ que una simple recta no funcina.

  8. Josep Mª Miró

    I can not find where I should modify the parameters you indicate, you can help me a little more.?

    ———————————————-

    No consigo encontrar donde debo modificar los parametros que indicas, pudes ayudarme un poco mas.?

  9. Josep Mª Miró

    Please can you tell me where I can locate these parameters in order to modify them, I can not find them.
    firstDay: 1,
    defaultDate: ΓÇÿ**Data2**ΓÇÖ,
    slotDuration: ’00:15:00′,
    slotLabelInterval: ’00:30:00′,
    slotLabelFormat: ΓÇÿhh:mmΓÇÖ,
    eventLimit: true, // allow ΓÇ£moreΓÇ¥ link when too many events
    —————————————————————————————–
    Por favor puedes indicarme en qué lugar puedo localizar estos parámetros para poder modificarlos, no consigo encontrarlos.

  10. Hans Erik Hazelhorst

    Hi Jeremy,

    Thank you for the fantastic work and all the time you have invested in it.

    I tried to change the bar graph a litlle so the bars will appear stacked. This works, but in the process I also came upon yet another Javascript library, D3plus.js. This looks a little more versatile with support for treemaps and geo maps and a lot other stuff and it seems to be way easier to implement!
    There ‘s a downside: it’s much bigger with 1.1MByte.

    You can find the library at d3plus.org.

    1. Jeremy Brown

      Hello. Thanks for the compliment. I enjoyed putting the file together.
      The chart library in here other than the Google one actually uses the D3 library. That library is part of the final HTML output. I chose not to focus on D3 since it was pretty complicated; instead I used the C3 library, which seems to give us access to the D3 without getting into D3’s craziness.
      I am however, playing with the straight D3JS library and seeing what can be done with it.

      Maybe in a future version of this, some D3JS stuff will be in there.

  11. Hans Erik Hazelhorst

    Well, the d3plus actually depends on d3.js, just like c3.js. They even have a distribution that includes both libs in one binary (which may be nice to avoid any version conflicts). And as a result, d3plus also renders the graphics as SVGs.
    You’re right in that D3 in itself is complicated, but d3plus tries to isolate the user form the complex databinding, just like c3 does. But it does so with quite a bit more options.

  12. Carlos Arribas

    Hi, Jeremy,

    Thanks for your file. It is really appreciated.
    I want to upload your file with some changes into my Filemaker Server, but I can’t as the file is not protected with a password. In order to set up one, FM ask me for the previous password for “admin” user.
    Could you be kind enough to send it to me to my e-mail? (arribas.c@terra.com)

    Thanks again.
    Carlos.

  13. Carlos Arribas

    Hi Jeremy,

    Thanks again for your contirbution and the password 🙂

    Just one more question. I realized that the calendar won’t allow to set up an appointment lasting more than a day. Is this correct or am I doing something wrong?

    Thanks.
    Carlos.

  14. simplydigitalconsulting

    Hi Jeremy,

    I just downloaded the library, but it won’t work for me. I’m getting this in Script Debugger when trying to select an integration:

    Perform Script [ ΓÇ£ShowIntegrationΓÇ¥ ; Parameter: ( “{}” ; “name”;zSystem_HTML::Name; ) ]

    Is there some plug-in required?

    Thanks,
    David

    1. Jeremy Brown

      Hi David.
      Are you using FileMaker 16? I’m using the new JSON functions there. If you’re not, feel contact me at jbrown@soliantconsulting.com and I can help you out.

      You can also remove that parameter and just put the parameter: zSystem_HTML::Name. Then change the called script to use that parameter in line 11.

  15. simplydigitalconsulting

    Hi Jeremy,
    I have 16, but opened the library file with 15. Of course now I try it, it works just fine with 16! Perhaps it should be set not to open with anything less than 16?

    Anyway, thanks for the library. This is great stuff and should be really useful. Unfortunately it doesn’t help me with my immediate problem which is how to scrape the results out of a a webviewer which is looking at a WebDirect page.

    David

Comments are closed.

Scroll to Top