Build-On Tutorial:

iPad Time Entry

iPad Time Entry: Lesson 3

Enter New Time Entry from iPad

Lesson Overview

The objectives for this lesson are to create two new layouts and some scripts so that iPad users can enter time against tasks directly from the iPad. You will continue working with the iPad time entry layout that you built in lessons 1 and 2.

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

Step 1 - Create a new layout: Task List

First, create a new layout to show a list of tasks.

  1. Using the Manage Layouts dialog, create a new iPad list layout by duplicating the existing Blank | iPad - List layout and place it in the iPad > iPad Time Entry lauout folder.
  2. Rename the new layout to “iPad | Time Entry - Task List”.
  3. Set Show records from: to TASK.
  4. Open the new layout and go into Layout mode.
  5. This layout will be used as a card window, so you want to make it smaller than the standard layouts. Adjust the width of the layout to be 448 pt wide by dragging the gray line on the right side of the layout.

    NOTE: You can see the Width in the Position tab of the Inspector.
  6. Adjust the height of the Header to 152 pt and the Body to 72 pt (leave the Footer as is). You can drag the part label or part boundary (the line that marks the bottom of the part) until the part is the correct height in the Position tab of the Inspector.
  7. Delete all of the objects on the layout.

Step 2 - Add fields

  1. On the new task list layout, add the following fields from the TASK table occurrence to the Body of the layout (do not include labels when you add new fields):
    1. Task_Name: style it as txt Minimal.Black.Left.
    2. Date_Due: style it as txt Minimal.Gray.Right.
    3. In the Data tab of the Inspector adjust the Data Formatting for the Date_Due field to format as 12/25/14 with Zero as the leading character for day numbers and month numbers.
  2. Add the following field from the task_STAFF table occurrence:
    1. Name_Full: style it as txt Minimal.Gray.Left.
    2. Arrange the fields to resemble the screenshot below:
  1. Using the Text tool, add “Choose Task” to the Header, and style it as headline Left.
  2. Users might be unaware of what the date on the layout represents. To make it clear that this field is the “Due Date” for the task, add a text object to the body as follows:
    1. Add the text “Due Date” to the body (place it directly below the Date_Due field) and style it as Label inPortal.Right.
    2. You do not want to see this text if there is not a due date set. Select the "Due Date" text object and navigate to the Data tab of the Inspector. Under Hide object when, enter IsEmpty ( TASK::Date_Due ).
  3. In a later step, you will adjust the layout so that the user can select a task to assign time to it. You want them to be aware of this action, so add a button to this layout that will indicate to the user that they can select a task. Add a new button the body of the layout (to the right of the Date_Due field).
    1. In the Button Setup dialog, select the Display only an icon option
    2. Select the right arrow icon.
    3. Leave the Action as Do Nothing.
    4. Style the button as btn Minimal.Blue.Next, and adjust the Autosizing of the button to anchor top and right.
  1. Your layout should look similar to this:

Step 3 - Add a sub-summary part

A sub-summary part usually contains one or more summary fields that display “sub-summary” information for a subset of records. The records are grouped (sorted) by values in another field, referred to as the break field. Whenever the value of the break field changes, the report “breaks” and FileMaker Pro Advanced inserts the sub-summary part.

For this layout, you want to group the tasks by job name, so you will use a sub-summary part to “break” the tasks by job. You will use the Job_Name as the break field.

  1. Using the Part Setup dialog (Layouts > Part Setup...), create a new layout part..
  2. Select Sub-summary when sorted by.
  3. Select the task_JOB::Job_Name field on the right and click OK.
  1. In the subsequent prompt, select Print Above and then click Done.
  2. Style the sub-summary part of the layout as background MedGray.
  3. In the Position tab of the Inspector, set the height of the part to 64 pt.
  4. Add the task_JOB::Job_Name field (to the sub-summary part and style it as txt Minimal.Black.Left.Bold). Adjust the Autosizing to anchor top, left, and right.
  1. Go into Browse mode (Command-B (macOS) / Control-B (Windows)), and select Sort from the status toolbar.
  2. In the Sort Records dialog, add the task_JOB::Job_Name field to the sort order and sort the records only on that field.
  3. You do not want users to be able to edit any of the data from this layout, so you will need to disable data entry (unless the user is in Find mode). Go into Layout mode and with all of the fields selected, navigate to the Data tab of the Inspector, and under Field Entry uncheck Browse Mode.
  4. Your layout should look similar to this:

