Build-On Tutorial:

iPad Attachments

iPad Attachments: Lesson 3

View-Edit Attachments from iPad

Lesson Overview

The objective for this lesson is to add the ability to view and edit existing attachments from the iPad, and scroll through the list of attachments without leaving the view layout. You will create new scripts and adjust existing layouts to accomplish this.

Here is a sneak peek of what you will build:

Step 1 - Add a new script

Add a new script so users can select an attachment from the list and view the attachment in a card window. You will use the iPad | Attachment - Card layout you created in the previous lesson, and make some adjustments to the layout in future steps.

  1. In the Script Workspace, duplicate the template script and re-name it “Attachment - View Attachment”.
  2. Add the following script steps:

    NOTE: See Step 3 for details on the New Window script step.

Set Variable [$$CARD_ACTION ; Value: “Edit”]
Set Variable [$$CONTEXT ; Value: “Attachment”]

New Window [ Style: Card ; Using layout: iPad | Attachment - Card” (ATTACHMENT) ]

  1. For the New Window step, set the layout to iPad | Attachment - Card.

    Turn off Close in the Window Options.

    Note: By setting the global variable $$CARD_ACTION to Edit, you will be able to adjust the card window to work for both adding a new attachment and viewing existing attachments.
  1. Your script should look like this:
  1. You will also update the script that adds new attachments. You will need to set the global variable $$CARD_ACTION to “New”. Open the Attachment - Add New Attachment script. Add the following step the beginning of the script (or just below the other Set Variable script):

Set Variable [$$CARD_ACTION ; Value: “New”]

Step 2 - Update layout

When a user selects an attachment from the list view, they should see the details of that attachment in a card window. You already created a card window for adding attachments, and you can use the same card window for viewing and editing attachments. You will make a few adjustments to the layout.

  1. Enter Layout mode, and navigate to the iPad | Attachment - Card layout and enter.
  2. Because this layout will be used to view existing attachments as well as add new ones, the title in the header should reflect the current action by displaying either “Add New Attachment” or “Edit Attachment”. To do this, you will use the global variable $$CARD_ACTION in the header. Recall that you have scripted this variable be either “Edit” or “New”, depending on the action being performed.

    Double-click the text In the Header and change it to read “<<$$CARD_ACTION>> Attachment”.
  3. Next, you will add two more buttons to the layout. For adding a new attachment, you created a “Create” and “Cancel” button, but when a user is simply viewing or editing an existing attachment, Cancel/Create are confusing options for the user. For editing and viewing attachments, “Close” and “Delete” are more appropriate.
    1. Duplicate the Create button. (Select the button and from the menu select Edit > Duplicate.) Double-click the duplicate to bring up the Button Setup dialog.
    2. Change the button label to “Close”. This should run the same script as the “Create” button, so leave leave that option as it is.
    3. Duplicate the Cancel button.
    4. Change the button label to “Delete”. You will use this button to run a common “Delete” script that already exists in your file. Under Perform Script From: Current File change the script to Delete Record and Close Card Window (type). Set the Optional script parameter: to “attachment”. This script parameter will update the warning message when a user clicks Delete to read “Are you sure you want to delete this attachment?”
    5. You only want these new buttons to appear when a user is editing or viewing the attachment (i.e. when the $$CARD_ACTION is set to “Edit”) so you will update the visibility behavior for these buttons. Select both buttons and set the Hide object when to:

         $$CARD_ACTION = "New"

    6. Update the behavior of the Create and Cancel buttons as well. Select both buttons and set the Hide object when to:

         $$CARD_ACTION = "Edit"

    7. Arrange the Close button to sit directly on top of the Create button, and arrange the Delete button to sit directly on top of the Cancel button.
    8. Your layout should look something like this:
  1. Add the ability to scroll through the attachments (the current found set) within the card window by creating two arrow buttons in the header, for “previous” and “next”.
    1. Add a new button to the layout. Select the Display only as icon option, and select the left arrow. Set the Action to Single Step and add the following script step:

         Go to Record/Request/Page [Previous]

      Set the style as btn Minimal.Blue.Previous, and update the Behavior to Hide object when:

      $$CARD_ACTION = “New"

    2. Add Conditional Formatting to this button so that when the user is on the first record, the button is grayed out and appears disabled. Right-click the button and select Conditional Formatting…
    3. In the subsequent dialog, select Add.
    4. Select Formula is: and add the following formula:

         Get ( RecordNumber ) = 1

    5. Under Format check Icon Color: and select the grey 4th column from the right, middle option ( you can also set the color by typing 888888 and hitting the return button).
    6. Now add a similar button to navigate to the next record. Add another new button to the layout, select the Display only as icon option, and select the right chevron. Set the Action to Single Step and add the follow script:

         Go to Record/Request/Page [Next]

    7. Set the style as btn Minimal.Blue.Next, and update the Behavior to Hide object when:

         $$CARD_ACTION = “New"

    8. Add Conditional Formatting to this button, so that when the user is on the last record, the button is grayed out and appears disabled. Right-click the button and select Condition Formatting…
    9. In the subsequent dialog, select Add.
    10. Select Formula is: and add the following formula:

         Get ( RecordNumber ) = Get ( FoundCount )

    11. Under Format check Icon Color: and set the color to 888888.
  2. Finally, add a text button that will show the user which record of the found set they are viewing (eg. “1 of 4”). This time use the Button Bar tool to add a button. (The label of this button must be a calculated value, so you have use the Button Bar option to accomplish this.)
    1. In the Button Setup dialog, change the number of segments to 1 by clicking the “-“ to show 1 of 1.
    2. Select the Specify a calculation for the label icon (the pencil).
    3. Add the following calculation:

         Get ( ActiveRecordNumber ) & " of "
         & Get ( FoundCount )

    4. Close the Button Setup dialog, and style the new button bar object as btnbar Link.
    5. Update the Behavior to Hide object when:

         $$CARD_ACTION = “New"
  3. Arrange the three new buttons as follows and place them in the top right of the header:
  1. Your layout should look similar to this. The text object in the header will overlap the new buttons and look strange in Layout mode, but you can return to Browse mode to check that they will look correct to users:

Step 3 - Add selector button to list view

In order for users to select an attachment to view or edit, you will create an invisible button on the iPad | Attachment - List layout that will act as a selector. Users will be able to tap a row (an attachment) from the list and open the Edit Attachment card layout you just updated.

  1. In Layout mode, navigate to the iPad | Attachment - List layout.
  2. Add a new button, stretching it to match the width and height of the body layout part.
  3. Choose the Display only a label option, but leave the label blank.
  4. Set the Action to Perform Script.
  5. Select the Attachment | View Attachment script from the list.
  6. Style the button as btn.Row.Hover.
  7. Adjust the Autosizing to anchor the button top, right and left.
  8. In the Objects panel, drag the new button to the bottom of the objects list. This will place it behind the other objects on the layout.

Step 4 - Review your work

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

  1. Using an iPad, open the file. Select a task and a job that has attachments. Select an attachment from the list to bring up the card window.
  2. The header should read “Edit Attachment”.
  3. You should be able to scroll through all of the attachments for that task by tapping the “next” and “previous” arrows in the header.
  4. You should be able to edit data for that attachment, including deleting it.
  5. If you delete an attachment, the message should read, “Are you sure you want to delete this attachment?”
  6. You should still be able to add attachments with the same experience you had in testing Lesson 2.