Build-On Tutorial:

iPad Sign-In

iPad Sign-In: Lesson 1

Open App from iPad and Display Event List

Lesson Overview

The objectives for this lesson are to flag events for mobile access, to create a new event list layout for iPad users, and to create and modify scripts that run when the file is opened to take the user straight to that layout if they are using an iPad. You will primarily use the tables, fields, and relationships that already exist in the Event Management Template core file to accomplish these objectives.

Note: This lesson is nearly identical to Lesson 1 of the iPad Schedule Build-On, with the exception of the title text in the layout header. If you have already completed that Build-On, you can simply adjust the layout title and otherwise skip this lesson.

Here is a sneak peek of what you will build:

Step 1 - Create new field to flag events for mobile access

The first step is to create a field to indicate an event is available for viewing on the iPad.

  1. Open the Manage Database dialog (File > Manage > Database…) and activate the Tables tab.
  2. Double-click on the Event table to see the list of fields it contains.
  3. Add a new number field to the Event table named “Is_Available_on_Mobile”.
  1. Close the Manage Database dialog to save the new field.

Step 2 - Add the field to the event layout

Next, add the new field to the Event 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 Desktop > Event > Event Detail layout.
  3. Duplicate the Address_City field by selecting it and then selecting Edit > Duplicate from the menu, or the keyboard shortcut Command-D (macOS) / Control-D (Windows). In the Specify Field dialog, choose Current Table (“EVENT”) from the table drop-down, and in the field list, choose the Is_Available_On_Mobile field you just created. Position it just below the address fields.
  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 new field, and then use the Inspector to set the Control style to Checkbox Set. Click the pencil icon next to the Values from: option. This will take you to the Manage Value Lists dialog.

    Note: You can also get to the Manage Value Lists dialog using the File > Manage > Value Lists… menu option.
  1. In the Manage Value Lists dialog, create a new value list called "Checkbox", with a single custom value of 1.
  1. Close the Manage Value Lists dialog to save the new value list.
  1. Activate the Position tab of the Inspector.
  1. With the Is_Available_On_Mobile field still selected, use the Inspector to set both the Width and Height of the field to 24 pt.

    Note: If the units are currently displayed as in (inches) or cm (centimeters), click on a unit label repeatedly to toggle through the units until pt (points) is displayed.
  1. Activate the Styles tab of the Inspector.
  1. With the checkbox field still selected, apply the style checkbox 18pt.
  2. Duplicate the “Location” field label and change the text to “Available on Mobile App”.
  3. Position the new field and label as follows:
  1. Enter Browse mode to save and review your work.

Step 3 - Create an iPad layout to display events

Next you will create an iPad layout for displaying events that have been flagged for mobile access. Create the new layout by duplicating the existing Blank | iPad - List layout.

  1. Open the Manage Layouts dialog (File > Manage > Layouts…).
  2. Locate the Blank > Blank | iPad - List layout and Duplicate it.
  3. With the new layout selected, click the Edit button (or double-click on the layout name) to open the Layout Setup dialog, and make the following changes:
    1. Set the Layout Name to "iPad | Event List"
    2. Set the Show records from: to EVENT
    3. Set the Menu Set: to Minimal

      Note: The Event Management Template file includes a custom menu set called "Minimal." There are cases when you do not want users to be able to use every menu function available to them, like when they are in a card window for a specific step. The Minimal menu set restricts users to working only with the layout and found set they are presented with. Use this when you want to tightly control what a user is able to do.
  1. Back in the Manage Layouts dialog, move the layout into the iOS > iPad folder.
  1. Note: The blank iPad layout has been sized for a width of 768 pt to match FileMaker’s Screen Stencil width for iPad portrait orientation. You may later decide to resize this layout based on the size of your iPad.

Step 4 - Add parts, text, and fields to the layout

