When, last month, I finally got around to posting the updated session materials, true to form, I found lots more to improve in my FileMaker integration design work. With one notable exception, I resisted the temptation to tweak things further. That exception addressed a deficiency in the booking interface for Lee Real Estate that I discussed in my talk but hadn’t solved completely. Since you won’t see this final change in my session video, I’d like to take a moment here to share it with you.
A Simple Visual Abstraction
This interface shows a specific property and its bookings for a six months. A list of the bookings appears on the left-hand side of the interface; a 6-month calendar appears on the right, with the bookings color-coded.
In the course of the presentation, I observed that there was no clear visual connection between the list of bookings on the left and the calendar on the right. I wanted users to be able to look at a booking listed on the left, and then be able to glance over to the calendar on the right and spot the same booking more easily. To that end, I added a button to the list which caused the same time period to be selected in the calendar (see below, selection shown in green).
While posting the materials, I realized that in each row of the list, I could provide a simple representation of the six-month calendar for the property in question. Any month containing at least one day of the booking would appear as “booked” (or greyed out if the property owner marked it as unavailable). This would provide the direct visual relationship I sought.
Here’s What I Did
I wanted to have six squares corresponding to the six months displayed on the calendar. I decided to use text rather than graphic objects because I thought this would render more quickly. (Please feel free to comment if you disagree).
I found extended ASCII characters for a filled box and an open box. This application is used only on macOS, so I felt reasonably safe taking this approach. I used a filled box for any month where a given reservation appears, and the open box for those months where the reservation does not appear.
⬛︎ = U+2B1B or Char(6503811035) ⬜︎ = U+2B1C or Char(6503811036)
In the first row of the booking portal, you see one filled square and five open ones:
I color-coded the text to match the two kinds of reservations shown on the calendar: blue for the bookings made by the vacation rental company and gray for the dates blocked by the owners for other purposes.
RGB(154;154;154) //the gray used by the calendar RGB (111;111;207) //the blue used by the calendar
Next, I checked whether the reservation appeared in a given month. I created a custom function for this. It checks four different possible relationships between the reservation dates and the month in question. I decided it was more efficient to store the monthFirstDay and monthLastDay as global fields and pass them as parameters, rather than to recalculate them each time the function is called:
If ( startDate <= monthFirstDay and StopDate >= monthLastDay or startDate <= monthFirstDay and stopDate >= monthFirstDay or startDate <= monthLastDay and stopDate >= monthLastDay or startDate >= monthFirstDay and stopDate <= monthLastDay; "⬛︎";"⬜︎" // Filled square if the reservation appears in the month, open square otherwise )
Here is the resulting unstored calculation which returns the special text object. It’s somewhat expensive in terms of performance, but the portal in question typically has only 4-8 rows.
Let ( [ @textColor = If ( TenantLast = "Other";RGB(154;154;154); RGB (111;111;207) ); // "Other" (i.e. owner-blocked) leases are gray while bookings are blue @squareSet = _BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u ; GLB__Globals::Date_month_lastDay_u ) & _BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u ; GLB__Globals::Date_month_lastDay_u ) & _BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u ; GLB__Globals::Date_month_lastDay_u ) & ¶ & _BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u ; GLB__Globals::Date_month_lastDay_u ) & _BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u ; GLB__Globals::Date_month_lastDay_u ) & _BookedLeaseSquare ( StartDate ; StopDate ; GLB__Globals::Date_month_firstDay_u ; GLB__Globals::Date_month_lastDay_u ) ]; TextColor(@squareSet; @textColor ) )
Finally, I simply included this calculated field in each portal row as follows:
Do You Have FileMaker Interface Design Suggestions?
I’m pleased with the clear relationship this establishes between the booking portal and the calendar. Do you have any other suggestions for ways to help the user see the connection between these two things? How about ideas for improving the efficiency of the code that I put together? I look forward to hearing your ideas on improved FileMaker interface design.
Next Steps for Your FileMaker Solution
Are you looking for an objective review of your FileMaker system’s interface? My team and I can give it a look and make suggestions for improvement. Contact our team to get started.
We encourage you to visit their site and to inquire about their services. FMT is proud to deliver and promote FileMaker for Small Business Owners Worldwide since 1997. Our Forum The Original FileMaker Forum has 45,700+ members.