Master DataTables Series: 5.5 CSS – Formatting with Graphics

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 explored both the Columns Builder and JS Function approaches to rendering our data. From formatting dates to applying currency styles, you now possess the knowledge to enhance the visual appeal of your DataTables reports.

In this post, we focus on adding graphics, buttons, icons, and advanced styling to create a polished and exportable report for our end users.  There are four videos included in this lesson of the series. Each video expands on the prior, showcasing new techniques and customizations along the way.

Part 1 – Cosmetic Updates

This lesson sets the framework for our final report. We will re-arrange our columns in the Columns Builder and address the challenges related to the hard-coded target/index references in our columnDefs[] in the JS Function tab.

We also introduce a new text-wrap class and its affect on our report and how we continuously make adjustments to our custom class settings and columns to make everything come together.

The concept of variables is introduced and we showcase how to implement this feature when we implement alternating row colors for better visual distinction and illustrate the use of transparency levels.

Finally, we re-install a library and update some existing DataTables settings to ensure that our table column header is fixed when we scroll through records on our report.

Part 2 – Buttons & Column Visibility

The next part of this lesson will re-introduce the concept of buttons that we first learned about in our series on integrations.  However, this time we introduce a specific type of button extension, “colvis” which is used to control what columns we make visible to the end user.  We will add the required libraries and illustrate how to include a button extension to your report.

We also practice what we learned in the our previous lessons in this series. Five new columns are added to our report ( Qtr and Year Totals ) by using render functions in our Columns Builder to summarize our existing data.  We also apply classes to these new columns and reference them by target/index in the columnDef[] section of our code.

Finally in part 2 of this video, we merge these two concepts and demonstrate how we can add more functionality to our reports.  By leveraging Bootstrap’s button styles, we assigned unique classes to each button to showcase how we can modify their appearance.  

With these enhancements, our DataTables report is now not only functional but visually appealing. Users can easily navigate and analyze data for specific quarters or the entire year.

Part 3 – Grouping Buttons, Icons & Conditional Formatting

To enhance the user interface, we’ll start by collapsing a group of buttons into a nested button with a dropdown visualization. This can be achieved by wrapping the existing buttons in another button. The demo will illustrate how to do this and the effects making this change has on our previous styling.

This go around, we introduce a custom class for our new button group to showcase that we can control its appearance as easily as we did when referencing the native Bootstrap 5 styles in the prior video.

We continue be adding two additional button groups to our report.  The first features another dropdown list of options a user can pick with specific button actions upon each selection.  The second demonstrates how we can add an icon as the button’s appearance and action step.

Finally, we make a use case for conditional formatting. We create a render function to dynamically change the color of our month totals and remove the negative sign based on the value in the cell.  We also showcase how to modify a non-visible column’s data to display a currency icon and have that icon perform like a button and take an action when clicked. 

The concept of ‘defaultContent’ is discussed and applied in order to resolve errors that occur when DataTables cannot evaluate a rendered function.

Part 4 – Final Touches & Custom Export

In the final video of this lesson and series, we focus on adding features to enhance the report’s appearance and provide our stakeholders with the ability to control what specific data they can copy/export.

We cover the implementation of select row functionality and row grouping by adding their respective libraries and modifying the settings required to use them in our code.  In addition, we will demonstrate how we can set the default sort order of our column data.  This combination provides our end-users with an intuitive and appealing visualization of the data.

As an added customization, we will demonstrate how to include the concept of a ‘toolbar’ in DataTables.  We will add an image or logo to this section of our report and apply a custom button action when clicked.

Finally, we will demonstrate how to combine the use of the search input, our grouped button visibility options and the row select to copy values visible on the report and paste them into an external application, such as Excel.  We will explore how conditional formatting affects our copied results and the importance of the column visibility and title settings when using the HTML5 button extension.

That’s a Wrap!

Congratulations on completing this DataTables Styling and Rendering series!  We learned a lot of different concepts along the way.  We’ve adding CSS classes, render functions, buttons and button groups, conditional formatting, icons and images, and introduced some advanced features for displaying our data and allowing it to be copied. 

I encourage all of you to experiment with the various features we covered and expand on your own to enhance your solutions to meet each customer’s requirements. I hope this comprehensive guide has equipped you with valuable skills and insights to do just that.

What’s next?

While I have no formal plans to create additional videos for the Master DataTables in Claris FileMaker Pro series, I may occasionally add content to highlight advanced topics or insights I learn about in my own journey.

If you have specific content requests that you would like me to add to this series, please reach out by email, linkedIn or find me on FM SLUG (slack).

Thank you for joining me and best of luck in your development journey!

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.