Skip links
ERP software as flexible as your company.

Telephone advice +49 (0) 441-30 43 76 40

gofilemaker.com

Design and customization of layouts

  • Themes and styles, layout objects, editing tools, images and graphics

2.2 Designing and customizing layouts

In this chapter, we'll take an in-depth look at how to create attractive and functional layouts for your FileMaker databases. We will go through the use of themes and styles, working with objects such as fields, texts and buttons, the use of layout editing tools and techniques and the use of images and graphics step by step.

Introductory video on themes and styles in FileMaker

In the following video you will see a short introduction to themes and styles in FileMaker, and how you can align, group and fix objects in the layout using the Inspector.

1. use of themes and styles

Step 1: Select a theme for your layout

A theme is a collection of predefined formatting options that you can apply to your layout to optimize its appearance and usability. FileMaker offers a variety of themes that you can use directly.

  1. Switch to layout mode: In the menu, click on View > Layout mode or use the key combination Cmd + L (macOS) or Ctrl + L (Windows).
  2. Select topic: In layout mode, go to Layouts > Change design. Select a theme from the list. You can immediately see how the layout is changed by the new theme.
  3. Adaptation of the themeYou can customize the predefined settings of a theme. For example, if you don't like the colors or fonts, adjust them using the Inspector on. The changes are immediately applied to the layout.

Step 2: Working with styles

Styles allow you to change the appearance of individual objects such as fields or buttons.

  1. Apply style: Select an object (e.g. a field or a button) and open the Inspector. Under the tab Representation you can select predefined styles or create your own.
  2. Create and save stylesTo create a new style, adjust the properties of the object (e.g. font, frame, fill) and click on Save style. You can then apply this style to other objects.
  3. Global changesIf you change the style, all objects that use this style are automatically updated. This is particularly useful if you want to apply design changes consistently to all layouts.
Design 'Classic' in the gFM-Business ERP software
Design 'Classic' in the gFM-Business ERP software

2. working with objects: Fields, texts, buttons

Step 1: Insert fields into a layout

Fields are central elements of every layout, as they display and allow you to enter the data in your database.

  1. Add fieldDrag a field from the Field list or the Object palette into the layout. Position it where it is needed.
  2. Format field: Customize the appearance of the field by going to the inspector under Representation define the font, colors and margins. You can also add placeholder texts to give users instructions on what data to enter.
  3. Interactive fieldsUse advanced options such as drop-down lists or checkboxes to improve user-friendliness. You can find these options in the Inspector under Data.

Step 2: Add texts

Texts are used to label fields or to provide instructions within the layout.

  1. Insert text object: In the Object palette text tool and click in the layout to add a text field. Enter the desired text.
  2. Format text: Use the Inspectorto adjust the font, font size, color and other text styles. Place the text in a logical position to facilitate user guidance.
  3. Dynamic textsAdd dynamic texts by clicking on Insert > Merge field and select a field whose value is to be displayed in the text.

Step 3: Create buttons

Buttons allow users to interact with the database by triggering actions.

  1. Add button: In the Object palette the button tool and click in the layout to place a button. You can label the button with a text or use an image.
  2. Assign actionAssign an action or script to the button. To do this, select the Inspectorunder Action to select the desired script or function.
  3. Customize style: Customize the appearance of the button by clicking on the Inspector customize the colors, borders and fillings. You can also create a button that changes when pressed to give the user visual feedback.

Integrated ERP developer module with layout protocol

More information
Professional ERP software

3. layout editing tools and techniques

Step 1: Align and distribute objects

The precise alignment and distribution of objects is important to create a neat and professional layout.

  1. Using alignment toolsSelect multiple objects and use the alignment options in the toolbar to align them to the left, right, top or bottom edge. This ensures a clean and symmetrical layout.
  2. Distribute objectsUse the distribution options to create even spacing between multiple objects. This is particularly useful if you want to arrange a series of fields or buttons evenly.
  3. Show guides and gridsActivate guides and the grid via View > Guides and gridsto get a visual aid when placing objects. These aids help you to position objects precisely.

Step 2: Grouping and locking objects

Grouping and locking objects makes it easier to edit complex layouts.

  1. Group objectsSelect several objects and select Arrange > Groupto combine them into one unit. This is useful if you want to move or format several objects at the same time.
  2. Use level controlAdjust the order of the objects by moving them forwards or backwards. You can control this using the commands Arrange > In the foreground or Into the background.
  3. Lock objects: If you want to ensure that an object retains its position and size, lock it using Arrange > Lock. Locked objects cannot be moved or changed accidentally.

gFM-Business Open Source FileMaker Basis-ERP

The software for the crash course

Download for free
Open Source ERP based on Claris FileMaker

4. use of images and graphics

Step 1: Inserting images into layouts

Images add visual appeal to your layouts and can be used for a variety of purposes, such as branding or as functional elements.

  1. Add image object: Select the image tool from the Object palette and click in the layout to insert an image. You can select the image from a file or upload it to a container field.
  2. Adjust image size and position: Adjust the size and position of the image using the tools in the Inspector to ensure that it fits well in the layout. You can also crop or scale the image to better suit your requirements.
  3. Using images as buttonsYou can also use images as buttons by assigning actions to them. This is a great way to create interactive layouts that are visually appealing and functional.

Step 2: Graphics for data visualization

