The flexibility of the Web Viewer object in FileMaker can at times be an under-utilized capability for some developers. Think about it: thanks to this handy little tool, it’s possible to build in FileMaker almost anything seen in a browser. The challenge is that it requires developers to step into a new paradigm – with different languages, resources, and communities.
It All Starts with a Web Viewer
The first, and most obvious way to leverage these libraries, is to write code in your Web Viewer (in the form of an HTML-wrapped set of instructions) and specify the library you want to use between the <script> tags. Here is a boilerplate you can copy and paste directly in your web viewer before starting any project:
<script src= ‘Library Link’></script>
To see it in action, go to Codepen or a similar website and find a project that appeals to you.
Aside: if the project you want to adopt uses pug or SCSS, don’t forget to convert blocks of code to regular HTML and CSS before copying.
Pug allows Web apps to inject data and then produce HTML. Pug (and other template engines) replace variables in a set of instructions with actual values, and then send the resulting HTML string to the browser.
SCSS (and Sass before it) are CSS pre-processors that basically allow you to more easily and dynamically create CSS for the browser.
- Always use single quotation marks inside “data:/text”
- If things are not working, the first thing we recommend is to right-click on the Web Viewer and choose “Inspect”. Most of the time, it’s just a simple typo.
- Watch for comments in Web Viewers (blocks of text that start with either “//” or “/*” – you’ll need to be sure they only use the “/*” tags.
This approach will work for small projects, but there is a better way to go:
If you want to keep everything easy to read and modify, we would recommend creating FileMaker fields for HTML, CSS, JS and then combining them together in one calculation. The result of the calculation should be “Text” and make sure to check the “Do not store” box in Storage options.
Using fields is a bit of a workaround, but it helps to keep things simple and allows you to more easily copy-paste from other (Web) code editors.What likely would be a complex bit of code in your Web Viewer can now look like this:
Next, add your boilerplate to the HTML field and reference other blocks when needed. The calculation will put everything together! If you want your app to be entirely self-contained within your FileMaker solution, copy the entire library, put it in an additional field, and add it to the calculation as well.
Once your first test integration is in place and working, it’s time to have some fun. Here is only a tiny sampling of libraries worth checking out. All of them are free and ready to use.
- FontAwesome can be used to add icons and graphics to Web Viewers
- Dragula can add drag and drop functionality to FileMaker. Their website has simple tutorials to get you started.
- D3.js brings data to life using HTML, SVG, and CSS. If you also feel like FileMaker charts are not as flexible as you want them to be, this library (along with Highcharts and Chart.js) allows you to create amazing charts using real data stored in FileMaker.
- Bootstrap will help with design and responsive layouts inside Web Viewers.
- Use Granim.js to create fluid and interactive gradients.
- Multiple.js can be used to create interactive and sleek-looking dashboards
- FullCalendar is a powerful and lightweight library for creating full-sized, fully-customizable calendars in FileMaker.
- Weather.js allows adding all kinds of real-time weather information to FileMaker apps.
And finally, it’s even possible to integrate a 3D library like three.js to create games right inside FileMaker applications. We didn’t try integrating this library just yet, but it sounds like a lot of fun, doesn’t it?