FMLayoutMode.com

So, in my last post, we folded the layout space a little by adding tabs to the layout. That’s pretty cool. Now we can add some related data in that extra space.

Now why would we want to do that? Let’s have another look at the layout in its current incarnation:

You’ll notice a couple of the buttons on the right side of the layout: “Go to this client’s projects”, and “Go to this client’s invoices”. These buttons probably take you to a list view of the related projects or invoices.

Now that may be what your users want, but there is another approach. Portals can show those related records, without your user having to navigate away from the current layout.

Let’s have a look in Layout Mode, kemo sabe.

Now that you’ve joined us, click on the Projects tab.

Yep, that’s a whole lotta nothing so far. Let’s change that. In your status area, click on the portal tool button.

Click your left mouse button near the top left corner of the tab, and drag down to near the bottom right corner. This will invoke the Portal Setup dialog.

The first thing you need to set up is the “Show related records from”. I’ve already set up a relationship called “Projects”, to relate to all the projects that have been done for this client. I have the relationship sorting in reverse order by project number, but if I didn’t, I could set this as an option in the “Sort portal records” instead. I’ll discuss this at the end.

We also need to check the box for “Show vertical scroll bar”, and “Alternate background fill”. For the alternate fill, choose the lightest colour of grey. Now click OK.

Next, you’ll see the “Add fields to Portal” dialog. Let’s double-click the following: projectNo, projectName, deliveryDate. Click OK, friends.

The portal looks like whatever your default settings are. So you may need to change it to be a little more of the vanilla style that we know and love:

• Effect: none
• Fill: white
• Line thickness: 1 pt.
• Line colour: RGB (111,111,165). A little darker than our header colour, but not a huge difference. The header colour is a little to light for us to be able to see the scrollbars easily.

You’ll probably need to do something similar to your fields, with some important distinctions:

• Effect: none
• Fill pattern: transparent
• On the Inspector, set your fields to have no border.
• Make sure your font is set the same as the rest of the layout: Verdana 10.
• On the Data tab of the Inspector, deselect Field Entry in Browse Mode.

Here’s what that portal looks like now:

You’ll notice one of those fields is a date field (deliveryDate). Never ever leave a date field formatted as entered. For the first twelve days of the month, nobody knows which number is the month or the day. Select that field and go to the Data tab on your Inspector. Change it to the format: Dec 25, 2003. All doubt has been removed!

Now, when FileMaker put those fields in your portal, it just made all of them the same width. Let’s make that a little more efficient. the projectNo and deliveryDate don’t need to be as wide, but projectName will probably have more text in it. Once you’ve played with the widths a little, go back into Browse Mode and have a look at what you’ve done.

That’s nice, but we’re not done yet. Layout Mode, please.

Okay, now, when it comes to portal width on a tab, I usually make the portal 20 pixels narrower than the tab panel. Then I set the left edge 10 pixels from the left edge. That leaves you with a 10 pixel margin on each side. We’ll talk about top and bottom margins in a minute.

But first, what are these field? Oh yeah, we need field labels. I like to draw a rectangle above the portal. Make it 20 pixels high, and the same width as the portal. Now put some field labels on it, centered vertically on the rectangle.

Make the rectangle fill the same colour as the layout header, and the rectangle lines (1 pt line thickness) to be the same colour as the portal lines.

Select the field labels, and the rectangle they are within, and move it down until the bottom line of the rectangle merges with the top line of the portal. Now select the entire contents of this tab, and move them until they are 15 pixels from the top of the tab panel. Give the portal enough lines until it is as close as you can get to being 10 pixels from the bottom of the tab panel.

Here’s what it will look like when you’re back in Browse Mode.

Okay, just one more thing: Let’s make this portal do something! In Layout Mode, select the projectNo field from the portal. Let’s turn it into a clickable hyperlink (of sorts — check my very first post on March 4, 2010), by turning the text blue and underlined, then giving it a button action.

The action? Go to related record. The relationship? The same one as your portal! Make sure you check the box to “Show only related records” and “Match current record only”.

Now let’s remove some detritus (waste or debris; also the name of a troll in Terry Pratchett’s books). We don’t need the “Go to this client’s projects” button anymore. If we go through all of this and make a similar portal for invoices on the Invoices tab (just read this whole thing again, but substitute the word “Invoice” everywhere you see “Project”), then we can also get rid of the “Go to this client’s invoices” button.

So we’ve added more information, and cleaned up our layout. Can you even stand how cool that is?

Here’s what the finished product looks like:

Notes

1. Why sort the relationship instead of the portal? If you want to have the sort order taken into account on any calculations that are based on that relationship, the relationship must be sorted. FileMaker’s calc engine doesn’t care how the portal is sorted. So as a general rule, I almost always sort the relationship. That way, when I’m looking at a portal while creating a calculation, I know that the calc can use the sort order I’m viewing.
2. When you’re doing a lot of layout work, it can be a pain to always have to reset new objects to look like your default. On another day, I’ll show you how to reset the default.
3. I often advocate for including the day name when you are formatting a date, so that you don’t force the user to look at a calendar to find out what day of the week it was on Oct 1, 2009. But I don’t think it’s warranted in this case. If they are looking at employees’ timesheet entries for payroll purposes, then it is important to know if there is some weekend time, but they probably don’t care about what day of the week an old project was delivered.
4. Notice the reverse order of records in the portal. Usually when a user is looking at this type of data, the thing they are most concerned about is the most recent project, invoice, whatever. Why not make it easy for them to get to that by putting it at the top?
5. Who is Terry Pratchett? Dude, only one of the best-selling fantasy writers in the world. Very light reading; you should check it out!

Paul Spafford
FMLayoutMode.com
Spafford Data Solutions