2.3 Creating interactive user interfaces
A well-designed interactive user interface is critical to the usability and efficiency of a FileMaker database application. In this tutorial, we will focus on how to create interactive elements such as navigation items (menus and buttons), custom dialogs, and popovers to enhance the user experience in your database. Additionally, we will cover some proven tips for improving the usability of your user interfaces.
Table of contents
- 2.3 Creating interactive user interfaces
Before you start creating navigation elements, it is important to think about how you want users to navigate through your application. Think about which layouts or functions are frequently used and how you can make accessing them as easy as possible.
- Main navigation menuConsider whether it makes sense to have a central navigation menu that is visible on every page. This menu could contain links to the most important areas of the application, such as "Home page", "Customers", "Orders" and "Reports".
- Contextual navigationThink about adding contextual navigation elements that change depending on the layout or the current data. For example, you could add buttons that only appear when certain conditions are met, such as displaying an "Edit" button only for existing records.
Step 2: Create buttons
Buttons are an essential element of any user interface and allow users to perform certain actions, such as opening a different layout, executing a script or saving data.
- Add button: Switch to layout mode and select the Key tool in the top toolbar. Click in the layout area to add a button.
- Label buttonGive the button a clear and understandable label, such as "Save", "Delete" or "Next". The label should be short and meaningful.
- Assign action: In the dialog for the button under Action you can assign a specific action to the button, such as executing a script, switching to a different layout or executing a user-defined function. These actions are executed when the user clicks the button.
- Button stylingUse the inspector to customize the appearance of the button. You can change colors, fonts and margins to integrate the button into the overall look of the layout.
Step 3: Create menus
Menus provide a structured and easily accessible way of offering users various options or functions.
- Create drop-down menuSelect the desired field with the mouse and switch to the last tab in the inspector. In the "Control style" area, use the Pop-up menu or Fade-in list to create a menu. Under "Values of", select a list of values to be displayed for selection.
- Define menu itemsDefine the menu items as a value list under [File > Define > Value lists]. A value list can contain static values or values from fields or related fields. gFM-Business often uses dynamic value lists with the "MagicValueList" function. In this case, "MagicValueList" is specified as the value list and a script trigger is assigned to the field (on entry), which creates the value list dynamically using the [MagicValueList] function. A value list assigned in this way does not have to be predefined as a value list in FileMaker.
- Assign menu actionsEach menu item can trigger an action, similar to buttons. Use script triggers to specify whether something should happen when a user selects a menu item.
Once you have created your navigation elements, test the navigation from the user's perspective. Check that all links and buttons work correctly and that the navigation is intuitive and fluid.
The menu items of the navigation and the main menu in the gFM-Business ERP software do not have to be customized individually on the layouts, but are predefined in the developer module "Administration" under the tabs [Navigation] and [Main menu]. For the developer, this has the advantage that all navigation elements are identical on all screens and can simply be copied from an existing layout. The Professional version also supports multilingual main menus and navigations.
User-defined dialogs and popovers
Custom dialogs and popovers are interactive elements that display additional information or require input from the user without leaving the current layout.
Step 1: Create user-defined dialogs
Custom dialogs are pop-up windows that you can use to display messages to the user or request input.
- Create scriptTo display a user-defined dialog, you must create a script. In the menu under [Scripts], go to the script workspace (Cmd/Ctrl+Shift+S) and click on New script.
- Define dialogs: Use the command Display your own dialog box in the script to create the dialog. You can define the title, text message and up to three buttons.
- Add input fieldsYou can add up to three input fields in which users can enter data. These fields can be used to enter values that are then processed further in the script.
- Actions based on user inputUse conditional statements (If statements) in the script to perform different actions based on the user's input or the selected button.
Step 2: Create popovers
Popovers are small windows that appear when the user clicks on an element and display additional information or input fields. They are particularly useful for making complex user interfaces clearer.
- Add popoverSelect the "Popover button" item in the button tool in the top toolbar and click in the layout to add a popover button. A popover button looks like a normal button, but opens a popover window when clicked.
- Design popover contentAs soon as you have created the popover button, double-click to open the popover editor. Here you can add fields, texts, buttons and other objects, just like in a normal layout.
- Add interactionsUse scripts or direct actions to control the interactivity of the popover. For example, you can specify that certain fields in the popover are validated before the user can save the changes.
- TestingTest the popover in browse mode to ensure that it is displayed correctly and performs the desired actions.
Tips for improving user-friendliness
Step 1: Maintain consistency
A consistent user interface is easier to learn and use. Use consistent colors, fonts and styles across all layouts. Ensure that navigation elements such as buttons and menus appear in the same places and function in the same way.
Users should always know where they are and how to get to the desired functions. Use clear and concise labels for buttons and menus. Make sure that the path to the most important functions is never more than two or three clicks away.
Step 3: Feedback and confirmations
Always give users feedback on their actions. For example, display a confirmation message when data has been saved or a warning before important data is deleted. This prevents errors and increases user confidence in the application.
Step 4: Error prevention and handling
Design your user interface so that users can only make valid entries. Use drop-down menus, checkboxes and other predefined choices to minimize the entry of errors. If an error occurs, display clear error messages and offer suggested solutions.
Step 5: Testing with real users
It's important to test your user interface with real users to make sure it's intuitive and efficient. Gather feedback and make adjustments to continuously improve the user experience.
gFM-Business Open Source FileMaker Basis-ERP
The software for the crash course
Download for free
Frequently asked questions about interactive user interfaces
- How do I create navigation elements in FileMaker to guide my users through the application?
- You can create navigation elements by adding buttons and button bars in layout mode. These allow users to easily switch between different layouts or functions. You can link buttons to scripts that direct the user to another layout, filter records or perform a specific action. The button bar is particularly useful for creating consistent navigation at the top or side of the layout.
- How do I add a popover to my user interface?
- A popover is a layout object that displays additional information or options when the user clicks on a button. To create a popover, select the "Popover button" option in the toolbar in layout mode. Place the button on your layout and you can add content such as fields, text or other buttons in the popover window. Popovers are great for context-sensitive information or for providing advanced options without taking the user out of the current layout.
- How do I create interactive dialog boxes in FileMaker?
- Dialog boxes are useful for displaying important information to users or requesting input from them. You can create a custom dialog box using a script. In the script editor, select the "Show custom dialog box" function and you can add up to three input fields and buttons such as "OK" and "Cancel". This is ideal for confirming user decisions or entering additional data before an action is executed.
- How can I create interactive workflows with buttons?
- Buttons are a central element in interactive user interfaces. You can add buttons and assign scripts to them that perform specific actions, such as creating a new record, deleting a record or navigating to a specific layout. By adding conditions to the scripts, you can control the buttons dynamically, depending on the user role or status of a record.
- How do I use tab controls to maintain an overview in complex layouts?
- Tab controls provide a great way to organize data in tab-like areas and help users switch between different sections of a layout without reloading the entire page. You can add a tab control in layout mode and create tabs that each display different content or data. This makes it easier to navigate complex layouts by displaying related information in a clear, organized structure.
- How can I improve the user-friendliness of my layouts?
- To improve usability, make sure layouts are clear and intuitive. Use large, easily visible buttons, clear labels and high-contrast colors for important elements. Reduce superfluous information and focus on making the most important functions accessible to the user. Tooltips (help texts) can also be helpful to give users additional information when they move the mouse over an object.
- How can I ensure that my interactive user interface works well on different devices?
- FileMaker supports responsive design so that layouts look good on different devices such as desktops, tablets and smartphones. Use the anchor functions in the Inspector to determine how objects adapt to the window size. For mobile devices, make sure buttons are large enough and easy to use. Create layouts optimized for mobile devices with simplified navigation and adapted font size.
- How do I set up conditional formatting to give visual cues to users?
- With conditional formatting, you can visually highlight fields or objects based on certain criteria. For example, you can automatically display data records that have a certain status in a different color. In layout mode, you can select an object and define rules in the inspector under "Conditional formatting" to dynamically change the appearance. This helps users to recognize important information immediately.
- How can I use tooltips to improve my user interface?
- Tooltips are small windows of information that appear when a user moves the mouse over an object. You can add tooltips to any field, button or other object in FileMaker to provide additional information or instructions. In the Inspector, you can define a tooltip for the selected object under the first tab "Position" under "Tooltip". Tooltips are useful to help users without having to leave the layout or open additional dialogs.
- How do I optimize the user interface for fast interactions?
- To enable quick interaction, you should avoid redundant clicks and make important actions easily accessible. Buttons should be placed close to the relevant information and be large enough to be easily clicked. Shortcuts and key combinations can also improve efficiency. You can define shortcuts in scripts to make common actions more accessible, such as saving a record or performing a search.
- How do I create interactive dashboards in FileMaker?
- Dashboards provide a visual overview of important data and KPIs. You can create dashboards by using charts, summary fields and buttons. Charts can be generated from your data to visually display trends and key figures. Buttons and popovers can be integrated into the dashboard to enable interactive user guidance, e.g. filtering data or displaying detailed information.
- How can I integrate dynamic content into my user interface?
- Dynamic content can be integrated using calculation fields, conditional visibility and scripts. For example, you can use calculation fields to display dynamic values that change depending on user input. With conditional visibility, you can show or hide layout objects depending on the current situation, e.g. the status of a data record. Scripts make it possible to further dynamize the user interface by reacting to certain user actions.
