Master DataTables Series: 1.5 HTML & Previewing Your Build

by Jody Barney - Application Developer

Welcome to the multi-part video series that will teach you how to implement DataTables in your Claris FileMaker Pro solutions effectively. Whether you prefer reading, watching videos, or trying out demo files, we’ve got you covered. If you’re new to this series, we recommend starting from the introduction to get the most out of your learning experience. You can access the complete series here: Master DataTables with Claris FileMaker Pro.

In the previous post, we discussed the role columns play, how they relate to the data and their use in the DataTables Builder.

We are now ready to preview our very first report using the DataTables Builder!  We will also discuss how to share the generated HTML file with stakeholders and demonstrate how to add the report into your own solution.

Preview your Build

The final step of the builder is to preview your creation. We explore the preview tab, where you get a glimpse of the exact same thing that the end-users will see. A nice feature of the DataTables Builder is that you can quickly see a preview of any report you have built.  As we continue to go through this video series, our library of builds will increase.  Having a preview that loads quickly for each build can be extremely helpful when you are trying to locate a particular feature or style that you want to repurpose. 

Our first build contains the 40 records we loaded from the Contacts table when we added our data. All  columns from the data are visible, searchable, orderable and appear in the same order as the JSON data.

HTML & the Web Viewer

The Preview of your build uses native FileMaker.  In layout mode, you can see that we are simply using one Web Viewer named, “web”.  It references a field in the DataTables Builder for its content.  The evaluated HTML field uses the substitution function to display the settings we used on this particular build.  Remember the colored tabs we talked about in the Introduction to the DataTables Builder… you can see easily see how the substitution replaced your values into the template.  

Sharing your Build

There are several different ways to let others view your build, we look at two options to share your generated HTML.

Option 1: 

On the HTML tab select the “copy” button for the evaluated HTML.  This will put the contents of the HTML field to your clipboard. I show you an example where I open an external editing tool, like Visual Studio and paste the constructed HTML.  Saving that file allows me to share to a network drive or send it via email with any client or stakeholder.  The beauty of this method is that the user can interact with the HTML file without needing access to FileMaker, making it a convenient and versatile sharing option.  Imagine creating a custom report with the DataTables Builder and exporting the contents of the HTML using a schedule script every night.  The report is ready to be viewed by your stakeholder without having to open FileMaker – and they can interact with it!

Option 2: 

I also show you how to use FileMaker skills to display the report in another solution. In my example, I created a simple layout in a separate file.  It contains one object, a web viewer that points to a global variable.   In this situation, I simply copied the the constructed HTML from my build and pasted it to the global value in the Data Viewer.  That’s it – the report is now visible in a separate database. 

There are many different ways to incorporate your masterpiece. Think about your own developer skills and techniques to add the build into any part of your FileMaker solution.

Locking the Report

I also show you how to lock your report to prevent accidental changes once it’s been shared. Safeguard your hard work and make sure it stays intact until you receive feedback from stakeholders. Trust me on this one!

Recap of Series 1

We successfully created and shared our first build! 

We learned about the DataTables Builder included in the demo file, including how to create a report and update Report Settings to identify our builds. We also used the tool to add our data and set the default columns in order to preview the build.

The report may not seem that impressive to you yet, but keep in mind you built something that works.  We used native FileMaker to integrate and learn about DataTables.  I hope you can begin to see the power and advantages using DataTables can bring to your own solutions.  

What’s Next?

In the next video series, we will dig deeper into the settings we can modify in DataTables.  We need to understand its capabilities and limitations so you can control how the user interacts with the reports your build.  

Join the Training Series Now

Subscribe to our YouTube channel to keep up with the video training series. Comment on the YouTube videos to interact with us and share your thoughts and questions. Also, don’t forget to join our mailing list for updates on new videos and additional resources.

Please enter your contact information to download the Demo file.

This field is for validation purposes and should be left unchanged.

Leave a comment

Your email address will not be published. Required fields are marked *

Your email address will not be published. Required fields are marked *

Built with you in mind

Speak to one of our expert consultants about making sense of your data today. During
this free consultation, we'll address your questions, learn more about your business, and
make some immediate recommendations.


Stay in touch!

This field is for validation purposes and should be left unchanged.