Log in
Hot & Trending on FMT

FileMaker UI Tricks: Dual-Purpose Layout

Featured FileMaker UI Tricks: Dual-Purpose Layout

FileMaker 13 & 14 have some features that can be leveraged to allow one layout to toggle between Form View & Table View and look differently! We will be using the Starter Solution, “Contacts”. Feel free to download the demo file (Contacts14.fmp12.zip) or you may start with a fresh copy of the database file or another Starter Solution and follow the steps below.

NEW to Starter Solutions? Select “New From Starter Solution” under the File menu. Click the “Contacts” icon and click on the “Choose” button. A dialog will come up with the “Save As” field filled in with the name of the database file you chose. Navigate to where you wish to save the file and click the “Save” button. This will open the file to the default layout and be ready to change.

The default layout for Contacts is “Contact Details”, is in Form View and shows two “tab-like” buttons called: Contact List & Contact Details. These are buttons that Switch you to different layouts. Notice how the placement is the same and there is a smooth transition between the two layouts. You may also notice that the view is “locked” to just allow View as List or View as Form (respectively). You cannot select other views on these two layouts.

CONTACTS_details_tab

CONTACTS_list_tab

 

Start by duplicating a form layout

Start the transformation by selecting the File menu, Manage submenu, Layouts. You should see the dialog below:

contacts_layouts

“Contact Details” should be highlighted; if not click once on it to highlight and click the “Duplicate” button at the bottom of the dialog. Click once on the new “Contact Details Copy” (if not already highlighted) and click the “Edit” button at the bottom. In the Layout Setup dialog change the name to “CONTACTS TOGGLE” (or any name that you wish!) and click the OK button. Click the “Open” button for the newly named layout.

Make changes in Layout Mode

Now we start revising, so enter Layout Mode (under the View menu or by shortcut shown on View menu or selecting the Layout from the bottom status area). Delete the two buttons that perform the switch in the header part on the layout.

buttons_in_the_header

Leave the “Find Contacts” text for now, it contains a “Hide object when” calculation that hides the text when we are in browse mode. It is this feature that we will use to help make the UI toggle smoothly.

inspector_data_behavior2

To see this calculation, click on the text once and using shortcut command+I (mac) or cntl+I (wind), the Inspector dialog appears in the Data tab, Behavior section.

Get ( WindowMode ) = 0

Create the new buttons! Click on the Button tool in top status area of Layout Mode. Make it approx. 34×34 pts. The Button Setup dialog should appear. Click on the second button at the top, “Display only an icon”. Choose an icon that represents the “Form View”. Change the size to 32pt. Under Action, select single step and add the script step and click OK.

View As [View as Form]

In the Inspector for this new object (button): Under the Position tab change the size to 34 pt x 34 pt if not already that size. Change the left to 7 pt and the top to 7pt. Under the Appearance tab for Normal, set the Fill and Lines to none & all the Padding to 0. Under the Data tab, enter this into the Hide object when:

Get ( WindowMode ) ≠ 0 // hide if not Browse Mode
or
Get ( LayoutViewState ) = 0 // hide if in Table View

Duplicate this button. Click the button to change the icon to one that represents the “Table View”. Change the script assign to this new button and click OK.

View As [View as Table]

In the Inspector: Under the Postion tab change left to 30 pt and the top to 7pt. Under the Data tab change this in the Hide object when:

Get ( WindowMode ) ≠ 0 // hide if not Browse Mode
or
Get ( LayoutViewState ) = 2 // hide if in Table View

If you go to Browse Mode and try this now, you will discover that Table View is not part of this layout. Back in Layout Mode, click the pencil next to the layout name to edit the Views for this layout. After you check Table View, the Properties dialog will appear. Check the Header and Footer (or whatever you may have on your base ‘form’ layout). You want the same parts to appear on the Table View as on the Form View. Click OK on both dialogs.

layout_setup_views_tab

table_view_properties

Test the buttons

