14 for 14: Setting up cool looking buttons just got easier
By Daniel Wood, 18 June 2015
Buttons that just keep getting cooler
Buttons in FileMaker 14 are cool! So cool in fact that they got their own bar (more on that in a later article). For now we'll focus on just the button object, what is new, what's the same, and what you can do to take them even further.
The new button user interface
The first thing you may notice is the button setup has dramatically changed from FileMaker 13. Gone is the modal popup dialog and procedural setup. In its place is a more stylish looking non-modal popup where you can determine specifically what aspect of the button you want to setup.
The button setup comprises of four main sections...
Button type
You can define whether the button has just a label, icon, or both. You can also define the position of the icon relative to the label. Icon options are only displayed if your button type includes an icon.
FileMaker has 140 built in icons. These icons cannot be removed or modified. You can use the slider to scale the icons in size. This is possible because button icons are scalable vector graphics (SVG) format.
When you insert your own icons you can choose to insert either png or SVG format icons. PNG format icons can be scaled (though not as well as SVG, it's just a basic resize) whereas SVG icons can not only be nicely scaled, you can make use of styling and have full control over the icons colour in a range of different states, including conditional formatting.
Also when inserting icons you can choose to insert as many icons as you want in a single operation. Icons are stored with the file. Note also that icons cannot be added to a file while that file is hosted, it must be local for icons to be able to be saved with a file for future use.
We recommend you check out http://www.flaticon.com for a huge selection of great free SVG icons you can add to your solutions.
Currently custom icons added appear in a darker grey colour which is not actually a bad thing as it allows you to distinguish between what is a custom icon and what is a native icon.
There is also another quite cool way to automatically add custom icons to your solution. If you paste any button into your solution which itself contains a custom icon not already stored with your solution, then upon pasting that icon will be added to your icon list. With this technique you can create your own icon sets by creating button bars with sets of icons associated. Simply paste them into any solution you wish to add the icons to (more on button bars later!)
Button text.
While not definable by calculation (probably for backwards compatibility) it is now so much easier to change a buttons text when a script is attached.
Prior to FileMaker 14 you would have to select the text tool before clicking a scripted button otherwise you would launch the button setup dialog. Now just double click the button and edit the text right away - no need for text tool selection. However you can still use the text tool to directly edit a buttons label if you wish to bypass the button setup popup.
While calculations are not supported, merge field and merge variables are still supported.
Button Action
Action allows you to choose one of three options: Do nothing, single step, or script While these three options are the same as FileMaker 13, the method in which you use them is different.
For a single step you use the script workspace engine to define the step, rather than selecting a single step from a list. This allows you to make use of auto-complete in scripts or show a list of steps.
The real cool feature is being able to change your single step into a script. Often buttons are defined but you realise you need a second step, or need to flesh it out a bit into a script. You can now do this direct from button setup by clicking the "Convert to Script" button:
When you do this you are prompted to enter the script name. Upon clicking OK the dialog will change to that of an actual script, and the new script is placed in a created folder called "Scripts for Buttons"
Button Options
At this stage the only button options are to show a hand cursor over a button. It seems a little odd for there to be only one option under options, and even more odd you have to expand this area by default in order to set the option - but maybe they are anticipating more options in future who knows!
Example File
To supplement this article we have provided a demo file in which you can see how buttons can be setup, and how custom SVG icons can be added and used in a solution. The demo file includes over 400 custom icons already added to button setup to demonstrate. All custom icons are from the freeicons.com website, and we have included a sample set with the file.
Click here to download the demo file.
Further Resources
SVG Helper Tool from Richard Carlton Consulting