Step 4 - Add a new time entry layout

You will now create another card window layout for entering time. Your file already has a card window for time entry, so you can duplicate that layout.

  1. Duplicate the existing Time Entry | Card layout.
  2. Rename the layout “iPad | Time Entry - Card”.
  3. Open the new layout and enter Layout mode.
  4. Delete the following fields and labels from the layout:
    1. Completed by* label and ID_Staff  
    2. "No tasks have been created for this job." text
    3. The red warning button
    4. The ID_Task field
  5. Duplicate the the ID_Job field. Select the duplicated field and select Arrange > Ungroup since the field and label are grouped together and then delete the Job label. Double-click the duplicated field and change the table occurrence to timeentry_TASK and select the Task_Name field. Place it under the Task label.
  6. Move everything below the Task label up to fill the empty space.
  7. Change the height of the body to 552 pt.

    Note: If you move or hide the Cancel and Create buttons, you will see another set of buttons: Delete and Close. This layered button technique gives the user two different experiences without your having to create two different cards. If the user adds a new time entry, they see the Cancel and Create buttons, giving them a clear course of action. When they view an existing time entry, they see the Delete and Close buttons. You can practice this skill by following the Upcoming Time Entries Build-On, which uses the same technique.
  8. Your layout should now look like this:

Step 5 - Add scripts

Now, you will add some scripts to help users smoothly follow a data entry workflow. 

Users will: Open the iPad, see the time entry detail screen, click a button to add a time entry, select a task from the list, and then enter time for that task.

  1. Create a new script that will take users from the time entry layout to the task list layout. Open the Script Workspace, duplicate the Template Script, and rename it “iPad | Time Entry - Go to Task List” and drag it in the "iPad Time Entry" script folder.

    Note: Be sure to always update the comment section at the beginning of each new script to be consistent with the script you are writing.
  2. Add the follow script steps (see Step 3 and Step 4 for further instructions on the Sort Records and New Window steps, respectively) :

#Set variable to the current staff’s ID
Set Variable [$$SELECTED_STAFF ; Value: STAFF::ID]   

#Open a card window 
New Window [Style: Card ; Using layout: "iPad | Time Entry - Task List" (TASK) ; Height: 650 ]

Set Error Capture [On]
Enter Find Mode [Pause: Off]  