Now go back to Browse mode and test the buttons. Yes! the offset is exactly 23 pts between table and form views. So placing them as we did, they appear in the same screen location when you toggle between the views. You can see this best if you open a new window and toggle the view on the top window, then align the windows vertically.

compare_two_views

Test for find mode! OOPS! There is one more setting in the Inspector just under the Hide object when. Check the “Apply in Find mode”. Now it’s correct in all modes all views (the two we allow).

Tips

  • Put these on the layout in the header to see the values change as you toggle or change modes: WindowMode: {{WindowMode}} LayoutViewState: {{LayoutViewState}}
  • Get ( WindowMode ) ≠ 0 in “Hide object when” also hides an object in Preview mode and the object does NOT print. No need to add the change the setting in Inspector, Position tab, Object visibility to “Hide when printing”.
  • I also like to add the text {{LayoutName}} beside the buttons. Make a copy with the offset of 23pts on the copy and use the above ‘Hide object when’ calculations. This makes the buttons and text transportable to other layouts with no changes! YMMV, depending on how you name your layouts, of course.

Table View features

The other technique in this article is the ability to change the fields displayed in Table View without actually changing the fields in the layout (as in Form View). This gives us the one layout with two views! While in Browse Mode, toggle to the Table View.

Hide one column: Click on the arrow next to the column (field name) and in the drop-down, select Field and Hide Field. Do this for several fields you wan to remove.

CONTACTS_table_hide_fields

Hide more than one column: When you have many fields to hide this way, it can be tedious, especially if the Form View layout has Tab Panels or Pop-overs or Portals. There’s a faster fix for this. Click the Modify button in the upper right.

CONTACTS_table_modify_button

Then in the dialog you can check/uncheck fields and reorder the column positions.

CONTACTS_modify_table_view_multiple

You can also rearrange and resize the columns in browse view.

CONTACTS_table_resize_move_columns

Wrap up

I didn’t like the Find Contacts text, as it doesn’t hide in preview and doesn’t stay in the same visual position in the two Views. The Send by Email button (and icon) I also thought should be hidden in the Table View.

If you have a Top Navigation part, it will not ‘toggle’ correctly. You can choose to hide the objects, use button-bar tricks or other means to make Top Navigation work smoothly in one layout that toggles between Form View and Table View.

I use this technique, because:

  • I need to have details, but like to quickly check a list in a found set of records.
  • This is a quick way to print a table of data without the need for another layout.
  • I can quickly sort and find in specific fields (less is more).
  • I can quickly edit data in the most important fields shown in Table View.
  • I can modify the fields shown or hidden for specific table reports, if needed.
  • File=>Send/Save Records As->Excel only uses the fields in the Table if you are in that view.
  • After I’ve put time into a design of a form, this is an easy way to add a Table “layout” without actually adding another layout.

Because this has button icons, the file only opens in FMP/FMPA 14. The same technique works in versions 13, if you use your own icons with the same offsets. Hide object when was first introduced in FM 13.x. More information in this feature can be found here:

FM Help hide objects

FM 13 Help topic

Untested

FileMaker Go: does not allow Modify of Table View columns, but other functions should work.

Web Direct: Table View is unsupported in Web Direct.

Kevin Frank

FMT Staff Note: IF you would like any of Kevin's tip or techniques incorprated into a solution or project contact him at his website below.

Hello and welcome. I’m Kevin Frank, and I’ve been using FileMaker Pro since the late ’80s… professionally since 1995. The expression “hack” has both positive and negative connotations. Here it is defined as “a tip, trick or technique that helps you solve a problem,” and the best hacks are the ones that can be re-used and modified to meet a variety of challenges. Or, put another way, as I read recently in Street Fighting Mathematics, “A tool is a trick I use twice.”

Kevin Frank and Associates provides custom FileMaker database solutions for business, government, education and non-profit clients. With over 20 years experience, we are certified FileMaker Developers with a solid reputation for high quality results. We invite you to call us today for a no-charge, no-obligation phone consultation.

To find many more in depth articles from Kevin and some must have tools and services visit his site at the link below:

Website: www.filemakerhacks.com