Build-On Tutorial:

iPad Schedule

iPad Schedule: Lesson 2

Display Schedule for a Selected Event

Lesson Overview

The objective for this lesson is to display a list of sessions for a selected event. You will use the tables, fields, and relationships that already exist in the Event Management Template core file to accomplish these objectives.

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

Step 1 - Create an iPad layout to display a session list

First, you will create an iPad layout for displaying a list of sessions for an event.

  1. Open the Manage Layouts dialog and duplicate the Blank | iPad - List layout.
  2. Using the Layout Setup dialog, make the following changes to the new layout:
    1. Set the Layout Name to “iPad | Session List”
    2. Set the Show records from: to SESSION
    3. Set the Menu Set: to Minimal
  3. Move the new layout to the iOS > iPad folder.

Step 2 - Add text and fields to the layout

Next you will add merge variables and fields to the new layout so that it displays session data.

  1. Navigate to the new iPad | Session List layout in Layout mode.
  2. Edit the “Title” text in the header to “<<$$EVENT_NAME>>”.

    The << >> syntax indicates a merge field or variable, and the $$ prefix indicates the object is a global variable. In a later step you will write a script that sets the global variable $$EVENT_NAME. Note that you can insert a merge field or variable by either typing it directly or using the Insert > Merge Field… or Insert > Merge Variable menu.
  1. Select the Body layout part handle and use the Position tab of the Inspector to resize it to 72 pt tall.
  2. Double-click on the g_Sample_Field field to open the Specify Field dialog.
    1. In the table occurrence drop-down, select Current Table (“SESSION”).
    2. In the field list, select Session_Name.
  1. Duplicate the Session_Name field twice and modify the new fields to display Location and Category.
  2. Using the Styles tab in the Inspector, give the fields the following styles:
    1. Session_Name - style: txt Minimal.Black.Left.Bold
    2. Location - style: txt Minimal.Black.Right
    3. Category - style: txt Minimal.Gray.Right
  3. Now you will add a merge field to display the start and end times.
    1. Choose the Insert > Merge Field… menu and insert the Time_Start field.
    2. Double-click into the “<<Time_Start>>” text, move your cursor to the end of the text, and type “ - “ (a space, a hyphen, and a space).
    3. With your cursor still in the text object, insert another merge field, and this time choose Time_End. The text object should now display “<<Time_Start>> - <<Time_End>>”.
    4. Style the merge field text object as Label Left.
  4. With the time display merge field still selected, use the Data Formatting section of the Data tab of Inspector to specify Time formatting, formatted as hhmm and 12 hour.
  1. Adjust the widths and positions of the fields so yours look similar to the image below.
  1. Using the Position tab of the Inspector, set Autosizing options for the fields as follows:
    1. Session_Name field: top, left, right anchors.
    2. Location, Category fields: top, right anchors.
    3. Time display merge fields: top, left anchors.
  2. Enter Browse mode to save and review your work.

Step 3 - Add a sub-summary to the layout

For events that span multiple days, it will be helpful to group the sessions by date. To do this, you will add a sub-summary part to the layout.

  1. Return to the iPad | Session List layout in Layout mode. Open the Part Setup dialog (Layouts > Part Setup…) and create a new part.
    1. Choose Sub-summary when sorted by.
    2. The table and field boxes will now be active. In the table occurrence drop-down, choose Current Table (“SESSION”), and then choose the field Date.
    3. Click OK, and then choose Print Above so that the sub-summary will appear above the records that it summarizes.
  1. Back in the layout, select the new Sub-summary part handle, set the Height to 54 pt, and assign the style background MedGray.
  1. Duplicate the Session_Name field, change it to display the Date field, and move it into the Sub-summary part.
  1. Select the Date field, and use the Data Formatting section of the Data tab in the Inspector to specify Date formatting: 
    1. Set the Format to Thursday, December 25, 2014.
    2. In the Leading character section, set leading Zero for both day numbers and month numbers.
  2. Enter Browse mode to save and review your work.

Step 4 - Create a script to sort sessions

You will now create a script to sort session records by date and time. This script will be called as a subscript for other scripts you will write.

  1. Open the Script Workspace (Scripts > Script Workspace…).
  2. Duplicate the Template Script. Rename it to “iPad: Sort Session” and move it into the iOS UI > iPad script folder.
  3. Add the highlighted script steps to modify the script to require the starting context to be the Session table, and then sort by session date, time, and name.

    NOTE: For additional details on the Show Custom Dialog and Sort Records script steps, see Steps 4 and 5 below.

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

