Build-On Tutorial:

iPad Sign-In

iPad Sign-In: Lesson 2

Display Registration List and Check Attendees In

Lesson Overview

The objectives for this lesson are to display a registration list for a selected event and to check attendees in. You will use the tables, fields, and relationships that already exist in your file to accomplish these objectives.

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

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

First, you will create an iPad layout for displaying a list of attendees registered 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 | Registration List”
    2. Set the Show records from: to REGISTRATION
    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, fields, and text objects to the new layout so that it displays attendee registration data.

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

    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 merge variable by either typing it directly or using the Insert > Merge Field… or Insert > Merge Variable menu.
  1. Select the Body part handle and use the Position tab of the Inspector to resize the Height to 72 pt.
  2. Double-click on the g_Sample_Field field to open the Specify Field dialog.
    1. In the table drop-down, select the registration_ATTENDEE table occurrence. Note that while this layout displays records from the Registration table, the attendee information comes from the related Attendee table.
    2. In the resulting field list, select the Name_Last_First field.
    3. Exit the Specify Field dialog to save the field.
  1. Duplicate the Name_Last_First field and change it to Organization.
  2. Using the Styles tab in the Inspector, give the fields the following styles:
    1. Name_Last_First - style: txt Minimal.Black.Left.Bold
    2. Organization - style: txt Minimal.Black.Left
  3. Using the Position tab of the Inspector, set top, left, and right anchors in the Autosizing options for both fields.
  4. Adjust the widths and positions of the fields so yours looks similar to the image below.
  1. In the Registration table, an attendee’s check-in status is indicated by the number field Is_Checked_In, which contains a 1 if the attendee is checked in and is otherwise blank. In order to display the check-in status to the user in a natural way, you will create some text objects and use object visibility to show or hide them.

    Add a text object with the text “Checked In”.
    1. Set its style to Default Center.
    2. In the Data tab of the Inspector, set the Hide object when condition to the formula: not REGISTRATION::Is_Checked_In. This means the text will be hidden when the attendee is not checked in.
  1. Add another text object with the text “---“
    1. Set its style to label Center.
    2. Set its hide condition to: REGISTRATION::Is_Checked_In. This means the text will be hidden when the attendee is checked in.
  1. Stack and align the “Checked In” and “---“ text objects.
    1. Select both text objects by first clicking one and then Shift+clicking the other. You can also click and drag to select multiple objects.
    2. In Arrange & Align section on the Position tab in the Inspector, click the vertical alignment button and then the horizontal alignment button. The objects should now be stacked on top of each other and perfectly aligned.
  1. Position the text objects as shown below.
  1. Set top and right anchors in the Autosizing options for both objects.

Step 3 - Add a sub-summary to the layout

For events with many attendees, it will be helpful to group them by last initial, similar to what you might see in a contacts or address book app. To do this, you will create a new calculation field and add a sub-summary part to the layout.

  1. Open the Manage Database dialog and add a new calculation field to the Attendee table:
    1. Name the field “Name_Last_Initial”.
    2. Set the calculation formula to Left ( Name_Last ; 1 ).
    3. Set Calculation result is to Text.
  1. Return to the iPad | Registration 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 drop-down, choose registration_ATTENDEE, and then choose the field ::Name_Last_Initial.
    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 Name_Last_First field, change it to display Name_Last_Initial, and move it into the Sub-summary part.
  2. The completed layout should look as follows:
  1. Enter Browse mode to save and review your work.

Step 4 - Create a script to sort registrations

You will now create a script to sort registration records by attendee name. This script will be called as a subscript for other scripts you will write.

  1. Open the Script Workspace (Scripts > Script Workspace…). Because this layout uses a minimal custom menu set, you may 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 it to “iPad: Sort Registration” and move it into the iOS UI > iPad script folder.
  3. Modify the script to require the starting context to be the Registration table, and then sort by attendee last and first name. When more than 12 records are showing, which is roughly when the list is long enough to require scrolling on an iPad in portrait orientation, the sort should include the sub-summary grouping by last initial.

    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 ) ≠ "REGISTRATION" ]
   Show Custom Dialog [ “Alert" ; "This script can only be run from a Registration screen.” ]
   Exit Script [ Text Result: "error" ]
End If

# perform sort
If [ Get ( FoundCount ) > 12 ]
   # sort by last initial (for subsummary), then last/first name
   Sort Records [ Restore ; With dialog: Off ]
Else
   # otherwise just sort by last/first name
   Sort Records [ Restore ; With dialog: Off ]