Graphics are ideal for visualizing complex data in a simple way.

  1. Insert diagrams: Go to Insert > Diagram and select the chart type that best suits your data. You can use bar charts, line charts, pie charts and more.
  2. Define data sourceSelect the data fields to be displayed in your chart. These can be fields from the current table or calculated fields that represent specific values.
  3. Format diagram: Use the Inspectorto adjust colors, axis labels and other chart properties. This ensures that the diagram is clear and informative.

Step 3: Using icons and symbols

Icons and symbols are helpful visual elements that can quickly convey information and simplify navigation in your database.

  1. Insert iconsSelect the icon tool or add an icon as an image object. You can use ready-made icons or upload your own graphics that emphasize the purpose of your layout.
  2. Use of symbolsIcons can be used to identify functions such as "Save", "Delete" or "Edit". They make the layout more intuitive and user-friendly, as icons are universally understandable.
  3. Styling of icons: As with other objects, you can also use icons and symbols in the Inspector customize. Make sure that the icons match the size and color of the rest of your layout.

Four FileMaker ERP platforms for optimal operating processes.

Request information
Professional ERP software

Frequently asked questions

  • How do I use themes in FileMaker to customize the appearance of my layouts?
    • In FileMaker, you can use themes to quickly customize the visual design of your layouts. Themes are predefined design templates that specify colors, fonts, and formatting for fields, buttons, and other layout objects. To use or change a theme, switch to layout mode and select "Layouts" > "Change theme" in the menu. You can select the appropriate theme for your application and apply it to all layouts to ensure a consistent appearance.
  • How do styles differ from themes and how can I use styles in my layout?
    • Styles are specific formatting that can be applied to individual layout objects, such as fields, buttons or texts. While themes define the overall design, styles provide detailed control over the appearance of individual elements. You can change the style of an object in the inspector under "Appearance" or save a user-defined style. Using styles helps you to maintain consistency between different layout objects and allows you to quickly apply changes to multiple objects.
  • How can I edit fields, texts and buttons in a layout?
    • In layout mode, you can select fields, texts and buttons and adjust their size, position and formatting. When you select an object, you can move or resize it using the handles on the object. You can use the inspector bar to adjust the appearance, including the font, color and border. You can also define actions for buttons, such as executing a script when clicked.
  • How do I add new fields to a layout?
    • To add a new field, switch to layout mode and click on "Add field" in the field bar. Select the desired field from the underlying table and place it in the layout. You can then further customize the field by changing the size and position and adjusting the appearance with styles. The field bar displays all fields of the underlying table so that you can quickly access the relevant data.
  • How do I work efficiently with multiple objects on a layout?
    • You can select several objects at the same time by dragging a selection frame around the objects with the mouse or by holding down the Shift key and clicking on the objects. As soon as several objects are selected, you can move them together, change their size or align them to each other. You can also align the objects in the "Align" menu or set equal spacing in the inspector to create a clean layout.
  • How can I align and customize objects in my layout?
    • FileMaker offers various tools for aligning and positioning objects. In layout mode, you can use "Align" to align the position of objects at the edges or in the center of the layout. The inspector shows precise positions and sizes so that you can arrange objects with millimeter accuracy. You can also use guides and grids to visually control the placement of objects and ensure a consistent design.
  • How do I use images and graphics in my layouts?
    • You can insert images and graphics into your layouts to improve the visual appearance. In layout mode, you can add a graphic via "Insert" > "Image" and place it in the layout. Images can be used both as decorative elements and as background images. You can adjust the image format in the inspector, e.g. whether the image is stretched, scaled or displayed in its original ratio.
  • How do I design a layout for mobile devices such as iPhone or iPad?
    • When you create a layout for FileMaker Go (the mobile version of FileMaker), you should use special templates in Layout mode that are optimized for mobile devices. These layouts have larger buttons, easier navigation and are designed for touch operation. You can also use zoom in layout mode to simulate how the layout will be displayed on a mobile device. It is important to follow responsive design principles to ensure that your layout looks good on different screen sizes.
  • Can I create custom buttons for specific actions?
    • Yes, you can create custom buttons in FileMaker that perform various actions. In Layout mode, you can insert a button from the toolbar, place it on the layout, and then assign an action or script. For example, you can specify that the button creates a new record, performs a search or navigates the user to another layout. Buttons can also be customized with icons and text.
  • How can I improve layouts with custom symbols and icons?
    • You can add custom symbols and icons to buttons and other layout objects to make the user interface more attractive. In layout mode, you can select a button shape in the inspector and add an icon. You can also upload your own icons and integrate them into your designs. Icons help to visually guide users and make your application easier to use.
  • How do I work with layout editing tools such as the inspector, grid and guides?
    • The inspector bar in FileMaker is a central tool for editing and designing layouts. In the Inspector, you can control the position, size, formatting and interactivity of objects. You can also activate grids and guides in layout mode to precisely align objects. These tools help you to design layouts consistently and ensure that all elements are arranged perfectly.
  • Can I duplicate layouts and use them as templates for other layouts?
    • Yes, you can duplicate layouts in FileMaker to save time and ensure consistency between layouts. In Layout mode, choose Layouts > Manage Layout from the menu, then choose the layout you want to duplicate and click Duplicate. You can then edit and customize the duplicated layout without changing the original layout. This is particularly useful if you want to create similar layouts for different data tables.
2.2 Designing and customizing layouts

Share this page:

ERP software as flexible as your company.
We will be happy to advise you.

Customizable ERP software for Mac, Windows and iOS.

More info
You are here: Design and customization of layouts