# required context
If [ Get ( LayoutTableName ) ≠ "SESSION" ]
   Show Custom Dialog [ “Alert" ; “This script can only be run from a Session screen.” ]
   Exit Script [ Text Result: "error" ]
End If

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

Exit Script [ Text Result: $null ]

  1. For the Show Custom Dialog script step, double-click the script step (or click the gear icon) to open the Show Custom Dialog Options dialog. Amend it so only the Default Button is be specified, with the button text “OK”. The information in Button 2 should be removed.
  1. For the Sort Records step, double-click on the script step (or click the gear icon and select Specify sort order) and add the following fields to the Sort Order:
    1. SESSION::Date
    2. SESSION::Time_Start
    3. SESSION::Session_Name
    4. Set all fields to sort in Ascending order.
  1. Save and close the script.

Step 5 - Create a script to display the session list

Next you will create a script that displays the list of sessions for a selected event. This script will be triggered when the user taps on an event record on the iPad | Event List layout. Note the potential errors it tests for before navigating to the session list.

  1. Duplicate the Template Script. Name the new script “iPad: Go to Event Session List” and move it into the iOS UI > iPad script folder.
  2. Add the highlighted script steps to modify the script to require the starting context to be the Event table and then verify that sessions exist for the current event. Then set the selected event information to a global variable and field, go to the related session records, and sort them.

    NOTE: For additional detail on the Show Custom Dialog and Go to Related Record script steps, see Steps 3 and 4 below.

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

# context requirements
If [ Get ( LayoutTableName ) ≠ "EVENT" ]
   # required table context
   Show Custom Dialog [ “Alert" ; “This script can only be run from an Event screen.” ]
   Exit Script [ Text Result: "error" ]
Else If [ Get ( FoundCount ) = 0 or IsEmpty ( EVENT::ID ) ]
   # require record showing
   Show Custom Dialog [ “Alert" ; ”This script can only be run with an Event record displayed.” ]
   Exit Script [ Text Result: "error" ]
End If

# verify sessions exist for this event
If [ IsEmpty ( event_SESSION::ID ) ]
   Show Custom Dialog [ “Alert" ; "There are currently no sessions for this event.” ]
   Exit Script [ Text Result: $null ]
End If

# set selected event
# - note: for event ID we need a global field, rather than a global variable, in order to drive value lists for related session date and category
Set Field [ _GLOBAL::g_ID_Event_Selected ; EVENT::ID ]
Set Variable [ $$EVENT_NAME ; Value: EVENT::Event_Name ]

# go to related session records
Go to Related Record [ Show only related records ; From table: “event_SESSION” ; Using layout: “iPad | Session List” (SESSION) ]

# sort results
Perform Script [ Specified: From list ; “iPad: Sort Session” ; Parameter: ]

Exit Script [ Text Result: $null ]

  1. For the three Show Custom Dialog script steps, only the Default Button should be specified, with the button text “OK”.
  2. For the Go to Related Record step, double-click on the step (or click the gear icon) to open the Go to Related Record Options dialog.
    1. Set Get related record from: to event_SESSION.
    2. Set Show record using layout: to iPad | Session List.
    3. Check the Show only related records box along with the Match current record only option.
  1. Save and close the script.

Step 6 - Add navigation buttons

With the basic navigation scripts in place, now you can create buttons so a user can select an event to view its sessions, and then return back back to the list of events.

  1. Enter Layout mode and navigate to the iPad | Event List layout.
  2. For selecting an event, you will place an invisible button over the entire Body layout part. To start, activate the Button tool.
  1. Using the Button tool, draw a button over the entire Body. In the resulting Button Setup dialog:
    1. Select the Display only a label icon, but leave the label blank.
    2. In the Action drop-down, choose Perform Script, and in the resulting Specify Script dialog, choose the iPad: Go to Event Session List script.
    3. Close the Button Setup dialog.
  1. For now, your button will look similar to this image.
  1. Use the Inspector to finish configuring the button.
    1. Set the style of the button to btn Row.Hover. Note that this makes the button invisible, including while in Layout mode (though you can still select it and see its boundaries when selected).
    2. Set the button Width to 768 pt and Height to 80 pt.
    3. Position the button at Left = 0 pt and Top = 88 pt so that it is situated entirely within the Body part.
    4. Set top, left, and right anchors in the Autoresizing options for the button.
    5. In the Arrange & Align section of the Inspector, click the Send to back button so that the button lies underneath all of the other objects in the Body layout part.
  1. The finished button, when selected, should look similar to this.
  1. Use the Button tool to create another button at the right edge of the Body. In the Button Setup dialog:
    1. Select the Display only an icon button, and then choose the arrow icon highlighted below.
    2. Set the icon size to 16 pt.
    3. In the Action drop-down, leave as Do Nothing. This button will simply serve as a visual indicator for the user.
  1. Use the Inspector to finish configuring the button.
    1. Set the style of the button to btn Minimal.Blue.Next.
    2. Resize the button to 32 pt wide and 64 pt tall.
    3. Set top and right anchors, and place it as shown below.
  1. Enter Browse mode to save and review your work.
  2. Return to Layout mode and go to the iPad | Session List layout.
  3. Create a new button at the right edge of the Header part. In the Button Setup dialog:
    1. Select the Display only a label button.
    2. Set the button label to “Event List”.
    3. Configure the button to run the script iPad: Go to Event List script.
  1. Put the following finishing touches on the button:
    1. Give it the style btn Minimal.Blue.Next.
    2. Resize it to 128 pt wide and 56 pt tall. 
    3. Set top and right anchors.
    4. Position it as shown below.
  1. Enter Browse mode to save and review your work.

Step 7 - Review your work

  1. With the file open using FileMaker Pro Advanced on your desktop, go to the Event Detail layout, identify an event with sessions, and flag the event for mobile access.
  2. Now open the Script Workspace, select the iPad: Startup script, and manually run it. You should be taken to the iPad | Event List layout.
  3. Tap on the event you identified above. You should then be taken to the iPad | Session List layout displaying the list of sessions, grouped by date, and sorted by time and name.
  4. Tap on the Event List button to return to the iPad | Event List layout.
  5. Once you have finished testing iPad functionality on your desktop, choose the View > Status Toolbar menu to gain access to the FileMaker toolbars again.
  6. 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 can repeat the above steps to test the functionality on the iPad.