Build-On Tutorial:

iPhone Directory

iPhone Directory: Lesson 2

iPhone layout - Send mail, make a phone call

Lesson Overview

In the previous lesson you created a dedicated iPhone List layout and adapted a script to navigate to this layout when using an iPhone (or iPad).

In this lesson, you will create a new detail layout and some scripts that will enable users to phone or send email straight from an iPhone or iPad.

You will use the tables, fields, and relationships that already exist in your file file to accomplish these objectives.

Here is a sneak peak from what you will build.

Step 1 - Create phone and email script

The first step is to create the script to send an email or to make a phone call.

Note: If you have not worked with scripts before, you will find it helpful to review the Creating and Editing Scripts section of the FileMaker Pro Advanced Help system before starting this task.

  1. Open the Script Workspace (Scripts > Script Workspace...).
  2. Create a new script by duplicating the Template Script
    1. Rename the script “Contact Member from iPhone (type)”.
    2. Move it into the Member folder right above the “TRIGGER_Interaction_FilterBy_OnSave” script.
  3. Add a Separator below this script (Scripts > New Separator). Right-click on the separator and select the Exclude from Scripts Menu option.
  4. Select the Contact Member from iPhone (type) script and modify it so it contains the following script steps.

# ==============================================================

# Purpose: Either calls or emails a member

# Context: iPhone Detail layout# --------------------------------------------------------------

# Parameters: type (email or phone)# --------------------------------------------------------------

# Returns: Nothing#

# ===============================================================

Allow User Abort [ Off ]
Set Error Capture [ Off ]
Freeze Window

