Master DataTables Series: 4.5 Adding a Button On-Click to the Table

Welcome to the multi-part video series that will teach you how to implement DataTables in your Claris FileMaker Pro solutions effectively. If you’re new to this series, we recommend starting from the introduction to maximize your learning experience. You can access the complete series here: Master DataTables with Claris FileMaker Pro.

In the previous post, we focused on adding a button to each row of your report. We learned that DataTables Builder creates this as a new column on the report that can be managed using the Column Builder and additional button settings.

In this final post of the series, we are going to look at adding a button to the entire table.  We’ll learn about the difference between adding buttons to individual rows and this option and why you would want to use one over the other.

Configuring Button Clicks

To begin adding button clicks to your DataTables report, you’ll need to access the gear icon in the Integration tab of the Builder. Choose the “Button Click” option to get started. As with row and cell clicks, you’ll be presented with integration options, but there are a few additional options we have not seen yet.

Adding a Button to the Entire Table

To enable a button click for the entire table, we still begin in the integration settings. If you toggle the button selection type from Each Row to Entire Table, you will notice that the button is removed from each row and no longer appears in the Columns Builder. Selecting the Remove Integration option also eliminates any trace of buttons previously created.

When we choose the “Entire Table” option, a new field called “Button Content” is presented. This field essentially allows you to determine what information you want to pass back to FileMaker. By default, the field is populated with the value of “button content”, but it is meant for each you to define the data you’d like to include in the button’s click event.  This could be one word, a sentence or something much more elaborate.

The Code Behind Button Clicks

The code for button clicks for the entire table is relatively straightforward. Similar to the button row option, we rely on a JavaScript function named “button_on_click.” This function handles the event when the button is clicked. It constructs a JSON object to call a FileMaker script with a few different elements, including the button content.

However, when the entire table button click is selected, there is one fundamental difference between the other integrations. The DataTables builder also inserts additional code directly into the HTML. This means that the button is inserted onto the page or Document Object Model (DOM), not within the DataTables report itself. This effectively allows you to place a button wherever you desire outside the main table.

Customizing Button Actions

The flexibility of “Button Content” allows you to convey user intentions when a button is clicked. You can define what action should be taken based on the button’s label or content. For example, you can use this feature to instruct FileMaker to add a new record, send an email, export data, or execute any other desired action.

Series Conclusion

With each series, you’ve gained insights into a range of powerful features that DataTables has to offer.  With the introduction of integrations, you have acquired the knowledge to transform your DataTables reports into dynamic tools that can enhance your FileMaker solutions.

Whether you choose to utilize cell clicks, row clicks or button clicks to your reports, you now have the power to build unique and creative solutions that meet your customer’s demands.

What’s next?

In the next series, we will delve into the art of styling and designing your reports with the CSS tab. These lessons will give you the tools to make your reports visually appealing and stylish.  We will learn how to format our report data and column headings, alter the out-of-the box default appearance of DataTables reports and even customize the appearance of the buttons we just learned how to add.

Thank you for joining me on this journey on Mastering DataTables in FileMaker.

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.