How to create Groovy Dialog Boxes in FileMaker 16

Lets face it, FileMaker’s ‘Show Custom Dialog’ script step is not very attractive let alone customisable.

Yes you can customise the text that appears on the dialog box such as title, message and button names – but you cannot customise the look and feel and you certainly cannot customise it to match your solution’s theme.

With FileMaker 16, you can now have Groovy Dialog boxes that look like this:

And you can finally get rid of boring dialog boxes that look like this:

Oh, and did you notice anything different about the Groovy Dialog box above?

It’s got 4 buttons instead of being limited to just 3. Actually you can add as many buttons as you like, but 4 is plenty in my opinion.

How easy is it to display Groovy Dialogs?

Easy! Very easy!

Instead of using the ‘Show Custom Dialog’ script step, you use the following Perform Script step:

Perform Script ["Groovy Dialog", "Title|Message|Button1|Button2|Button3|Button4"]

That’s it – pretty easy right?

Lets build it together …

There are several parts to this – a layout, a custom function and 2 scripts. But they are relatively easy to set up and follow along, but if you’re strapped for time, feel free to checkout the demo files at the end of this post.

Ok, so lets get started …

Designing the layout

First of all, I created a new layout called “Groovy Dialog” and designed how I wanted it to look. I Added text objects for Title and Message and 4 buttons. I also added a horizontal rule between the title and message.

Then I specified the merge variables for each of the objects. I choose to go with $Title, $Message, $Button1, $Button2, $Button3 and $Button4. If you’re not familiar with merge variables, they allow us to display temporary data on a layout. Check out FileMaker help documentation for more info.

Next, I specified that Buttons 2, 3 and 4 should be hidden when their variables are empty. This basically allows the buttons to be optional – so if you don’t specify Button 3 and 4, the dialog will only show 2 buttons (Button 1 and Button 2).

To hide the buttons, you will need to set the ‘Hide object when’ property within the Inspector for each of the buttons:

Just remember to set the right variable for the right button:

Button 2:

IsEmpty($Button2)

Button 3:

IsEmpty($Button3)

Button 4:

IsEmpty($Button4)

Note: I didn’t set Button 1 to hide as there is no need to hide the default button as there will always be at least 1 button shown on the dialog.

The button script

At the last step, I created a layout for the dialog box but I never set any scripts for the 4 buttons.

For this, I simply created a script called “Button” with a single script step as follows:

Set Variable [$$ButtonResult; Get(ScriptParameter)]

When the user clicks one of the 4 buttons on the dialog box, the script ‘Button’ is called and each button passes a parameter of either 1, 2, 3 or 4 to allow us to identify which button was actually clicked. I.e. did the user click on button 1 or button 2?

The script then sets a global variable called $$ButtonResult with the button number that was clicked.

Later in your script you can use the $$ButtonResult global variable to determine which button the user clicked – think of this as a replacement for Get(LastMessageChoice).

Setting up the buttons

Now it’s time to set up the 4 buttons on the dialog layout.

For each button, I assign the ‘Perform Script’ action calling the script ‘Button’ that I created at the last step.

However, the for each button, I specify a different script parameter as follows:

For Button 1 I pass 1 as the parameter, for button 2 I pass 2 as the parameter and so on.

I also set up the button to ‘Resume Current Script’ and also check ‘Change cursor to hand over button’.

The ‘Resume Current Script’ simply allows the paused script to continue to run, whereas the ‘Change cursor to hand over button’ changes the mouse pointer into a hand whenever it hovers over the button.

Adding a Custom Function

At the start of this post I showed how easy it was to display a Groovy Dialog, i.e. via a single ‘Perform Script’ command.

The script that displays the Groovy Dialogs takes multiple parameters, i.e. Title, Message, Button1, Button2 etc.

However, unfortunately FileMaker scripts can only take a single script parameter whereas we need to pass multiple.

FileMaker Developers have come up with many creative ways to pass multiple script parameters – however the method I prefer to use is to seperate each parameter with a pipe command ( “|” ).

I have created a Custom Function which I use for this purpose – however I’m not going to get into detail about how it works other than say that it lets you pass multiple script parameters and parse them on the other end.

Here’s the Custom Function I use:

//Name: GetScriptParameter
//Parameters: Number
Let (
	string = Substitute ( Get ( ScriptParameter ) ; ["¶" ; "xxRETURNxx"]; ["|"; "¶"] );
	Substitute(GetValue ( string ; Number ); "xxRETURNxx"; "¶")
)

The Groovy Dialog Script

Once the custom function is set up, I created a new script called ‘Groovy Dialog’. This script takes multiple parameters and is the script you need to call in order to display a Groovy Dialog box.

This is how I set up my script:

Set Variable [ $Title; GetScriptParameter(1) ]
Set Variable [ $Message; GetScriptParameter(2) ]
Set Variable [ $Button1; GetScriptParameter(3) ]
Set Variable [ $Button2; GetScriptParameter(4) ]
Set Variable [ $Button3; GetScriptParameter(5) ]
Set Variable [ $Button4; GetScriptParameter(6) ]
New Window [ Style: Card; Using Layout: "Groovy Dialog" ]
Set Variable [ $$Button Result; 1 ]
Pause / Resume Script [ Indefinitely ]
Close Window [Current Window]

All these script steps above are self explanatory – except the New Window script step which I have set up as follows:

I set the Window Style to ‘Card’ which uses the new ‘Card’ window in FileMaker 16.

I also unchecked the option ‘Close’ which removes the ‘X’ close button that FileMaker adds to the card window by default. I got rid of this button as there was no way to resume the paused script if the user were to hit the ‘X’ button – this meant that once the dialog box was closed, the script remained in a paused state. So removing the close button was the easiest thing I could think of.

Explaining how the Groovy dialog Script works

First we load all the variables i.e. $Title, $Message, $Button1 etc. from script parameters. However as mentioned earlier, FileMaker doesn’t handle multiple parameters so instead I’m using a Custom Function called ‘GetScriptParameter’ to parses the parameters.

Next you will see a New Window script step. Here, a new card window is displayed the user.

Following this, I set a global variable called $$ButtonResult to 1. The global variable is used within your scripts in place of Get(LastMessageChoice) to identify which button the user clicked. If the user hits their Return or Enter key instead of one of the 4 buttons, then it’s assumed the user hit the default button hence why $$ButtonResult is set to 1 here.

Then we pause the script – this is so that we can wait for the user to click on one of the 4 buttons. Card windows are already modal and normally don’t need pausing. But since this can be used within other scripts we need a way to pause and wait for user input – especially if they hit the Enter key.

And finally, we close the card window.

Too long, I just want to copy and paste

If you just want to copy and paste this into your own solution here are the steps:

1. Download the demo files.
2. Copy the Custom Function from the demo file over to your own solution.
3. Copy the scripts from the demo file over to your own solution.
4. Create a new blank layout in your solution called ‘Groovy Dialog’.
5. Remove the layout’s header and footer.
6. Copy the contents of the Groovy Dialog layout from the demo file over to your solution.
7. Edit the ‘Groovy Dialog’ script within your solution and set the ‘New Window’ step to use the ‘Groovy Dialog’ layout.

Thats it – you’re ready to groove!

Download Demo

You can download the demo file here: Groovy Dialogs