Next, you will add parts, fields, and text to the new layout so that it displays event data.

  1. With the Manage Layouts dialog still open, select the new iPad | Event List layout and click the Open button to open it. Then enter Layout mode.
  2. Edit the "Title" text in the header and change it to “Event Registration”.
  1. Select the g_Sample_Field. In the Data tab of the Inspector, note that the field does not allow entry in Browse mode. The iPad layouts that you create in this build-on will be read-only, so all fields should share this setting.

    Double-click on the g_Sample_Field field to open the Specify Field dialog. In the table occurrence drop-down, choose Current Table (“EVENT”), and in the field list, choose Event_Name.
  1. Duplicate the new Event_Name field twice, and change the duplicated fields to display Date_Start and Location.
  2. Using the Styles tab in the Inspector, give the fields the following styles:
    1. Event_Name - style: txt Minimal.Black.Left.Bold
    2. Date_Start - style: txt Minimal.Black.Right
    3. Location - style: txt Minimal.Gray.Right
  3. Adjust the widths and positions of the fields so yours looks similar to the image below.
  1. Select the Position tab of the Inspector and set the Autosizing options for the fields as follows:
    1. Event_Name: top, left, and right anchored. This will allow the field to stretch horizontally across the layout when the iPad is rotated from portrait to landscape orientation.
    2. Date_Start and Location: top and right anchored. This will keep the fields anchored to the right side of the layout when the iPad is rotated.
  1. Select the Date_Start field, and use the Data Formatting section of the Data tab of the Inspector to specify Date formatting, format as 12/25/2014, and include leading Zero for both day and month numbers.
  1. Open the Part Setup dialog (Layouts > Part Setup…) and create a new Trailing Grand Summary part. This part will be used to display a message when no records are found. This additional layout part is necessary because the Body part is not displayed on a list layout when no records are showing.
  1. Back on the layout, select the new Trailing Grand Summary part handle (as shown below), and using the Inspector, modify it as follows:
    1. In the Position tab, set its Height to 80 pt.
    2. In the Styles tab, set its style to background Minimal.White.
  1. Click anywhere in the Trailing Grand Summary part, and start typing to create a new text object with the text “No events are currently available for mobile access.” Position the text as shown here.
  1. The Trailing Grand Summary part is always displayed on a layout, but users should only see the “No events…” text if no events are found. To achieve that, select the text object, and then go to the Data tab in the Inspector. In the Hide object when section, set the hide condition to the formula: Get ( FoundCount ) > 0
  1. Enter Browse mode to save and review your work.

Step 5 - Create a script to show events flagged for mobile access

You will now create a script that will find events available for display on the iPad and sort them.

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…). Because this layout uses a minimal custom menu set, you will not see these options in Browse mode. Either open the Script Workspace while you are in Layout mode, or change your menus by selecting the Tools > Custom Menus > [Standard FileMaker Menus] menu item.
  2. Duplicate the Template Script. Rename the script to “iPad: Go to Event List” and move it into the iOS UI > iPad script folder.

    Note: Any time you copy the template script, be sure to move the script to an appropriate folder, and amend the comments at the top to fit your current script.
  1. Modify the script so that it goes to the iPad | Event List layout, finds all events flagged for mobile access, and then sorts the resulting found set by date and name.

    NOTE: See Step 4 for detail about the Sort Records script step.

Allow User Abort [ Off ]
Set Error Capture [ Off ]
Enter Browse Mode [ Pause: Off ]
Freeze Window

# layout nav
Go to Layout [ “iPad | Event List” (EVENT) ; Animation: None ]

# find all events available for mobile
Enter Find Mode [ Pause: Off ]
Set Field [ EVENT::Is_Available_On_Mobile ; 1 ]
Set Error Capture [ On ]
Perform Find [ ]
Set Error Capture [ Off ]

# sort by event date (asc), then name
Sort Records [ Restore ; With dialog: Off ]
Go to Record/Request/Page [ First ]

Exit Script [ Text Result: $null ]

  1. For the Sort Records step, click the gear icon next to the script step, select Specify sort order, and add the following fields to the Sort Order:
    1. EVENT::Date_Start
    2. EVENT::Event_Name
    3. Set both fields to sort in Ascending order
  1. Save and close the script.

Step 6 - Create an iPad startup script

Next, you will create a script that will initialize the iPad user interface. This includes setting toolbar and zoom options, as well as running the iPad: Go to Event List script you created above.

