Create Your Own FileMaker 14 Icons

4

In FileMaker 14 there is a new icon setting for all buttons and button bars. It enables you to insert an icon ‘into’ the button rather than have a separate image hovering over the button; like many of my own solutions used to. This is pretty cool as you don’t have to mess around aligning images with your buttons! FileMaker ‘inserts’ the icon into the button and it behaves as part of the button text. You can position the icon to the left of any text, or to the right, or just have the icon by itself. They have also given users the ability to specify the colour of this icon in normal, hover, pressed and in focus modes! FileMaker have created a decent amount of icons to play with to cover a range of topics. However, there isn’t quite enough. At least; not for me anyway!

So at first I just tried downloading a standard PNG icon from IconFinder.com and then added it to my solutions icon list. However if you use a PDF image you will not be able to change its colour. Pretty obvious when you think about it but I didn’t realise this at the time!

After looking into it a bit further FileMaker actually uses the SVG format for its icons. So I found a website that converts images to SVG format. Tip: I found that the converter works best when you convert a PNG image over any other type of image. I then tried inserting this SVG into my icon list. But i found that this STILL didn’t allow me to change the colour of the icon from within FileMaker. So I carried on digging.

I then found an article provided by FileMaker themselves, click here to view, which goes into details about the grammar used for their SVG icons in buttons. I found the below section in this article…

In an SVG image, a color can be applied to the fill property for the following SVG shape elements:  <rect>, <circle>, <ellipse>, <polygon>, and <path>. As a result, SVG image icons can be saved to FileMaker Pro themes and their appearance can be dynamically updated. To apply color to an SVG element, ensure that the fill color is not explicitly set on the element in the SVG image file.

 

FileMaker Pro adds a top-level <g class=”fm_fill”> element to the SVG image before the image is saved in the FileMaker Pro file. The fm_fill property indicates that the SVG element’s default fill color property is specified by FileMaker Pro, either by the layout theme (through the Inspector in Layout mode) or as a result of conditional formatting. Because an element’s fill property is inherited from its parent, all descendent elements of <g class=”fm_fill”> will automatically inherit the default fill color.

This got me thinking. Could you open the SVG file in the TextEdit application and simply ‘cut out’ the fill property. So, I removed the bit inside the quote marks for the fill property and left it blank. I then, for the third time, imported this into my FileMaker solution. Voilà! It worked! I was able to change the colour of the icon and set icon conditions when the user hovered over the button!

Please see below the step by step instructions to create your own FileMaker 14 icons.

 

Step By Step

  1. Find an icon that you would like to use. This can either be self created or simply download one that suits your needs! Either way; it must be a PNG file. PNG images gave the best results when converting to SVG. Also try to get a plain coloured icon which only has one fill colour. ( If you wish to download an icon rather than create one, read this previous article that shows you where to get them from. )
  2. Next, go to this website. http://image.online-convert.com/convert-to-svg.

     

  3. Upload your icon and click the ‘Convert file’ button. ( I didn’t bother changing any of the settings. )

     

  4. Once the SVG file has downloaded open it within TextEdit. ( I use a Mac; but I presume that you can do the same within NotePad on Windows computers )

     

  5. Find the section of code that shows the fill property.

     

  6. Delete the characters inside the quotations to leave the property blank.

     

  7. Now save the SVG file. ( It may be possible to make further modifications however I have not had much experience with SVG before. )
  8. Go to your FileMaker solution and upload the icon to the list of button icons. ( To do this; create a button or go to a current button and double click on it to edit it, under the list of icons there is a plus button, click on that and select the SVG file. )

     

  9. Thats it! Complete! You now have your own icon in this solution that you can edit from right within FileMaker. You can also give it action properties such as when the user hovers over the button. To do this click on the button and open the inspector panel. From there you can find the relevant settings to change the appearance of the icon.

     

 

I hope you enjoy creating your own FileMaker 14 icons!

Please Note: This article is only applicable for FileMaker 14 users. This is because of a new feature available within FileMaker 14.
Please Note: You must upload your icons into each solution individually. Icons are saved to the database file and not to the FileMaker program.

Links:

Online SVG Image Converter – http://image.online-convert.com/convert-to-svg

FileMaker Pro 14 SVG Grammar for Button Icons – https://fmhelp.filemaker.com/docs/14/en/svg/

PNG to SVG Converter – https://filemakerexamples.co.uk/resources/example-solutions/png-to-svg-converter/

SVG Icon Pack – https://filemakerexamples.co.uk/resources/svg-icon-pack/

FavoriteLoadingAdd to favorites

4 COMMENTS

    • Indeed you can and I have used that feature a lot! However the idea of this post was to show how developers can insert an icon that allows them to change its colour within FileMaker dependent on users actions; e.g. hover.

Leave a Reply