Getting Started With FileMaker 13 Themes

This is part one of a two part series on using themes in FileMaker 13. Themes were first introduced with FileMaker 12 and provided developers with a selection of preset themes that could be used to speed up layout design. The addition of themes was an improvement over the previously available options but was still rather limiting. With FileMaker 13, new tools have been introduced to help leverage the power of themes.

The Dark Age

Before FileMaker 12, styling took a conscious effort to provide layouts with a design that helped it stand out from the typical FileMaker solution. Designing an aesthetically pleasing layout was tedious. With FileMaker 12 the addition of themes was a breath of fresh air. Solutions created in FileMaker could now quickly take on a new appearance with just a few clicks. Despite the new power of themes in FileMaker 12, there were still some limiting factors that prevented themes from being excellent:

• The selection of themes was small with limited diversity.
• Custom styling could not be saved.
• There was no way of creating or obtaining new themes.

Because of the limitations, themes were a great addition but still felt like they came up short.

The Golden Age

With the release of FileMaker 13 the features around themes have been updated with some new tools. FileMaker 13 now has the ability to:

• Select from a larger variety of default themes.
• Access more styling options through the inspector.
• Configure and copy styling for individual object states.
• Save individual object styling.
• Switch between and manage saved object styles through the inspector.
• Save the theme with all the styling modifications.
• And ultimately: create and import custom themes!

The addition of these tools means that we can finally make the most out of themes.

The Inspector: Styling

If you have used FileMaker 13 then you are most likely aware of the new themes. However, you may not be aware of the different styling options that are already configured into these themes. Lets have a look at some of the styling options that are available in the Enlightened theme. The addition of the Styling tab in the inspector allows us to view saved styles for the various layout objects and apply them. A quick way to view all the different styling options is to open the inspector to the styling tab and select the show all check box. This will list out all saved styles in the current theme. To view the styling options for a particular layout object: First select the layout object then view the styling tab in the inspector. If you deselect the show all check box you will be left with only the available styles for that type of layout object. You can quickly apply different styles by selecting the various options in the list. Try it out with the different themes and objects to see what is available. As you will find out: There are more to themes than what you see in the preview! You may have noticed that, when selected, each style has an arrow icon on the right side of the inspector. This arrow icon serves two different purposes:

• The icon changes to a red arrow when the selected object has any unsaved styling changes.
• Clicking the icon opens a menu with options to manage the style.

The style options in this menu are all fairly obvious. However, it is worth noting that you can duplicate the current style by selecting ‘save as new style’.

The Inspector: Appearance

The appearance tab of the inspector has received some changes to provide new options that go along with styles. The top section has changed to now show the current theme and current style along with a styling menu button for each. Below that are two different pop up menus with a copy and paste style button to the right for each. The second pop up menu should be familiar from FileMaker 12. This pop up menu allows you to select the state of the object that you want to change the styling for. The options on this menu include normal, hover, pressed and in focus. The top pop up menu may not be so obvious as to its function. When a normal object is selected you will only have a single option. However, when selecting a ‘special’ object such as a portal, a pop over panel or a slide control, you will have a few different options. The options on this menu allow you to select the individual components of these special objects and adjust their styling independently from each other. All the options listed on the appearance tab are configured with the current style. If you change any option on the appearance tab it will cause the style for the select object to become ‘modified’. At this point the styling menu arrow will turn red and an asterisk will appear by the style name. This is to indicate that you have unsaved changes to the current style. Click on the styling menu button to open the styling menu then click save. This will save the changes to the current style. More importantly: When you save changes to a style you are modifying the style for all objects on the layout that have that style assigned. This is one of the features of themes that is very powerful. By modifying and saving a single object’s style you can update a whole layout at once. However, if you do not want to apply the changes to all the objects on the layout you may be better to save the changes as a new style or leave the changes unsaved. Once you have saved the object style you should notice that the styling menu for the theme is now red. This is to indicate that you have unsaved changes to the theme. But wait, why didn’t the theme indicate it had unsaved changes at any point before this? This may not seem that intuitive at first but think of it this way: A theme consists of a collection of object styles. When no changes are saved to the styles, the theme is essentially unchanged. However, once you have saved a style or added a new style to the theme it is now modified. It is at this point that you can save the theme.

An important thing to note: While saving an object style will apply to all other objects on the layout with that style. Saving a theme will apply to all objects in the whole file. This is something that cannot be undone! Be sure that any changes you are saving to the theme are correct! You should receive a warning prompt when attempting to save a theme notifying you of this.

Custom Themes and Importing

When saving the theme you may have noticed that the options in the styling menu are different from those when using the menu on a style. This is where we can save our modified style as a new theme. By selecting the save as new theme option we will be presented with a prompt to name the theme. Once we have given our new theme a name it is now saved as a custom theme. We can view the custom theme by opening the change theme menu. From the change theme menu we can also import a theme from a different file. Clicking the button will open up a file picker to allow us to select a FileMaker file and then select a theme from the file. Finally, to manage the themes in the current file we can use the manage themes menu. Open the manage themes dialog by going to File->Manage->Themes on your task bar. From here we can import themes, rename custom themes, duplicate themes and delete themes from our file. This is also a handy way to see which themes you are using across your whole file.

Summary

I hope that I have given you a clear idea of what the new theme tools in FileMaker 13 are capable of. An article on the web is always useful but is no replacement for experience. Get out there and start modifying and creating themes in FileMaker! Once you’ve got some practice under your belt then come back for part two where I will be reviewing some tips and techniques on creating custom themes! Calvin Cooper is a FileMaker 13 Certified Developer at Skeleton Key. About Skeleton Key Skeleton Key helps turn complex, complicated, and outdated systems into true information platforms. Our team of consultants and developers do this by developing custom-fit software tools and reporting dashboards that help businesses find, use, and understand their data, freeing them to focus on and grow their core business. In addition to custom databases and applications, we also provide training and coaching for getting the most out of your existing systems and understanding your unruly data. Skeleton Key is an open-book management company and active player of the Great Game of Business.