Set Variable [ $parameter_parsing_ok ; Value: #Assign ( Get(ScriptParameter ) ) ]
If [ $parameter_parsing_ok = False ]
   # Parameters could not be parsed, exit this script and report back
   Exit Script [ Text Result: False ]
End If

Set Error Capture [ On ]
Commit Records/Requests [ With dialog: On ]

If [ $type = "Email" and not IsEmpty( MEMBER::Email ) ]
   Send Mail [ Send via E-mail Client ; With dialog: On ; To: MEMBER::Email ]

Else If [ $type = "Phone" and not IsEmpty( MEMBER::Phone ) ]
   Dial Phone [ With dialog: Off ; MEMBER::Phone ]

End If

Exit Script [ Text Result: $null ]

  1. Save and close the script.

Step 2 - Create the member detail layout

Create the new iPhone layout by duplicating the existing Blank | iPhone - Detail layout.

  1. Enter Layout mode using the Edit Layout button in the status toolbar.

    Note: You can also enter Layout mode using the View > Layout Mode menu item, or the keyboard shortcut Command-L (macOS) / Control-L (Windows).
  2. Use the Layout pulldown menu in the status toolbar to switch to the Blank >Blank | iPhone - Detail layout.
  3. Duplicate the layout using the Layouts > Duplicate Layout menu item.

    Note: You can also use the Manage Layouts dialog (File > Manage > Layouts...) to duplicate a layout. This dialog is also useful for organizing and reordering your layouts.
  4. Using the Layout Setup dialog (Layouts > Layout Setup...):
    1. Rename the layout to “Member Detail iOS”.
    2. Change the Show records from: dropdown to the MEMBER table occurrence. This setting determines the context of the layout.
    3. Click OK when finished to save the setup changes.
    4. Enter Browse mode and save your changes when prompted.
  1. Open the Manage Layouts dialog (File > Manage > Layouts ...) and move the Member Detail iOS layout into the iPhone > Member folder.

Step 3 - Add fields to the layout

In this step you will add fields and text objects to the new layout. You will specify styles for the newly created objects and set their correct autosizing options using the Inspector tool.

  1. You should still be in Layout mode after completing Step 1. If not, re-enter Layout mode.
  2. On the Fields tab of the Objects pane, make sure the Drag Preferences for the Labels are set to Place labels above fields when dragged to the layout.
  1. Add the following fields to the Body of the layout (In the Fields tab, drag the fields from the fields list to the position on the layout).
    1. Type
    2. Name_First
    3. Name_Last
    4. Organization
    5. Email
    6. Phone
    7. Fax
  2. Double click the field label Name_First and change it to “First Name”. Change the field label Name_Last to “Last Name”.
  3. Select Insert > Merge Field.... Add the Member_Name field to the top of the layout.

    Merge fields are text objects that show field data. Users cannot click into them or modify them as they can with regular field objects. You can treat them as regular text objects in Layout mode.
  4. Select Insert > Merge Field... again and add the z_Donation_Total field.

    Double-click in the z_Donation_Total merge field. Type “Total Donations: “ in front of “<<z_Donation_Total>>”. Confirm by clicking outside the text object or by selecting another tool.
  1. Open the Inspector using the View > Inspectors > Inspector menu item. You can also access it using keyboard shortcut Command-I (macOS) / Control-I (Windows).
  2. Activate the Data tab of the Inspector.
  1. Select the object with the donation total merge field, and use the Data Formatting section of the Inspector to specify Currency formatting, two decimal places, and a comma as the thousands separator.
  1. Activate the Styles tab of the Inspector, which is used for specifying object styles.
  1. Select all of the fields (not the merge fields) and apply the txt Black.Left style.
  2. Select the labels on the layout and apply the label Left style.
  3. Similarly, select and assign styles to the two merge fields:
    1. Member_Name - style: headline Center
    2. z_Donation_Total - style: label Center
  4. Place the objects as you see in the screenshot below. Activate Snap to grid in the View > Grid menu item for precise placement.
  1. Select the Type field and activate the Data tab of the Inspector.
    1. Select Pop-up Menu as the Control style.
    2. For Values from: select the Member_Type value list.
    3. Select the option to Include arrow to show and hide list.
  1. Select the Position tab of the Inspector to set Autosizing options.
    1. Select all the fields (including the merge fields) and set left, top, and right anchors as shown below. This will allow the fields to stretch horizontally on larger screens.
    2. The Autosizing options for the Labels are the default settings. You do not have to change them.

Step 4 - Add buttons to your layouts

To be able to navigate between the list and detail layouts, send emails, and make a phone call, you will add buttons on the layouts and attach actions to them.

  1. Select the Button tool from the status toolbar. Click and hold the Button icon in the status toolbar to make sure you are adding a button and not a button bar. Click and drag a button in the Top Navigation part.
  1. In the Button Setup dialog:
    1. Display the Icon to the left of the label.
    2. Set the label to “Members List”.
    3. Assign a left arrow icon to the button.
    4. Set the Action: to perform a Single Step.
    5. Set the step to:

Go to Layout [ “Member List iOS” (MEMBER) ; Animation: None ]

  1. Using the Inspector, change the button's style to btn Minimal.Blue.Previous.
  2. Your layout should look similar to the screenshot below.
  1. Create another button in the Body part, below the member's name and total donations.
  2. In the Button Setup dialog:
    1. Display only an icon.
    2. Choose the mail envelope icon.
    3. Set the Action: to Perform Script.
    4. Select the Contact Member from iPhone(type) script from the list.
    5. For the Optional Script Parameter:, enter the formula: #( "type" ; "email" )
  1. Using the Styles tab of the Inspector, set the style for this button to btn Flat.Blue.
  2. On the Appearance tab of the Inspector, set the Corner radius to 30.
  1. Apply conditional formatting to the button by using the Format > Conditional... menu item. You can also right-click on the button and choose Conditional Formatting... from the contextual menu. 
    1. Click Add.
    2. Change the Condition to Formula is.
    3. Click Specify... and enter the formula: IsEmpty (MEMBER::Email).
    4. Check the Fill Color checkbox.
    5. Double-click the color box and change the value to “888888”. Press return to confirm the color. The picker window for the color will close automatically.
  1. In the Position tab in the Inspector, set the Autosizing options for this button to just a top anchor, as shown below.
  1. Duplicate this button. You can Copy and Paste the button or you can press Option on your keyboard and click and drag the button to obtain a duplicate.
    1. Change the Icon to a Phone icon.
    2. Specify a different Optional Script parameter. The parameter for this button is: #( "type" ; "phone" )
    3. Change the Conditional Formatting Formula for this button to IsEmpty (MEMBER::Phone)
  2. Organize and reposition the buttons so that your layout looks similar to the image below.
  1. Use the layout pulldown menu to navigate to to the Member List iOS layout.
  2. Add a button to the Body of the layout. Size the button to cover the entire body part. 
    1. Set the Action: for this button to Single Step.
    2. Set the step to

Go to Layout [ “Member Detail iOS” (MEMBER) ; Animation: None ]

  1. Set the button's style to btn Row.Hover.  
  2. Move the button to the background using the menu Arrange > Send to Back.
  3. Set the Autosizing options for this button as shown below.
  1. Add a second button to the body part of this layout. Do not assign any action to this button. Assign the Icon as shown below.
  1. Set the style to btn Minimal.Grey.
  2. Set top and right anchors in the Autosizing options for this button.
  1. Enter Browse mode to save and review your work.

Step 5 - Review your work

Congratulations! You have completed the Build-On for adding iPhone list and detail layouts.

  1. You can now navigate on your iPhone (or iPad) from a list view to a detail view and back.
  2. On the Member detail layout you can initiate a phone call or email to the current member.