End If
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 the right of the script step) to open the Show Custom Dialog Options dialog. Note that only the Default Button should be specified, with the button text “OK”. The information in Button 2 should be removed.
  1. For the Sort Records steps, double-click on the script step (or click the gear icon and select Specify sort order) to open the Sort Records dialog.

    In the first instance of this step, when the found count is more than 12 records, add the following fields to the Sort Order:
    1. registration_ATTENDEE::Name_Last_Initial
    2. registration_ATTENDEE::Name_Last
    3. registration_ATTENDEE::Name_First
    4. Set all fields to sort in Ascending order.
  1. Configure the second instance of the Sort Records step in the same way, but do not include Name_Last_Initial in the sort order. The sub-summary by last initial will not appear in this case.
  1. Save and close the script.

Step 5 - Create a script to display the registration list

Next you will create a script that displays the list of attendees registered for a selected event. This script will be run when the user taps an event record on the iPad | Event List layout.

  1. Duplicate the Template Script. Name the new script “iPad: Go to Event Registration List” and move it into the iOS UI > iPad script folder.
  2. Modify the script to require the starting context to be the Event table and then verify that registered attendees exist for the current event. Then set the selected event information to global variables, go to the related registration 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 registered attendees exist for this event
If [ IsEmpty ( event_REGISTRATION_Registered::ID ) ]
   Show Custom Dialog [ “Alert" ; "There are currently no registered attendees for this event.” ]
   Exit Script [ Text Result: $null ]
End If

# set selected event
Set Variable [ $$ID_EVENT ; Value: EVENT::ID ]
Set Variable [ $$EVENT_NAME ; Value: EVENT::Event_Name ]

# go to related active registration records
Go to Related Record [ Show only related records ; From table: “event_REGISTRATION_Registered” ; Using layout: “iPad | Registration List” (REGISTRATION) ]

# sort results
Perform Script [ Specified: From list ; “iPad: Sort Registration” ; 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_REGISTRATION_Registered. Note that there may be Registration records which have a canceled registration status; this special relationship is configured to only include registered attendees.
    2. Set Show record using layout: to iPad | Registration 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, you will now create buttons so that a user can select an event to view its registered attendees, 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 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 button, 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 Registration List script.
    3. Then 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 Autosizing 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 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 part. 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. Leave the Action: drop-down set to Do Nothing. This button will simply serve as a visual indicator for the user.
  1. User 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 | Registration 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 - Create buttons to check an attendee in

Now that you can take a user to the registration list for an event, your final task is create a button to check in attendees as well as a button to undo a check-in.

  1. Return to the iPad | Registration List layout in Layout mode.
  2. Create a new button at the right edge of the Body part. In the Button Setup dialog:
    1. Select the Display only a label button.
    2. Set the button label to “Check In”.
    3. Configure the button to run the script Update Check In Status ( status ). This script already exists in your file as there is a similar check-in function in the desktop interface.
    4. In the Optional Script Parameter: field, use the # custom function to pass the following name-value pair as a parameter: # ( “status” ; “toggle” ).

      Note: The # and #Assign custom functions are used to pass and parse parameters. The # custom function is generally used to define a script parameter and accepts a key-value pair; the #Assign custom function is called in the script and turns key-value pairs into script variables.
  1. Use the Inspector to further modify the button settings:
    1. Give it the Default style.
    2. Resize it to 144 pt wide and 44 pt tall.
    3. Set top and right anchors.
    4. Give it the following hide condition: REGISTRATION::Is_Checked_In. With this setting, the Check In button will only appear when the attendee is not checked in.
  1. Duplicate this button, and double-click on it to open the Button Setup dialog:
    1. Set the button label to “Undo”.
    2. You do not need to change the script or parameter. The “toggle” parameter tells the Update Check In Status (status) script to simply toggle the attendee’s check-in status, whatever it is.
  1. Further edit the button using the Inspector:
    1. Style it as btn Flat.White.
    2. Give it the following hide condition: not REGISTRATION::Is_Checked_In. With this settings, the Undo button will only appear when the attendee is checked in.
  1. Now stack the Check In and Undo buttons on top of each other using the vertical and horizontal alignment tools. Then re-position the buttons to match the image below.
  1. Enter Browse mode to save and review your work.

Step 8 - 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 registered attendees, 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 | Registration List layout displaying the list of registered attendees sorted by name. If there are more than 12 registered attendees, the list should be grouped by last initial.
  4. Find an attendee who is not checked in. Tap the Check In button. Their registration status should change to “Checked In”, and the Check In button should disappear and be replaced with the Undo button.
  5. Now tap the Undo button. Their registration status should change back to “---“ and the Check In button should appear again.
  6. Tap on the Event List button to return to the iPad | Event List layout.
  7. Once you have finished testing iPad functionality on your desktop device, choose the View > Status Toolbar menu to gain access to the FileMaker toolbars again.
  8. 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 check-in functionality on the iPad.