Build-On Tutorial:

iPad Attachments

iPad Attachments: Lesson 4

Add and Edit Attachments from FileMaker Pro Advanced

Lesson Overview

Whereas the previous lessons explained how to build new functionality for the iPad, the objective for this lesson is to add the ability to view, edit and add attachments for FileMaker Pro Advanced users. They will be able to add their own attachments and see the attachments iPad users have added.

You will use existing layouts, fields and scripts to accomplish this, as well as create a new relationship and new scripts. You will update the tabs in the Task Detail view to include Attachments.

Here is a sneak peek of what you will build:

Step 1 - Add a new relationship

In order to view attachments from the Task Detail layout, you will have to add a new relationship relating attachments to tasks.

  1. Open the Manage Database dialog, navigate to the Relationships tab, and add a new table occurrence.
  2. Select the Attachment table and name the new table occurrence “task_ATTACHMENT”.
  3. Move the new table occurrence to the right of the TASK table occurrence.
  4. Add a new relationship. In the Edit Relationship dialog select the TASK table on the left and select the ID field from the list.
  5. On the right, select the task_ATTACHMENT table and the ID_Task field from the list. Be sure the = is selected from the drop-down in the center.
  1. Click Add, then exit this dialog.
  2. Your relationships graph should look like this:

Step 2 - Add portal

Update the Task Detail layout to include a portal to show attachments related to each task.

  1. Open the Task Detail layout and enter Layout mode.
  2. Update the tab control to include a tab for Attachments. In the body of the layout, select the tab control object and from the menu, select Format > Tab Control Setup…
  3. Under Tab Name add “Attachments” and click Create.
  4. With the Attachments tab selected, add a new portal using the portal tool in the status toolbar.
  1. In the Portal Setup dialog:
    1. Show records from: select task_ATTACHMENT
    2. Check Allow vertical scrolling
    3. Show scrollbar: select When scrolling
    4. Number of rows: 5
    5. Check Use alternate row state
  2. In the subsequent Add Fields to Portal dialog add the following fields:
    1. Document
    2. Name
    3. Description
    4. Date_Added
  3. In the Inspector, adjust the Size and Position of the portal as follows:
  1. Adjust the Autosizing to anchor top, left, right, and bottom.
  2. Style and adjust each field in the portal as follows:
    1. Document — container Minimal
    2. Name — txt Minimal.Black.Left
    3. Description — txt Minimal.Gray.Left (also update the Autosizing to anchor left, top, and right.)
    4. Date_Added — txt Minimal.Black.Right (also update the Autosizing to anchor top and right.)
    5. Make sure users will not edit these fields from the portal. Select the fields in the portal, then on the Data tab of the Inspector, scroll down to Behavior and under Field entry uncheck Browse Mode.
  1. On the right, outside of the layout, duplicate the line that is labeled Use this for tab underline, and move it under the Attachments label of the tab (similar to the Details and Time Entries tabs).
  2. Add a sort order to the portal. You want to sort the attachments by creation timestamp. Double-click the portal to bring up the Portal Setup dialog. Select Sort portal records.
    1. Add the zz_Log_Create_Record_TS field to Sort Order.
    2. Set it to sort Descending.
  3. It may help your users to see at a glance how many attachments exist for this task. To achieve this, you will add new field to the Task table.

    In the Manage Database dialog, create a new field on the Task table and name it z_Attachments_Total.
  4. Set the Type to Calculation (set the calculation result to Number), and enter the following formula:

    NOTE: Uncheck Do not evaluate if all referenced fields are empty so a zero will show when no attachments exist for a task

Let(    
[    

c = Count ( task_ATTACHMENT::ID )        

] ;        

If ( c > 0 ; c ; 0 )        

)

  1. Exit out of the Manage Database dialog and add the new field to your layout. You will add text and merged field above the portal: “Total Attachments: <<z_Attachments_Total>>”.

    To do this, select the Text tool, click above the portal to begin a text object, and enter “Total Attachments: ”. Then select Insert > Merge field. Select the z_Attachments_Total field from the list.
  2. Using the Style tab of the Inspector, style it as label Left.

    Your layout should look similar to this:

Step 3 - Update scripts

In order for users to add and view attachments from the Task Detail layout, you will have to update the Add Attachment and View Attachment scripts you created in Lesson 2 so they work for both iPad and desktop users.

  1. The layout you are on when adding attachments from the desktop is based on the Task table, but the iPad layout is based on the Attachment table. Your script will get the task_ID differently depending on which type of user runs the script.

    Add the following highlighted script steps to the Attachment | Add New Attachment script:

If [_DEVICE_iPad = True]
   #If user is on iPad, set variable accordingly.
   Set Variable [$task_id ; Value: _GLOBAL::g_Filter_Task]

   #Verify a task has been selected. If not, tell user to select task.
   If [ IsEmpty ($task_id)]
      Show Custom dialog [“Select Task” ; “Please select a task to add an attachment.”]
      Exit Script [Text Result: $null]
   End If

Else
   #If the user is on desktop, set variable accordingly
   Set Variable [$task_id ; Value: TASK::ID]
End If

  1. Next, update the Attachment - View Attachment script in a similar manner, adding an If statement around the steps for the iPad and Else statement to include viewing attachments from the Task Detail layout. Add the highlighted script steps below
    1. For the Go to Related Record step: In the Options dialog, set Get related record from: to task_ATTACHMENT.
    2. For Show record layout using: select “iPad | Attachment - Card” and in the subsequent dialog, set Window Style: to Card, and uncheck Close under Window Options.
    3. Check Show only related records and select Match current record only.

