Master DataTables Series: 5.4 CSS Column Formatting – Render Functions

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 learned how to style our table data with CSS classes using the Column Builder’s new styling section.

In this post, we will expand our styling capabilities by adding Render Functions to our data.  We will utilize both the Columns Builder’s new ‘Render’ ability and illustrate how to add code to the JS Function tab of the DataTables Builder.

Data Rendering

In FileMaker, we have several ways to display data to our users.  We can create calculated fields, show related table data, change the default format with our layout tools in the Inspector, etc.  However, our data set is finite in DataTables, so we need to understand how to manipulate what we have to get what we want.  The transformation of the original data into the value that will be shown in the DataTable is called rendering.

Examples of rendering may include displaying timestamps into a human readable format , combining data points such as first and last names or calculating totals from the raw data supplied.

In the DataTables Builder, we can add data rendering in both the Columns Builder or in the JS Function Tab.  We will take a look at each option and why you may want to choose one over the other.

Using the Columns Builder to Render Data

Typically, we would use the Columns Builder when we simply want to point to that column’s original data and change its appearance. 

Examples: 

• We have a Date column in our data set and we wish to display it with a specific format (MM-DD-YYYY )
• We have one or more Phone Number columns in our data set and we wish to display them in a localized format with area code in parenthesis  (555)-555-5555
• We have firstName and lastName columns in our data set and we want to create a new column that will concatenate them into a full name display ( Barney, Jody or Jody Barney )

Using the JS Function Tab to Render Data

The JS Function tab of the DataTables Builder can also be used to render our data.  It can be useful when we want to apply the same rendered style to several columns.  Besides being used as a function to transform data it can also be used to select data from a different table object and use that for it’s returned result.

Examples: 

• We have several numeric values in our data set and we wish for all of them to have the same currency format applied.  ( $1,234.56 or -1235.00 )
• We can compute new columns that will use existing numeric values in our data set to calculate percentages, totals, averages and display them with the appropriate formatting.  ( 36.4%, $340K, 88.3 inches ) 

Tools, Tips & Tricks

Let’s jump into a practical demonstration to solidify an understanding of our options. In the demo, we’ll showcase the Column Builder’s render feature as a tool to format phone number and explore concatenation.  We will then shift gears and illustrate how we use the JS Function tab to add a new setting utilizing columnDefs [].  Here we will provide examples on formatting dates, numbers, and another column concatenation option.

There are some key points to take away from this lesson, especially regarding how we work in the JS Function tab.  Unlike the Columns Builder where we know exactly the data we are manipulating because the UI controls this for you, we have to tell the render function what to manipulate.

The column definitions or columnDef [] settings require that we identify columns by targets.  Simply put, targets are the index # of the column data. You need to be cautious with indexing, especially when rearranging columns.  If the order of you columns are updated in the Columns Builder, but you have not modified their index references, you should expect problems.  We will cover examples of this in the demo so you can easily see how and where to fix this type of issue if it should arise.

What’s next?

In the next post, we’ll add some finishing touches, including icons, images and buttons, to make your DataTables even more engaging.  As an added bonus, we will showcase some advanced features that will improve your user’s experience and expand your knowledge of what is possible with DataTables!

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.