Build-On Tutorial:

iPad Time Entry

iPad Time Entry: Lesson 1

Open App from iPad

Lesson Overview

The objectives for this build-on are to create a new time entry layout for iPad users and to adjust the script that runs when the file is opened to take the user straight to that layout if they are using an iPad. You will use the tables, fields, and relationships that already exist in the Job Tracking Template core file to accomplish these objectives.

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

Step 1 - Create the layout

Create the new iPad layout by duplicating the existing Blank | iPad - 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 | iPad - 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 "iPad | Time Entry".
    2. Change the Show records from: dropdown to the STAFF table occurrence. This setting determines the context of the layout.

      Note: The iPad layout has been sized smaller than a standard iPad size. You may later decide to resize this layout based on the size of your iPad.

Step 2 - Add fields to the layout

Next, you will add fields and text objects to the new layout and specify styles for them using the Inspector tool.

  1. You should still be in Layout mode after completing Step 1. If not, re-enter Layout mode.
  2. Double-click on the "Title" text in the header so you can edit it. Change the text to "Time Entry".
  1. Using the Fields tab, drag and drop the Photo field to the body of the layout. (If the Fields tab is not open, click the objects pane icon in the status toolbar, then click Fields.) Update the size and position of the Photo field (via the Position tab in the Inspector) to match the screenshot below:
  1. Add two Merge Field objects to the layout:
    1. Select Insert > Merge Field.... Select the STAFF table from the drop down menu and add the z_Name_Display field to the layout. Move field over to give space to add another merge field.
    2. Select Insert > Merge Field.... Select the STAFF table from the drop down menu and add the Title field to the layout.

      Note: Merge fields are text objects that show field data. Users cannot click into them or modify them as they can with regular field objects.
  2. Open the Inspector using the View > Inspector menu item (you can also access it using keyboard shortcut Command-I (macOS) / Control-I (Windows)).
  3. Activate the Styles tab of the Inspector, which is used for specifying object styles.
  1. Select the Photo field on the layout and apply the container Minimal style for it in the Inspector.
  2. Similarly, select and assign styles to the two merge fields:
    1. z_Name_Display: style as headline Left
    2. Title: style as label Left
  3. Select the first tab of the Inspector and set the Autosizing options for both merge fields to anchor top, right, and left. This will allow the fields to stretch horizontally across the layout if the window size is increased.
  1. Position the objects as you see in the screenshot below.

Step 3 - Add a master-detail portal

To show a list of all staff members, you will add a master-detail portal to the layout. This will allow a manger to select a staff member to enter time for.

  1. Select the Portal tool from the status toolbar and draw a tall rectangle along the entire left side of the Body part.
  1. In the subsequent Portal Setup dialog:
    1. Set the Show records from: option to Current Table ("STAFF")
    2. Set Show scroll bar: to When scrolling
    3. Set Number of rows: to 10
    4. Un-check Use alternate row state
    5. Check Use active row state
  1. Next, in the Add Fields to Portal dialog, select the Name_Full and Photo fields and move them to Included fields. Click OK to complete the portal setup.
  2. Use the Styles tab of the Inspector to assign the masterdetail Docked style to the new portal.
  3. Activate the Position tab of the Inspector (the first one) and set the Position and Size as follows:
    1. Set the Left position to 0 pt.
    2. Set the Top position to 72 pt.
    3. Set the Width to 224 pt.
    4. Set the Height to 600 pt.
  4. Set the Autosizing options for the portal to anchor top, left, and bottom. This will allow the portal to stretch vertically to fill the Body of the layout.
  1. Within the portal, style the Name_Full field as txt Minimal.Black.Left, and the Photo field as container Minimal.
  2. Set conditional formatting for the Name_Full field in the portal so that the text appears white when that row is selected.
    1. Right-click (or Control-click) on the field and select Conditional Formatting... from the contextual menu.
    2. Click Add, then select the Text Color checkbox and choose white as the color.
    3. In the Condition section, set the dropdown option to Formula is.
    4. Click the Specify... button and enter the following formula in the resulting calculation dialog: Get (RecordNumber) = Get (ActiveRecordNumber)
  1. Finally, make any adjustments needed so that your layout closely matches the one shown below. Then, use the Exit Layout button to return to Browse mode and review your progress so far.

    Note: You can also enter Browse mode using the View > Browse Mode menu item, or the keyboard shortcut Command-B (macOS) / Control-B (Windows).