If [_DEVICE_iPad = True]
   #If user is on iPad layout:
   New Window [ Style: Card ; Using layout: “iPad | Attachment - Card” (ATTACHMENT) ]

Else
   #If user is on desktop layout:
   Go to Related Record [Show only related records ; From table: “task_ATTACHMENT” ; Using layout: “iPad | Attachment - Card” (ATTACHMENT) ; New window]

End If

  1. Finally, add a couple of new scripts so users can replace, open or insert a document from the card window with the click of a button. On the iPad, some of this functionality is handled naturally by iOS, but you need to script it for desktop users.

    In Script Workspace, duplicate the template script and rename it “Attachment - Download Document”. Add the following script steps:

Set Variable [$path ; Value: Get ( TemporaryPath ) & GetContainerAttribute ( ATTACHMENT::Document ; "filename" )]

Export Field Contents [ATTACHMENT::Document ; “$path” ; Automatically open ; Create directories: Off]

Commit Records/Requests [With dialog: Off]

  1. When setting up the Export Field Contents step, click on the Specify target field option and choose the Document field.
  1. The next step in setting up Export Field Contents is to Specify output file. Make sure to check Automatically open file:
  1. The final script should look like this:
  1. Create another new script and name it “Attachment - Insert Document (Desktop)”. You will use this script for both “insert” and “replace” actions. Add the following script step:

Insert File [Insert ; Display content ; Never Compress ; ATTACHMENT::Document]

Commit Records/Requests [With dialog: Off]

  1. For the Insert File script step, click the blue gear icon to the right to see more options.
  2. Select Dialog options, then click Specify…

    In the “Insert File” Options dialog, set Storage options: to Insert. For Display select Content of file (when possible), and set Compression to Never compress. Close out of the dialog.
  1. Now select Target, then click Specify… next to Target. In the Specify Target dialog, choose the ATTACHMENT table and select the Document field.
  2. Your script will look like this:

Step 4 - Add buttons

Now, you will add a button to the Task Detail layout for users to add new attachments, and add a button to the attachments portal to view attachments.

  1. Add a new button to add attachments from the Task Detail layout. Copy the Add Time Entry button from the Time Entries tab and paste it within the Attachments tab, below the portal:
    1. Rename the copied button to “Add Attachment”.
    2. Have it perform the Attachment | Add New Attachment script.
    3. Clear the Optional script parameter text.
  2. Next, add a selector button to the attachments portal. Copy the transparent portal button from the Time Entries tab and paste in on the attachments portal.
    1. Have it perform the Attachment | View Attachment script from the list.
    2. Clear the Optional script parameter text.
    3. In the Objects panel, drag the new button below the portal’s fields, so it is placed behind the fields on the layout.
  1. The Task Detail layout should look similar to this:

Step 5 - Update card window

Update the card window to include some buttons for instances where users are adding attachments from the desktop. Navigate to the iPad | Attachment - Card layout and enter Layout mode.

  1. You added the “+” button to let users know they can tap in the container field from the iPad. Using FileMaker Pro, container fields act a bit differently in that users can drag and drop files directly into the container field. Let users know this by adding a button similar to the “+” button and place this new button on top of it.

    Select the button tool in the status toolbar, then click and drag a rectangle to create your new button, placing it over the “+”.
    1. In the Button Setup dialog, select Display only a label.
    2. Enter the label “Drag & Drop File Here”.
    3. Back on the layout, select the button and style it as btn Minimal.Gray.
    4. Users should not see this button when using the iPad or if the field contains data. Select the button, then in the Inspector, set Hide object when:

not IsEmpty ( ATTACHMENT::Document )

or

_DEVICE_iPad = True

  1. Update the behavior of the “+” button. Select that button, then in the Inspector, amend the Hide object when formula to this:

not IsEmpty ( ATTACHMENT::Document )

or

_DEVICE_Desktop = True

  1. Add a button bar to allow users to perform a few different actions with the container field (Open, Download, and Insert). Select the Button Bar tool in the toolbar, and add a button bar just below the container field. In the Button Bar Setup dialog:
    1. Label the first segment “Insert”. For Action select Perform script and choose the Attachment - Insert Document (Desktop) script.
    2. Move to the next segment and label it “Replace”. For Action select Perform script, and choose the Attachment - Insert Document (Desktop) script.
    3. Move to the third segment and label it “Open”. For Action select Perform script and choose the Attachments | Download Document script.
  2. Update the visibility of the button bar so it is only visible when the user is on the desktop. Select the the whole button bar, then in the Inspector, set Hide object when to:

_DEVICE_iPad = True

  1. Finally, update the visibility of each segment of the button bar:
    1. Select the Insert segment and set Hide object when to:

         not IsEmpty ( ATTACHMENT::Document )

    2. Select the Replace segment and set Hide object when to: 

         IsEmpty ( ATTACHMENT::Document )

    3. Select the Open segment and set Hide object when to:

         IsEmpty ( ATTACHMENT::Document )
  2. Your layout should look similar to this:

Step 6 - Review your work

Note: Because this file uses the _DEVICE_iPad function, the iPad-specific features will not function properly if tested from the desktop. Be sure to test iPad functionally with an iPad.

  1. Open the app using FileMaker Pro Advanced and navigate to the Task Detail layout. Select the attachments tab. You should see a list of the attachments there.
  2. Add a new attachment. The card window should show the title “New Attachment”. The container field should have the “Drag & Drop File Here” text visible. You should only see the “Insert” button below the container.
  3. From the portal, select an attachment. The card window should show the title “Edit Attachment”. You should only see the “Replace” and “Open” buttons below the container. 
  4. All iPad functionality should be the same as when you tested Lesson 3.