Build-On Tutorial:

iPhone Directory

iPhone Directory: Lesson 1

iPhone layout - Open App from iPhone

Lesson Overview

The objectives for this build-on are to create a member list layout for iPhone users. You will adjust the script that runs when the file is opened to take the user straight to that layout if you are using an iPhone (or iPad) and you will add two navigation buttons as
well.

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

Here’s a sneak peek of what you will build:

Step 1 - Create a new list layout for iPhone

Create the new iPhone layout by duplicating the existing Blank | iPhone - List 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 - List 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 List iOS”.
    2. Change the Show records from: dropdown to the MEMBER table occurrence. This setting determines the context of the layout.
    3. Click OK to exit dialog.
    4. Enter Browse mode (View > Browse Mode).
  1. Open the Manage Layouts dialog (File > Manage > Layouts …).
    1. Create a folder named “iPhone” by clicking the drop-down arrow next to the New button at the bottom of the Manage Layouts window.
    2. Select the iPhone folder and create a subfolder named "Member" (you can also create a new folder and drag it into the iPhone folder).
    3. Move the Member List iOS layout to the iPhone > Member folder by dragging it into it.
    4. De-select the Include in layout menus checkbox for the new folders and layout.
    5. Exit out of the Manage Layouts window. 

Step 2 - Create text objects and fields on the layout

You will set the correct title for the new layout, and you will change the context of the fields so the correct data will be shown.

  1. You should still be in Layout mode after completing Step 1. If not, re-enter Layout mode.
  2. Double-click the Title text object. Set the text to “Member List”.
  3. Double-click the first g_Sample_Field. The Specify Field window will open.
    1. Select Current Table (“MEMBER”) from the drop-down menu.
    2. Select the Member_Name field and then click OK.
  1. Repeat the previous step for the second g_Sample_Field but select the Type field.
  2. Your layout should look similar to the image below.
  1. Exit Layout mode to save your work.

Step 3 - Adapt the TRIGGER_onOpen script

The next step is to adapt the TRIGGER_onOpen script. This script runs when a user first opens the file. You are going to adapt it in such a manner that it will bring the user to the correct layout based on their device.

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. Open the General Scripts > Trigger_onOpen script.
  3. You will modify the script so that it navigates to the correct layout based on the user's device. Below is the complete script. The new steps you need to add are highlighted.

    At the end of the script there are script steps that you have to disable. Note This feature is available when the Use advanced tools general preference is selected.

    When they are disabled they will start with “//“. You can use the Edit > Disable menu item for this, or the keyboard shortcut Command-/ (macOs) / Control-/ (Windows).


    NOTE: Details about the Sort Records and Show Custom Dialog steps are shown in the next steps.

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

# navigate to the correct layout based on the system platform
If [_OS_iOS = True ]
       # Your system platform is iOS based. Therefore you will navigate to the layouts
optimized for iOS

       Go to Layout [ “Member List iOS” (MEMBER); Animation: None ]
       Sort Records [Restore ; With dialog: Off]
       Go to Record/Request/Page [ First ]

       #If the user opens the application on an iPad, a message will be shown warning
the user that the layouts for iOS are optimized for use on an iPhone.
       If [ _DEVICE_iPad = true //User logs in with an iPad ]
       Show Custom Dialog [ Title: "Warning"; Message: "This layout is optimized for
use on an iPhone"]
End If

Else

       Go to Layout [ “Dashboard” (_GLOBAL) ; Animation: None ]
       Adjust Window [ Resize to Fit ]
       Move/Resize Window [ Current Window; Width: Get(WindowWidth) + 16; Top: 0;
Left: 0 ]

       #setting global fields
       Perform Script [ Specified: From list ; “Set Global Fields” ; Parameter: ]

End If

If [ _OS_WebDirect = True ]
       #WebDirect User - Always show note about the app
       Show Custom Dialog [ Title: "Note"; Message: "This file is optimized for the
       desktop. It is the starting point to create your app.¶¶To optimize this for
       FileMaker WebDirect, reference the FileMaker WebDirect Guide" ]
       If [ Get(LastMessageChoice) = 2 // Close App ]
               Exit Application
       End If

// Else If [ _OS_iOS = True and $$hide_ios_message ≠ 1 ]
      // #iOS user and error message not yet suppressed
     // Show Custom Dialog [ Title: "Note"; Message: "This file is optimized for the
desktop. It is the starting point to create your app.¶¶Use one of the build-on files
to customize this app for your mobile device."]
     // If [ Get(LastMessageChoice) = 2 // Hide message moving forward ]
             // Go to Layout [ “z_Resource_DEV” (_RESOURCE) ]
            // Set Field [ _RESOURCE::Flag_Hide_iOS_Message; 1 ]
           // Go to Layout [ “Dashboard” (_GLOBAL) ; Animation: None ]
     // End If

End If
// Set Variable [ $$hide_ios_message; Value:"" ]
//
// Go to Layout [ “Dashboard” (_GLOBAL) ]

Exit Script [ Result: $null ]

  1. For the Sort Records step, sort the records based on MEMBER::Member_Name in Ascending order.
  1. For the Show Custom Dialog step, set the Title, Message, and Default Button to match the screenshot below.
  1. Save the script (Scripts menu > Save Script) and close the Script Workspace.

Step 4 - Review your work

Your file is now ready to use on a desktop by using FileMaker Pro Advanced as well as on an iOS device by using FileMaker Go. When you log in from an iOS-based device you will be redirected to the correct layout. Well done!

In the next lesson you will add a member detail layout on iPhone from where you can send email or make a phone call.

Also, because this file uses the _OS_iOS and _DEVICE_iPad functions, the iOS-specific features will not function properly if tested from the desktop. Be sure to test iPhone functionally with an iPhone. For more on sharing files with FileMaker Go clients, see FileMaker Help.

To test:

  1. Using an iPhone, log in to your app using FileMaker Go. You should see an iPhone- specific member list layout, organized alphabetically.
  2. Using an iPad, log in to your app using FileMaker Go. You should see the same layout as for the iPhone, but with a notification that the layout is optimized for iPhone.