Teaching card windows new tricks

Practically every new release of FileMaker has that one amazing new feature. Back in May 2017 when FileMaker 16 was released, my favourite new feature was the card window.

Card windows

A card window is a clean window that is attached to the parent window from which it was created. It has none of the chrome that displays at the top of normal windows – title bar, status toolbar and editing bar. There may be a close button at the top left but this can also be removed.

A card window is modal, meaning that while it is open the user can't interact with or close the parent window behind. There is also the option to dim the parent window, thereby focusing the attention on the card window.

While the size and position can be set in the New Window script step, the card window cannot be manually moved or resized by the user. If no size or position is specified, the card window is automatically positioned in the middle of the parent window and is determined by the width and height of the layout parts.

Card windows are ideal for common UI patterns such as:

• Record creation/editing dialogs
• Pick lists
• Confirmation dialogs
• Wizards
• Settings panels

One of the big benefits of card windows is that the user can be taken into a completely different context while still referencing the context they came from.

Making card windows movable

Sometimes it may be useful to be able to move the card window out of the way so that the data in the parent window can be checked.

The solution is to use a layout script trigger called OnLayoutKeystroke. This trigger performs a script when a keystroke is entered from the keyboard.

This script trigger will be applied to the layout that is used in the card window.

The arrow keys are perhaps the most logical keys to use to move a window. Our trigger script will need to detect each of the four arrow keys and move the window in the specified direction.

We will use the Get(TriggerKeystroke) function to return the keystroke that activated the trigger. Since the arrow keys do not return printable characters, we will need to convert the trigger keystroke into a numeric code.

The codes for the arrow keys are as follows:

• 28: Left arrow
• 29: Up arrow
• 30: Right arrow
• 31: Down arrow

We can test for these codes using:

Code ( Get ( TriggerKeystroke ) )

So our script will be:

# Move card window left, right, up, or down
# Script trigger - OnLayoutKeystroke
Set Variable [ $keycode ; 
  Value: Code ( Get ( TriggerKeystroke ) ) ]
Set Variable [ $nudge ; Value: 100 ]
If [ $keycode = 28 // left arrow ]
  Move/Resize Window [ Current Window ; 
      Left: Get ( WindowLeft ) - $nudge ]
Else If [ $keycode = 29 // up arrow ]
  Move/Resize Window [ Current Window ; 
      Top: Get ( WindowTop ) - $nudge ]
Else If [ $keycode = 30 // right arrow ]
  Move/Resize Window [ Current Window ; 
      Left: Get ( WindowLeft ) + $nudge ]
Else If [ $keycode = 31 // down arrow ]
  Move/Resize Window [ Current Window ; 
      Top: Get ( WindowTop ) + $nudge ]
Else
  # do nothing
End If
Exit Script [ Text Result: 
  If ( $keycode ≥ 28 and $keycode ≤ 31; 
       False; 
       True ) 
  ]

The first variable ($keycode) captures and codes the keystroke.

The amount that the window will be moved in any direction with an arrow key is set with the $nudge variable. This makes it easy to adjust the amount if needed.

You could also consider incorporating a "power nudge" where the nudge amount is greater if a modifier key (e.g. Shift) is held down.

Each of the If statements tests the key code. If it is an arrow key, it moves the window relative to the current left or top edge.

The Exit Script step will return False if the trigger keystroke is an arrow key. Because OnLayoutKeystroke is a pre-event trigger, returning False cancels the keystroke. This helps to suppress any window scrolling or other effects that may be caused by the arrow keys.

Hidden feature

The lack of buttons for this feature can mean that users don't know (or forget) that it exists. It may be useful to add some small text to the bottom of the window:

Bonus keystroke

While we are dealing with the arrow keys, we could add an extra keystroke to the script. In a lot of interfaces the escape (Esc) key is used to close a window or dialog. The code for Esc is 27.

Simply add another Else If block to test for code 27 and script what will happen. This may be a simple Close Window, or something more complicated like reverting the record and then closing the window.