Later on in Step 7 you will modify the script that runs when the file is opened to call this script when the user is on an iPad. This script can also be run manually to simulate the iPad experience on the desktop, which is helpful for testing purposes as you develop. You will learn how to manually trigger a script at the end of this lesson.

  1. Create another new script by duplicating the Template Script.
    1. Name the script “iPad: Startup”
    2. Move it into the iPad folder.
  2. Modify the script by adding the highlighted steps below.

    NOTE: See step 3 for details about the Show/Hide Toolbars script step.

    Note that this and other scripts make use of device-related custom functions like _DEVICE_Desktop and _DEVICE_iPad that have already been added to your file. In this case, _DEVICE_Desktop is used to allow simulating the iPad experience on the desktop.

Allow User Abort [ Off ]
Set Error Capture [ Off ]
Enter Browse Mode [ Pause: Off ]
Freeze Window

# client settings
If [ _DEVICE_Desktop ]
   # for testing on desktop: resize window to simulate iPad screen
   Show/Hide Toolbars [ Hide ]
   Move/Resize Window [ Current Window ; Height: 916 ; Width: 768 ]
Else
   # for FileMaker Go users: retain menu bar; hide/lock toolbars; lock zoom
   Show/Hide Toolbars [ Lock ; Include Edit Record Toolbar ; Hide ]
   Set Zoom Level [ Lock: On ; 100% ]
End If

# handle initial layout and found set
Perform Script [ Specified: From list ; “iPad: Go to Event List” ; Parameter: ]

Exit Script [ Result: $null ]

  1. For both Show/Hide Toolbars script steps, select Hide. For the second one, click the gear icon at right and select both the Lock and Include Edit Record Toolbar options.
  1. Save and close the script.

Step 7 - Update the file's opening script

In your file, a script manages some actions that occur when the file is first opened. You will modify that script so it will check which device the user is on (desktop or iPad) and then navigate to an appropriate layout.

  1. In the Script Workspace, open the TRIGGER On Open script.
  2. Modify the script so that the user is taken to the iPad layout if they are on an iPad.

    Start by enabling the existing Else If script step that checks for iPad users using the _DEVICE_iPad custom function. Script steps may be enabled or disabled using the Edit > Enable and Edit > Disable menu items, or typing Command-/ (macOS) / Control-/ (Windows)).

    Then add a Perform Script step that calls the new iPad: Startup script.

# handle device-specific UI
If [ $null ]
   # placeholder //
Else If [ _DEVICE_iPhone5 ]
   // # iPhone UI placeholder
Else If [ _DEVICE_iPad ]
   Perform Script [ Specified: From list ; “iPad: Startup” ; Parameter: ]
Else
   # default is desktop UI
   Perform Script [ Specified: From list ; “Desktop Startup” ; Parameter: ]
End If  

  1. Save and close the script.

Step 8 - Review your work

  1. With the file open using FileMaker Pro Advanced on your desktop, open the Script Workspace and select and manually run the iPad: Startup script by clicking the Play button at top.
  1. You should be taken to the iPad | Event List layout. Assuming you have not flagged any event records for mobile access yet, you should see the message “No events are currently available for mobile access.”
  2. The iPad: Startup script hides the status toolbar, so choose the View > Status Toolbar menu item to gain access to it again. Then go to Layout mode and navigate to the Event Detail layout and enter Browse mode and flag a few event records for mobile access.
  3. Manually run the iPad: Startup script again. This time the iPad | Event List layout should display the records you flagged above.
  4. Once you have finished testing iPad functionality on your desktop, choose the View > Status Toolbar menu to show the toolbar again.
  5. Now, transfer the file to your iPad and open it (or host the file with FileMaker Server and open it remotely). The iPad | Event List layout should open by default and you should see the same event records flagged for mobile access.

    Note: When opening your file for the first time on an iPad, you will see a message saying the file is optimized for the desktop. Select Don’t show this again to hide this message in the future. You may also choose to modify the TRIGGER On Open script by disabling the steps that check the user’s operating system and display this message when applicable, as shown below.