Auto Colour Swatches using FileMaker Pro & Scriptmaster Plugin

The recent release of version 4 of the ScriptMaster plugin from 360 Works prompted me to share a technique that I have used several times in solutions.

Whilst there are a number of ways to achieve the result I’m about to show you, I think that a key part of this post is the use of plugins in general, as well as the result we will end up with here.

Plugins and Beginners

Plugins for a lot of beginners are a moot point. It sometimes impresses me the lengths that people will go to in a bid to avoid installing, learning and applying a plugin to their solution. Effectively trebling the time it would have taken to achieve a far better result by simply rolling up ones sleeves and attempting some learning.

There is no shortcut to learning

FileMaker Pro, like any software or development environment, is never going to reveal itself to you willingly. You have to peel back the layers, being instrumental in understanding what each layer, element and attribute does – and why it does it.

There are no shortcuts. Ultimately, shortcuts turn into rework at some point down the line when we carelessly add stuff (like plugins) without knowing the meaning and technology behind them. So whilst I will be showing you how to achieve just one particular task using a plugin, I urge you to find out more on your own, and understand how this is possible – I’ll leave that for you.

Colour tags, swatches and styles

Ok, so sometimes we need to assign colour tags, or swatches, or just generally select colours for styling objects within our solutions. Depending on your personal preference, you may do this frequently or not so frequently. But, I assure you that you will need to do this at some point in your solution.

We can of course hard code these colours into our solutions, there are a number of ways to achieve that. We will cover those in a later post. The reason I want to show this method first is that I would always urge you to think about doing anything in FileMaker as dynamically as possible first up, and hard-coded a last option, when all other avenues lead nowhere. This applies to every aspect of FileMaker Pro, not just plugins and styling, but scripting, calculations, value lists and so on.

Think dynamically by instinct

The foremost reason that you should go the dynamic route (or as dynamic as is achievable) is that it is so much more portable and transplantable across solutions, easily making your solutions quickly come to life in an almost modular way. You will eventually start to think instinctively dynamic, by this I mean that your first thought will be: How can I build this so that no code modification is required and yet make “it” infinitely selectable/extendible/operable? Whatever “it” is.

Make sure you have the 360Works ScriptMaster Plugin installed before you attempt this, naturally it wouldn’t be possible without it anyway, but load it before you start up FileMaker Pro so you won’t have to quit after you’ve started. Simply download the plugin, which is free, and install it into your FileMaker Pro Extensions folder wherever FileMaker Pro is installed on your machine.

Sample File

When you do this in your own solution you will need to write a short script, or copy across the script from the sample file:

NOTE: AFTER YOU INSTALL THE SCRIPTMASTER PLUGIN YOU MUST FIRST RESTART FILEMAKER BEFORE OPENING THE DEMO FILE

This Open Script loads the required modules into the plugin. This is one of the things you can explore more later on.

Basically, the script uses the gradient image drawing module in the plugin. Except, we are making an image where both colours are the same to get a solid colour. If you wanted to make yours a gradient image, you could extend the script to calculate a companion colour for the second colour (here is a great article on colours) or simply ask the user to select two colours by duplicating the colour selection part of the script. For today, we are not going to do that – and I personally don’t do that ever anyway.

Adding & Changing Colours

In the file you can click on the pencil icon to edit the colour for any row in the swatches portal, or create a new portal record and add a colour. Try changing a couple of the colours and then watch the various objects and records on the layout update to the new colour that you have chosen.

I have included a variety of examples in the layout, maybe you will only use one or two of them in reality. There is the portal method using the container field which holds the automatically created image swatch. There is a couple of examples of field highlighting and warnings – just purely as examples. There is also an example of using a webviewer as a tab mask which will then display a status colour. You could extend this to display any colour based on any status or calculation within your FileMaker solution.

There is also a webviewer using the colours to style the status field background, this is done by calculating the rgb colours, and also the hex colours. Browsers these days work equally well with the rgb, and the rgba colour pallette, but I guess I’m just old fashioned and I like Hex colours for most things web (although I think with HTML5 I might change my mind).

Like most sample files, you will need to figure out how to apply this to your own solution and how you want to deploy it, feel free to ask any questions in the comments.

So there you have it. It’s a nice little technique and if you have a solution where a lot of colours are required then it does make life easier than hard-coding everything, and I also prefer this to conditional formatting in some instances, although not all.

Enjoy, and leave a comment below.

No related posts.

Tagged as: Colours, FileMaker Basics, FileMaker Development, Icons, Using FileMaker Plugins, Webviewer