Making Creation of Records in a Portal More User Friendly

By Daniel Wood, 15 December 2010

FileMaker provides us with the ability to create related records directly from a portal. This is a great and easy way to generate records without the need to script the process, and for that reason it is a popular technique among both new users and Developers alike.

In this example I have a simple relationship setup between customers and contacts. A customer can have many contacts. In order to create records through a portal, the option Allow creation of records in this table via this relationship must be checked on the portal side of the relationship.

Creation of related records works because FileMaker automatically populates fields on the new record that are in the relationship. So in the example above, the field Customer ID will be automatically set on the new record created, thus making it a related record of the current Customer.

niceportalcreate 1

However, with great power comes great user interface responsibility :) The default interface is not the most intuitive of designs:

niceportalcreate 2

But, with a little bit of conditional formatting, you can make this interface more presentable for users.

FileMaker places a blank row as the last row for creation of records. But to the average user, this might just look like a blank record. It would be nice to show the user that this row is for adding a new record. There are numerous ways to do this, but here is a simple method:

niceportalcreate 3

Here, I have placed a label on the last row which tells the user to enter the name of a new contact into this row. Because everything you place inside a portal will potentially show on every row, we need to hide this label on every row except the last row, here's how:

First, place the label inside the portal, ensuring it is placed behind the field.

Next, make the field transparent fill, allowing you to see the label behind.

Now, add a conditional formatting clause to the field. Remember we want to hide the label, so filling the field with a solid colour such as white, will accomplish this.

We wish for every row to fill the field white except for the last row. In order to achieve this, we need to find a distinction between the last row, and all the others. Fortunately there is one - the last row is not actually a record at all. You can tell a record from a non-record by whether or not the row has a primary key value. For contacts - our primary key field is the Contact ID field. Primary key fields should always have a value in them, so we can test whether our row has a value for the Primary Key - if it doesn't then the row must not be a record at all:

niceportalcreate 4

The conditional formatting evaluates true for any row that contains an actual record, and false for our special row used for the creation of a record.

Deletion of Records

Finally, using the same idea for the label, we can make deletion of records more intuitive. Consider a simple "X" piece of text in the portal which represents deletion of a portal row:

niceportalcreate 5

Again, there is no point in showing the X on our special portal row, because we can't delete it - it isn't even a record!

We can however use conditional formatting to hide the X - this time, we can set it's text colour to the same background colour as the portal

niceportalcreate 6

This time, we wish to apply the formatting on just the blank row only, so we do this if the primary key field is Empty.

niceportalcreate 7

The end result is quite nice. In this situation I have attached the "Delete Portal Row" script step to the X. However you should note that if you choose to run a script to handle your record deletion, it is always a good idea to check whether the row you have chosen is an actual record, or the special portal creation record, ie:

 

If [ isEmpty ( Contacts::Contact ID ) ]
Exit Script []
End If

This block of text should go as the first thing in your script. By doing so, you script will never run it's steps if the user happens to try to delete the special row. Certain actions within your script can in fact create a record rather than delete it ! For example, if your script tries to set a field on the blank row, this will create a record right away. to avoid all issues, do your existence check as the very first step.

Example File

Please find attached an example file. This file was used for all the screenshots in this article, and is fully commented to help you fully understand what is going on in the file.

Download Example File

Something to say? Post a comment...

Comments

  • Melissa 14/12/2013 9:26am (8 years ago)

    To Tom Fith, that is an awesome solution! Thank you.

  • Brian McMillan 14/07/2013 7:55am (8 years ago)

    I would also add that you need to specify the following settings for each field in the portal.
    Normal state - Graphic Fill = "None" or transparent
    In focus state - Graphic fill = "Solid"

    This will toggle off the text when you enter the field.

  • Tom Fitch 24/05/2011 4:51pm (10 years ago)

    The standard spacing above and below the text pretty much takes care of it. However, it's generally suitable only for single-line fields.

  • Daniel Wood 24/05/2011 1:50pm (10 years ago)

    hi Tom, that sounds like an awesome technique there, I'll have to try it out thanks! Just one quick Q if you are still around - if the font is made really large, do you ever end up seeing part of it at any point in the field though? Like the very bottom left corner of a letter in its huge font, or if the font is large enough does it simply just not appear within the box at all? cheers.

  • Tom Fitch 24/05/2011 5:44am (10 years ago)

    If the portal has alternating row colors, here's a great trick I picked up from John Sindelar of Seedcode: rather than change the text color to white, change the SIZE of the text to some huge number (222). This will cause the text to be clipped by its bounding box. Result: invisible text with transparent background.

RSS feed for comments on this page | RSS feed for all comments