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
Something to say? Post a comment...
Comments
Isaac King 03/07/2015 5:24pm (9 years ago)
My Button Bar looks nothing like the one shown in your example and there are no icons installed. Running recently purchased FMPro Advanced 14.0.1. What am I doing wrong or not doing correctly?
Thanks for taking the time to school us on this topic.
Dylan 30/06/2015 8:10pm (9 years ago)
I played around a bit, it can be done by using a transparent image as a button icon.
Whenever a button is hidden, replace it with the transparent one. In that way you will always keep the same number of buttons in the bar and the width will be preserved. Downside is of course that button dividers remain visible, but you could choose not to use them.
Daniel Wood 30/06/2015 2:24pm (9 years ago)
I think John is referring to another technique of easily importing icons into your solution for use without manually adding them, I don't think it solves the issue of keeping segment widths on a button bar fixed when some are hidden. I'd be very surprised if that is possible - prove me wrong :)
Dylan 29/06/2015 8:33pm (9 years ago)
Or actually now that i think of it, i could of course show the dummy icons whenever the other ones are hidden :) I'll work on it and see how it goes.
Dylan 29/06/2015 8:31pm (9 years ago)
Thanks, so basically you use invisible icons to fill up the space? Not sure if that solves my problem though, i am hiding buttons based on the privilege set of the user, and when they are hidden the remaining ones stretch up. I don't know how the dummy icon would come in use here..
john renfrew 29/06/2015 7:22pm (9 years ago)
if you copy a button/ button bar with your own custom icon to a new file, the imported icon is added to the library.
if you then delete the button/bar the icon stays behind in the library -
so one file with all your custom icons already in buttons to copy and paste where you might need them
Daniel Wood 29/06/2015 4:10pm (9 years ago)
I'd love to know how that is possible too :)
Dylan 27/06/2015 10:25am (9 years ago)
Supposedly there is way to make the buttons have a fixed width, instead of resizing themselves to the full length of the bar. Does anyone know this trick?
James Glendinning 19/06/2015 8:04pm (10 years ago)
Good Article, the high point was definitely the icon manager from indats though - really nice UI and functionality...
Mason Stenquist 19/06/2015 11:30am (10 years ago)
Hey Daniel, I'm glad you like the Indats Icon Manager!
I was thinking of adding more icons specifically from the same http://www.flaticon.com/ website, but I wasn't sure about the legality of doing so, and making sure all authors are given proper credit etc.
Anyways great article, and thanks for all your awesome tips and tricks!
Daniel Wood 19/06/2015 9:07am (10 years ago)
thanks guys for the comments, I've updated the blog links, love that Indat icon manager very beautifully presented and love the web viewer for resizing/repositioning - magic!
LaRetta 19/06/2015 5:16am (10 years ago)
Hi Daniel,
Button text is not definable by calculation as you say but button bar is. A single segment accepts calculation and text color can be applied at will. I would love to know if there are benefits to regular button over single-segment button bar!
Another great icon resource was presented here on FMForums:
http://fmforums.com/files/file/67-indats-icon-manager/
Thank you for the great 14-series articles. I always appreciate your work! :-)
Stephen Wonfor 19/06/2015 4:07am (10 years ago)
Daniel,
As always, very interesting and thorough. Thanks.
http://www.flaticons.com points to a domain for sale. http://www.flaticon.com is what I think you meant.
Stephen
Didier Daglinckx 18/06/2015 9:08pm (10 years ago)
Thanks Daniel.
As always a clear and useful explanation.
Look at some of those posts around SVG and FileMaker : http://www.scoop.it/t/learning-filemaker?q=svg it could complement your resources.
No one has commented on this page yet.
RSS feed for comments on this page | RSS feed for all comments