Today I want to share with you a technique I use for storing and loading button images across my FileMaker database solution. While I’ve used this technique since in FileMaker 11, its become even more powerful with the padding and outer glow features of FileMaker Pro 13. This technique has a few moving parts to setup, but once created it is very easy to add support for additional buttons. Download the attached sample file or create your own solution.
Since global fields are accessible to any layout without having a relationship to the table occurrence the layout is based on, they are excellent for displaying interface elements. Global fields, including global container fields, will retain the value they have at the last time the file was closed when open locally. But when the file is hosted by FileMaker Server, any data you enter in a global field is not retained.
Create a table where you will store all the interface elements. I call it Resource. Then create a global field named z_Load_Globals_Trigger_g. It’s purpose will be revealed shortly.
This technique involves creating a pair of fields for each button. The first is a standard container field and named something like btn_New. It’s global counterpart is named the same with the addition of the suffix _g, so would be btn_New_g for this example.
Then add this auto enter calculation to the global field:
// Get value of field with same name, minus the _g suffix Let ( [ gName = GetFieldName ( Self ) ; fieldName = Left ( gName ; Length ( gName ) - 2 ) ] ; Evaluate ( fieldName ; z_Load_Globals_Trigger_g ) )
The above function looks at its own name and removes the _g suffix to determine the field value to load. This function does not need to change with each new button. Simply duplicate a button field and its global equivilant and change their names.
The final piece is to create a script that will run when the file opens. The script just needs these few lines of code:
Go to Layout ["Resources" (Resources)] Set Field [Resource::z_Load_Globals_Trigger_g; 1]
That’s it. I use png files that have a transparent background. The button’s graduated fill and border comes from the field’s styling. The field uses rounded corners to create a circular field. They even have Hover, Pressed, and In Focus states. And of course, the fields data observes the new field padding settings, so you can easily control the amount of whitespace between the icon and the boarder.
Download the sample file here: