Filemaker Pro Lesson

Interface Design - Creating a Tabbed Template

For this lesson you will need: Student.fp7

While proper field definitions and planning are critical for making a database usable, good layout design is just as important. A poorly designed layout will make it inefficient for those entering information and for those who are using it to manage the information. I like to begin conceptualizing a layout design by reviewing the input documents that will be used to populate the database. Although you may wish to arrange fields differently, you should keep in mind the typical left to right reading style in Western culture. I also consider topic groupings since databases are typically populated from multiple source documents. You may wish to group contact information together, application information together, test scores together, etc. to make both data entry and data access more intuitive.

For consistency of look and feel, I like to begin with a layout template. I frequently use a tabbed layout design to provide visual cues to each topic grouping without a user needing to page through a list of design layouts.

1. Open the sample file Students.fp7. We are going to create a tabbed layout with the student's contact information under the first tab and the music skills and interest information under the second tab.

2. Select View -> Layout Mode then choose Layouts -> New Layouts and name the layout Template. Choose the Blank layout option and click Finish.

3. Since we are creating a data entry layout we do not need a header or footer. Click on the tab labeled header and press the Delete key. Click on the tab labeled footer and press the Delete key. Now click on the tab labeled body and holding the left mouse button down, drag the tab to the bottom of your screen so the body of your layout fills your viewable screen. Select View -> Graphic Rulers.

4. Having white or light colored fields against a colored background helps users quickly identify data fields from field labels and other explanatory text on a layout. Select a color from the color palette then select the Rectangle tool and draw a rectangle 10 inches wide by 5 inches high. Position it flush left and down from the top edge approximately 1 3/4". With the rectangle selected, Choose Arrange -> Lock. Locking the background rectangle will prevent it from accidentally being selected and moved or resized along with other layout objects.

5. Now click on the Rounded Corner Rectangle tool and draw a rectangle approximately 2" wide and 1/2" high. Position this rectangle flush left with it's lower edge just slightly overlapping the top left edge of the large rectangle.

6. With the smaller rectangle still selected, press Control-C to copy the rectangle to the clipboard. Click just to the right of the first small rectangle and press Control-V to paste the copy to the right of the first rectangle. Right click this new rectangle and select Fill Color and choose a color lighter than the small rectangle to the left.

7. Select the Text tool and click inside the first rectangle and type "Contact Info". Then click inside the second rectangle and type "Music Skills". Select the first rectangle then holding the Shift key down, select the second rectangle. Then select Arrange -> Send to Back.

8. Now select the Field tool and drag a field into the upper left corner of the layout. Select the global field "Logo". Select View -> Object Size and make the field 2 1/2" wide by 3/4" high. We could have selected Edit -> Insert Picture and chosen the logo.jpg from our available sample files. However, by placing the logo in a global container field, we can change the image on all layouts containing the container field by simply inserting a different image in one instance of the container field. Select the text tool and to the right of the logo field type "Student Information System". Select Format -> Font and choose Arial. Then select Format -> Size and choose 14 pt. Now select Format -> Style and choose Italic then Format -> Style and choose Bold. Finally, select Format -> Text Color and pick a color that contrasts well with your other colored layout objects.

9. Your template is now complete. Select Layout -> Duplicate Layout. Select Layout -> Layout Setup and change the name to "Contact Info" and click OK. Select Layout -> Duplicate Layout. Select Layout -> Layout Setup and change the name to "Music Skills" and click OK.

10. From the available layouts, select "Contact Info". Select the rectangle containing the text "Music Skills" and select Format -> Button. Select Go To Layout from the list of available actions and select "Music Skills" from the Specify layout drop-down list. Click OK.

11. Now select the "Music Skills" layout from the list of available layouts. Select the rectangle containing the text "Contact Info" and select Format -> Button. Select Go To Layout from the list of available actions and select "Contact Info" from the Specify layout drop-down list. Click OK.

12. Now with the "Contact Info" rectangle selected, right click and select Fill Color. Change the fill color to the lighter color of the "Music Skills" rectangle.

13. Select the "Music Skills" rectangle. Right click and select Fill Color. Change the fill color to the same color as the background rectangle. Making the tab with the displayed fields the same as the background rectangle provides a visual cue to the database user as to the information set displayed. Your layouts are now ready for field placement.

If you have an RSS feed that would be of interest
to faculty and students at the College of Education
please contact Mary Harrsch.

Last updated: 12/28/2004