People Goal 3 - Part 8: Build the main detail screen - Secondary Table Fields

Document created by Kedar on Jan 28, 2015Last modified by communitymanager on May 12, 2015
Version 14Show Document
  • View in full screen mode

 


At this point, your Main Detail layout displays your main table fields organized into various groups, but the user still has no access to the secondary table data, which is a crucial element in your solution. In this section, you’ll add a portal to provide a view of the secondary table data and permit the user to interact with it.


A portal displays data from a related table. Each row in the portal representing one related record in that table. The portal can be configured to display as many records as you'd like (as long as it fits on the layout). The data it displays can be filtered and sorted as your needs require. In addition, the portal can be used to add, delete and edit records in the related table.


You can think of a portal as an inline list. Similar principles apply to the arrangement of fields within a portal as to the arrangement of fields on a list layout. Within the portal row, the upper left position is the most important. Typically, the data in a portal is organized into columns. You can have one field per column (as in a spreadsheet), or group two or more fields vertically. Often limitations of horizontal space make grouping a necessity, though it makes scanning more difficult, and reduces the number of rows that can be displayed.


The example solution arranges its portal fields in this way, with two fields per column, except for the notes on the right:

activities.png

 

  • The salesperson needs to scan the type and status of the activity quickly, so these fields are placed on the left.

  • Since the portal is sorted by activity date and time to ease scanning (we’ll cover that later), those two fields are less essential and can be “buried” in the middle.

 

  • The activity notes in the column on the right need the most room. The field is given the most horizontal space and also takes up the entire height of the row.


How would you arrange your portal fields? Here some possibilities to get you thinking:


Enrollments (for Students)

Pic 11.png


Appointments (for Patients)

Pic 12.png


Establishing Ownership


If there is a staff member (administrator, advisor, etc) who is the only person allowed to manage the secondary data for a given person in your system, make sure you have a field in the main table to track this fact.


Place this field at the top of the right-hand side of the body part. This gives a clear message that everything below it is associated with this person. In the example solution, each contact belongs to a salesperson, and all that contact’s activities are managed by that salesperson:

salesperson.png


Consider whether this approach to ownership could apply to your business, whether it might need to be established in a different way, or whether few enough people will use your solution that the concept isn’t relevant.



Goal:


Add a field at the top of the screen to establish ownership (if appropriate), with a drop-down list based on a field. Add a portal below it to display secondary table data, choosing the fields that you want to display.



Steps:


Establish ownership

 

  1. If appropriate, place your ownership field at the top of the right-hand side of the body part.

  2. Use the Inspector > Data tab > Field area to set the Control Style to “Drop-down List”.

  3. Use the Inspector > Data tab > Field area to click the pencil button next to the Values from: option.

    A Manage Value Lists… dialog window appears.

  4. Click the New button to create a new value list.

    An Edit Value List dialog window appears.

  5. Enter the name of your ownership field into the Value List Name box.

  6. Choose the Use values from field option.

    A Specify Fields for Value List… dialog window appears.
    pasted-image-11.png

  7. Select your ownership field in the Use values from first field list on the left.

  8. Click the OK button to dismiss the dialog window.


Add the portal


  1. Select the Portal tool from the status toolbar.

  2. Drag a rectangle in the body to create your portal.

    A Portal Setup dialog window appears (see below).

  3. For Show related records from, choose your secondary table occurrence.

  4. For Sort portal records, click the Specify button.

    A Sort Records dialog window appears.

  5. Choose the field(s) you wish to sort by, and the sort order for each field.
    pasted-image-12.png

    The example solution sorts by Activity Date and Activity Time in descending order so that the most recent dates and times are at the top.

  6. Click the OK button to dismiss the Sort Records dialog window.

  7. Select the Show vertical scroll bar option.

    This adds a scroll bar to the right of the portal, allowing you to scroll through the records displayed by the portal. This will be useful over time when your solution accumulates more records than the portal can display at once.

  8. Enter the number of rows to display.

    This will depend on the space available and the height of each row. The example solution displays 7 rows.
    pasted-image-13.png

  9. Click the OK button to dismiss the Portal Setup dialog window.

    An Add Fields to Portal dialog window appears.


Add the fields


  1. Select the fields you want to display in your portal, moving them from the Available fields list to the Included fields list.
    pasted-image-14.png

  2. Click the OK button to dismiss the dialog window.

    A portal object is added to your layout with your selected fields in the first row.
    pasted-image-15.png

    The portal is probably too short at this point.

  3. Change the height of the first portal row so that the portal occupies all the space you want it to.

    When you change the height of the first row, that height is applied to each of the portal rows, making the entire portal bigger.

    You also can use the Inspector > Position tab > Position area to change the Height  of the portal. This measurement is for the entire portal — FileMaker Pro divides this number to decide how high each row should be.

  4. Rearrange your fields in the first row of the portal, making three or four groups and leaving enough empty space so that the columns of data are obvious and easy for the eye to scan.

    Be sure to leave some space to the right of your last column. Later you will place a delete button there.
    pasted-image-16.png

  5. Add labels above each column to indicate the data it contains.

    If you run out of space, consider abbreviating the labels. Or you can stack the labels on top of each other just as the fields below them are stacked:
    pasted-image-17.png

    Whenever you abbreviate field names, stack them, or come up with some other creative way to work with the space available to you, be sure to ask yourself whether the user will understand what you’ve done.

  6. For each column, select the label and the fields below it.

  7. Choose the Arrange menu > Align > Left Edges to make sure the left edges are aligned precisely.

  8. If the column doesn’t look aligned, use the Inspector > Appearance tab > Advanced Graphic area to check whether the Padding is consistent.



Format the portal row


Let's color the portal row white, making the portal stand out against the background color, and indicating that it's used for data entry. You'll also add a line at the bottom of each portal row to make a visual separation between the rows.


  1. Select your portal.

  2. At the top of the Inspector > Appearance tab, under the Style label, change the drop-down list from "Portal" to "Portal: Row".

    This is a temporary settings change in the Inspector, not a change to your portal. You are indicating that any changes you make now will be applied to the portal row rather than the portal as a whole.

  3. In the Inspector > Appearance tab > Graphic area, change the Fill drop-down list to "Solid Color".

  4. Click the swatch of color below the Fill drop-down list.

    The Colors dialog window appears.

  5. Use the Colors window to select the color white.

    The swatch of color in the Inspector changes to white.

  6. Click the red X in the upper left of the Colors window to close it.

  7. In the Inspector > Appearance tab > Graphic area, change the Line settings to match the image below.

    This image shows a solid line, only .25pt wide, colored dark gray. It is only applied to the bottom edge of the portal row (as opposed to all four sides or some combination).
    Line.png

At this point, the right-hand side of your body part should look something like this:

portal progress.png



     

      

Attachments

    Outcomes