New interface elements in FileMaker 14

As FileMaker 14 was released, developers have a lot of new tools at their disposal. Since version 12 a lot of great improvements regarding the interface have been released. New objects such as popover-buttons or slide-controls, for example, but also the implementation of themes and styles create new opportunities.

There are two new elements in FileMaker 14 we are going to look into today. At first they may not seem very ground breaking, but will be used more commonly than one might expect. That is why we will guide you through them in this blog.

The Navigation Part

Part Definition

Within every layout you can use up to two navigation parts: one on top of it, one at the bottom. A navigation part is always on the top or bottom of the window and always stays visible. This means as u scroll through a long layout, these parts stay visible. Navigation parts always take the entire width of the window. This is something to keep in mind: if your layout doesn’t stretch and is 400 points wide, but your window is 600 points wide, the navigation part will exceed the layout and be 600 points wide.

The Button Bar

The button bar is a series of buttons combined into one object. The advantage lies in the ease of creating and maintaining a series of buttons and a consistent management of the styling. But these buttons also bring a lot of new possibilities.

The included example file shows several possibilities for the button bar, including the new options. So let’s dive into them.

Button Bar Options

If you place a button bar on a layout, you can use it as a vertical or horizontal bar. You can use as many button bars on a layout as you wish. For instance, a main menu can be placed on the top navigation part and a vertical submenu on the body of your layout. A button bar has four major elements: the button bar, dividers, the segments, and the icons. You can find these elements also in the appearance tab of the inspector for styling the bar.

Button Bar Parts

We will get back to the styling later, but first let’s set up a button bar. For each button you can define the type of label you want to use. Since FileMaker 14 there are also icons available in buttons. FileMaker comes standard with a set of icons, but you can add your own as well. And, as you will see in a moment, you can style these icons as you wish.

Your label can be just plain text, an icon only, or the combination of both in which you can decide to put the icon above, below, left or right of your text. Next you can choose to which button is active on entering the layout. For instance, if you have a layout called “Clients”, you can activate the button “Clients” as active to show the user his current context. Do pay attention: the button stays active until another button is clicked in the same button bar and takes over the active state.

New for button labels are calculations, something developers are craving for for a long time. Instead of using global variables or fields, you can simply use a calculation.

Calculated Button Bar Label

The button bar “navigation” is similar to the one found in the slide control. It allows you to navigate trough the bar and add or delete buttons. Also handy is the possibility to convert a button into a popover button. The popover button was introduced in FileMaker 13 and surely has proved itself already. Developers use it for small things like action menus, category pickers, showing or hiding extra portals, … This can be convenient for the button bar as well. A submenu as a second level of a main menu, for example. This can also be a button bar, or if you take a slide control, you can go even further and add extra levels. You might add a submenu with an extra search level or a simple new record input screen.

Button Bar Submenu

Be careful however: if you impement slidecontrols to create extra levels, make sure the user knows where he is within the hierarchy of the menu. Users rely on this as they do in menus within their OS, website, …

Also convenient is the possibility to change your normal button into a popover button without having to delete the object and create a new one, like you would have to do with normal buttons.

Finally, you have to set the action. You can attach an action to each button. Like with normal buttons you can add  a single script step or a complete script. Even more handy is how you can turn a single script step into a script without much fuzz. It just let’s you build your script starting with your first single script step. For popover buttons the script triggers are set in the same options.

Styling

New layout objects require some attention for the styling of them. The button bar is a complex set of items. After introducing themes and styling in FileMaker 13 it became easier to comprehend the structure of objects in layouts.

 /></p>
<p>First, we have the button bar as a whole. For this you can define the outer borders and the autosizing of the buttonbar. Next, we have the dividers that separate buttons, but do not define the outside borders of the button bar. Both the button bar and the dividers have only one state: normal.</p>
<p>The third element is the button segment, the individual button. These have five states: active, inactive, hover, pressed and focused. You can define their background color and the text label, but this is applied to all the buttons. It is not possible to define the buttons separately. You can however, set conditonal formatting on each button, for instance on buttons that need extra attention. Each button can also be hidden with the “Hide object when …”. This does not leave a gap in the button bar but resizes all the buttons to full the entire button bar.</p>
<p>Finally, we have the icon. Icons can be styled separately. FileMaker advises to use SVG files (Scalable Vector Graphics) for icons. By doing so, icons stay sharp and you can define the background colour easily.</p>
<p>In the example file we have some examples that show you new possibilities of the button bar and navigation part:</p>
<h3>Task Bar</h3>
<p>A task bar gives the user easy access to frequently used actions. Things like new records, printing labels, show reports, … can be placed below the main menu, as is often used in a OS.<br />
<img style=

Click to download the example file.