Tutorial 201:

Create

Tutorial 201: Lesson 4

Layouts

Lesson Materials
Download Files

Designing a user interface

Now that you have a clear picture of how your data will be organized, you can start building your app’s structure. You’ll start by creating tables and fields to house your data. When you’re done, you’ll have a basic database: the foundation of your custom app.

When your tables and fields are in place, you’ll learn how to import Excel data into your new tables. FileMaker Pro Advanced is great at importing data from other sources. If your format isn’t supported, you can convert it to Excel or another supported format. Finally you’ll link your tables together by creating relationships.

By themselves, tables aren’t much more powerful than spreadsheets, because you can only work with the data from one table at a time — but when you link your tables together, they become aware of each other’s data. After you relate tables together, you can see and understand the connections in your data.

Why is this important?

  • Your layouts are the face of your app! This is what your user will see and interact with.
  • Layout setup tools give you a head start in creating interfaces that perfectly fit your users’ devices. 
  • Users’ eyes are trained to find misalignments, even if they aren’t conscious of them. The alignment tools demonstrated here make it easier to create professional-looking interfaces.

Video 1

Creating your first user layout

Learn the basics of layout setup by creating the Client List layout.

In this video, you will:

  • Use New Layout/Report wizard: get help creating a layout from scratch (0:40)
  • Set screen stencils: create layouts for specific screens (1:49)
  • Learn about layout parts: understand layout structure (2:04)
  • Add fields with the Field Picker: present your data quickly (2:46)
  • Align using dynamic guides: keep fields and labels aligned while you move them (5:02)

Video 2

Refining the list layout

Make adjustments to your new layout so it’s easier for users to see important information.

In this video, you will:

  • Adjust layout height: save screen space (0:32)
  • Undo and redo layout changes: undo changes you don’t want (1:20)
  • Apply styles and themes: manage layout appearance with a few clicks (2:00)
  • Manage layouts: keep layouts organized (3:38)

Related Resource(s)

  • Creating and managing layouts and reports. Learn More >
  • Saving and reverting your layouts changes. Learn More > 
  • Using screen stencils to create iOS friendly layouts. Learn More >
  • Designing a layout optimized for FileMaker Go. Learn More >
  • FileMaker Go Development Guide. Learn More >
  • FileMaker DevCon Session: User Interface Tips and Tricks for Beginners. Watch Now >