Step 4 - Update photo fields

Add placeholder images for staff members who do not have a photo. You will do this for both Photo fields on the layout.

  1. Enter Layout mode.
  2. Use the Button tool in the status toolbar to create a button (anywhere on the layout is fine for now).
  1. Select the Display only an icon button at the top of the resulting Button Setup dialog, and then select the circled silhouette icon. Set the icon size to 60 pt.
  1. Close the Button Setup dialog.
  2. On the Styles tab of the Inspector set the style of the button to btn.Minimal.Container Icon.
  3. Duplicate the button (Command-D (macOS) / Control-D (Windows)).
  4. Size and place one of the buttons to fit over the Photo field in the body, and the other to fit over the Photo field in the portal. For the button over the portal Photo, use the Button Setup dialog to reset the icon size to 28 pt.
  5. Select both buttons, and then use the Data tab of the Inspector to set a Hide condition for each as shown below. The buttons should be hidden when: not IsEmpty (STAFF::Photo). By doing this, users will only see the silhouette icons for staff members without photos.
  1. In Layout mode, your layout should now look similar to the following:

Step 5 - Update scripts

In the template core 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. These changes make use of two custom functions already added to the core file (_DEVICE_Desktop and _DEVICE_iPad).

Note: the Build-On for iPad attachments also redirects users to an iPad layout in the opening script. If you plan to add both iPad build-ons, you will need to choose where to direct iPad users when they open the file. You may want to add an additional iPad home page with navigation, so mobile users can choose whether to enter time or add attachments.

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...) and select the TRIGGER_On Open script from the list of scripts on the left of the dialog. (General > TRIGGER_On Open)
  2. Modify the script so that the user is taken to the Dashboard layout if they are on a desktop and to the new iPad layout if they are on an iPad. The new steps you need to add are highlighted below.

If [_DEVICE_Desktop = True]
   # if user is on desktop, go to desktop layout.     

   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 ]

Else If [_DEVICE_iPad = True ]
   # If the user is on iPad, go to iPad layout.     
   Go to Layout [ "iPad | Time Entry (STAFF) ; Animation: None ]
End If

  1. Add another If block around the final Go To Layout step. These steps will navigate iPad users back to the new iPad layout and show the current user's information.

    All staff, sorted by full name, will be shown in the portal. Setting the zoom level to Lock: On; 100% disables the zoom feature on the iPad so users don't accidentally zoom in, and Show/Hide Toolbars hides the FileMaker toolbars, resulting in a more "iOS" user experience.

    NOTE: See the next step for details on the Sort Records script step options.

If [ _DEVICE_Desktop = True ]    

  Go to Layout [ "Dashboard" (_GLOBAL) ; Animation; None ]

Else If [ _DEVICE_iPad = True ]     
   Go to Layout [ "iPad | Time Entry (STAFF) ; Animation: None ]     
   Show All Records     
   Sort Records [ Restore ; With dialog: Off ]     
   Set Zoom Level [ Lock: On ; 100% ]     
   Show/Hide Toolbars [Hide]
End If

  1. Update the Sort Records step to sort by first name, ascending using the Name_Full field:
    1. Select the gear icon at the end of the script step and select Specify.
    2. In the Sort Records dialog, select the Name_Full field from the left and click Move.

Step 6 - Review your work

  1. Using an iPad, open the file using FileMaker Go. The Time Entry detail layout should open by default.
  2. If you add the STAFF::Username field to the Staff Detail layout, and populate that field with the staff member’s username, you will get extra functionality with this Build-On. If the user has a staff record with their username, when they log in on an iPad, their name should be highlighted in the master-detail portal on the left, and their name, title, and photo should appear in the body. Test this by adding the Username field to the Staff Detail layout and testing as a staff member.
  3. The left pane should show a list of all staff, and it should be sorted by full name.
  4. You should not be able to zoom in.
  5. As you tap through different staff names in the master-detail portal, the body of the layout should update with the correct name, title, and photo.
  6. You should see a placeholder icon for any staff member without a photo.