#Show only tasks in progress
Set Field [ TASK::Status ; "In Progress”]
Perform Find []

Sort Records [ Restore; With dialog: Off ]
Go to Record/Request/Page [First]

Set Field [ _Global::g_Filter_Status ; “In Progress” ]

  1. For the Sort Records script step, you want to sort the task list by a few different fields: Job Status, Job Name, Task Status, and task Due Date. Open the Sort Records dialog by clicking the blue icon to the right of the script step and then Specify. Add the following fields to Sort Order:
    1. task_JOB::Job_Name in Ascending order
    2. TASK::Status in Ascending order
    3. TASK::Date_Due in Ascending order
  1. For the New Window script step, adjust the settings in the New Window Options dialog:
    1. Set Window Style to Card.
    2. Leave Window Name blank.
    3. Set the Layout to iPad | Time Entry - Task List
    4. Set the size to Height: 650.
    5. Uncheck Close under Window Options
  1. Next, create a new script to select a task and go to the time entry layout to enter time against that task. Duplicate the Template Script, and rename it “iPad | Time Entry - Enter New Time” and drag it in the "iPad Time Entry" script folder.
  2. Add the following scripts steps:

# Set variables for Job ID and Task ID
Set Variable [ $job_id ; Value: TASK::ID_Job ]
Set Variable [ $task_id ; Value: TASK::ID]

# Set context for card window
Set Variable [ $$CARD_ACTION ; Value: "New" ]
Set Variable [ $$CONTEXT ; Value: "Time Entry" ]    

Go to Layout [ "iPad | Time Entry - Card" (TIMEENTRY) ; Animation: Flip from Right ]    

#Create a new time entry
New Record/Request
Set Field [ TIMEENTRY::ID_Job ; $job_id ]
Set Field [ TIMEENTRY::ID_Task ; $task_id ]
Set Field [ TIMEENTRY::ID_Staff ; $$SELECTED_STAFF ]  

Commit Records/Requests [With dialog: On]

  1. Finally, create a new script that allows users to quickly set start or end time to the current time. Duplicate the Template Script, and rename it “iPad | Time Entry - Set Time to Current Time” and drag it in the "iPad Time Entry" script folder.
  2. Add the following script steps:

#Set variable to the corresponding script parameter.
Set Variable [$type ; Value: Get (ScriptParameter)]

If [$type = “start”]
   #If setting the start time, set the field to the current time.
   Set Field [ TIMEENTRY::Time_Start ; Get (CurrentTime)]

Else If [$type = “end”]
   #If setting the end time, set the field to the current time.
   Set Field [ TIMEENTRY::Time_End ; Get (CurrentTime)]
End If

Commit Records/Requests [With dialog: On]

Step 6 - Add new buttons

You will add new buttons to your layouts to trigger the new scripts and follow the workflow mentioned in Step 5.

  1. Add a button on the iPad | Time Entry layout to trigger the process of adding a new time entry. Navigate to the iPad | Time Entry layout and enter Layout mode.
    1. Using the Button tool in the Status Toolbar add a new button under the portal, aligned to the left of the bottom of the portal.
    2. In the Buttton Setup dialog choose the Display only a label option, and add the label “Add Time Entry”.
    3. Set the Action: to Perform Script.
    4. Select the script iPad | Time Entry - Go to Task List from the list.
    5. Close the Button Setup dialog.
    6. Leave the button as the Default style, and adjust the Autosizing to anchor bottom and left on the Position tab of the Inspector.
  1. Once users tap the Add Time Entry button, the task list will pop up. The user will then need to select a task from the list. You will create an invisible button that will act as a selector. Navigate to the iPad | Time Entry - Task List.
    1. Add a new button, stretching it to match the width and height of the body part of the layout.
    2. In the Button Setup dialog choose the Display only a label option, but leave the label blank.
    3. Set the Action: to Perform Script.
    4. Select the iPad | Time Entry - Enter New Time script from the list.
    5. Close the Button Setup dialog.
    6. Style the button as btn Row.Hover on the Styles tab of the Inspector.
    7. In the Objects panel, drag the new button to the bottom of the objects list. This will place it behind the objects on the layout.
  1. Next, you will add a Cancel button to this layout. This will allow users to exit the task list window without having to create a new time entry.
    1. Add a new button to the Footer part of the layout.
    2. In the Button Setup dialog choose the Display only a label option, and add the label “Cancel”.
    3. Set the Action: to Single Step.
    4. In the subsequent Button Action window, add the follow script step:

      Close Window [Current Window]

    5. Style the button as btn White in the Styles tab of the Inspector.
  1. Now, add a button to the iPad | Time Entry - Card to trigger the script you wrote to set the time to the current time. Navigate to the iPad | Time Entry - Card and enter Layout mode.
    1. Add a new button under the Time_Start field.
    2. In the Button Setup dialog choose Display only a label option and add the label “Current Time”.
    3. Set the Action: to Perform Script.
    4. Select the iPad | Time Entry - Set Time to Current Time script from the list.
    5. Under Optional script parameter add “start”. This will tell the script to set the Time_Start field.
    6. Style the button as btn Minimal.Blue.Previous via the Styles tab of the Inspector.
    7. You only want users to see this button if they have not entered a start time. In the Data tab of the Inspector, under Hide object when specify: not IsEmpty (TIMEENTRY::Time_Start).
  2. Finally, add the a similar button to set the Time_End field:
    1. Add a new button under the Time_End field.
    2. In the Button Setup dialog choose Display only a label option and add the label “Current Time”.
    3. Set the Action: to Perform Script.
    4. Select the iPad | Time Entry - Set Time to Current Time script from the list.
    5. Under Optional Script Parameter add “end”. This will tell the script to set the Time_End field.
    6. Style the button as btn Minimal.Blue.Previous.
    7. Add a hide condition to this button using the formula: IsEmpty (TIMEENTRY::Time_Start) or not IsEmpty (TIMEENTRY::Time_End).
  3. Your iPad | Time Entry - Card layout should look something like this:

Step 7 - Add a new script to view time entry detail

You will now add a script so that users can select a time entry from the portal on the iPad | Time Entry layout and view and/or edit it’s detail in a card window.

  1. Open the Script Workspace, duplicate the Template Script, and rename it “iPad | Time Entry - View Entry”.
  2. Add the following script steps:

    NOTE: See step 3 for details on the Go to Related Record script step.

#Set variable to show the correct buttons in the Time Entry card window
Set Variable [$$CARD_ACTION ; Value: "Edit"]  

#Set the context so the Save script will recognize and run appropriate validations.
Set Variable [$$CONTEXT ; Value: "Time Entry"]  

Go to Related Record [Show only related records ; From table: "staff_TIMEENTRY_pastWeek"; Using layout: "iPad | Time Entry - Card" (TIMEENTRY); New window]

  1. After adding the Go to Related Record step, select the blue gear icon to the right to open the “Go to Related Records” Options dialog.
    1. Set Get related record from: to staff_TIMEENTRY__pastWeek.
    2. For Show record using layout: select Layout… and choose iPad | Time Entry - Card from the list.
    3. For Result Options: check Show in new window. In the subsequent dialog, select Card as the Window Style and uncheck Close under Window Options.

Step 8 - Add a button to view time entry

You will now add a new button to the portal on the iPad | Time Entry layout, which will trigger the script you just created.

  1. Similarly to the button you added to the task list layout in Step 6, add a new invisible button that will act as a selector for the portal row. Make the button the same height and width of the portal row.
  2. In the Button Setup dialog,
    1. Choose the Display only a label option, but leave the label blank.
    2. Set the Action: to Perform Script.
    3. Select the iPad | Time Entry - View Entry script from the list.
  3. On the Styles tab of the Inspector style the button as btn Row.Hover.
  4. On the Position tab of the Inspector adjust the Autosizing to anchor top, left, and right.
  5. In the Objects panel, drag the button below the fields within the portal so that the button is still in the portal, but is set behind the other fields in the portal.
  1. You want to make sure the user is aware they can tap in the portal row. Do this by adding a new button:
    1. Add a new button to the right of the portal row.
    2. Select the Display on an icon and select the right arrow icon.
    3. Leave Action: as Do Nothing.
    4. Set the style to btn Minimal.Menu.
    5. Set Autosizing to anchor top and right.
  2. Your finished layout should look similar to this:

Step 9 - Review your work

  1. Using an iPad, open the file using FileMaker Go. From the Time Entry detail layout, tap the Add Time Entry button and the Task List should appear.
  2. The Task List should be sorted and summarized by Job Name.
  3. Select a task. The New Time Entry card should appear.
  4. You should be able to tap Current Time to set the start or end time to the current time.
  5. You should be able to create a time entry.
  6. From the Time Entry layout, you should be able to select a time entry in the portal to pull up the Edit Time Entry card window and edit that time entry.