Build-On Tutorial:


Staff: Lesson 2

Staff Detail

Lesson Overview

In this lesson, you will create a Staff Detail layout, along with scripts and buttons for managing staff records.

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

Step 1 - Add Staff Detail layout

You will create a new Staff Detail layout by duplicating and modifying the Attendee Detail layout.

  1. Open the Manage Layouts dialog and duplicate the Attendee Detail layout.
  2. Using the Layout Setup dialog, make the following changes to the new layout:
    1. Set the Layout Name to "Staff Detail”.
    2. Set Show Records From: to STAFF.
  1. Move the new layout into the Staff folder.
  1. Enter Layout mode and navigate to the new Staff Detail layout.
  2. Make the following changes:
    1. Change the Attendees text in the header to “Staff".
    2. Change the ATTENDEE DETAIL text in the body to "STAFF DETAIL”.
    3. Delete the blue circle and the Name_Initials field.
  1. Select the tab control object from the Objects tab, and note the x’s on the object that denote it is locked. Objects such as tab controls and portals are often locked to make it easier to work with stacked objects. Locked objects must be unlocked to modify them.

    Note: If the Objects tab is not open, click the objects pane icon in the status toolbar, then click Objects.
  1. Use the Arrange > Unlock menu to unlock the tab control.
  2. Double-click on the tab control object to open the Tab Control Setup dialog. Delete the Registrations tab.
  1. Back on the layout, activate the Notes tab. After deleting the Registrations tab, the blue line object is now out of alignment. Move the blue line so that it is centered beneath the Notes label.
  1. Update all of the fields on the layout so that they are based on the Staff table rather than the Attendee table. Double-click each of the fields (including the Name_First_Last field in the portal on the left as well as the fields on the Profile and Notes tabs), and in the Specify Field dialog, change the table occurrence in the dropdown to Current Table (“STAFF”) and select the corresponding field.
  2. Select and unlock the portal object at left (this is a Master Detail portal showing records from the current table occurrence). Double-click the portal to open the Portal Setup dialog, and modify it to display records from the Current Table (“STAFF”) table occurrence.
  1. In the portal, modify the Organization field to display the Staff_Status field.
  1. Modify the merge fields at the top of the layout as indicated below. Merge fields are text objects that show field data. Users cannot click into them or modify them as they can with regular field objects.
    1. Add a space at the end of “<<Name_First_Last>>” and then remove it. The updated text will appear exactly the same as before, but the act of editing the text causes the merge field to update to the current table’s context.
    2. Change <<Organization>> to “<<Title>>”.
    3. Delete the Events Attended text object and merge field.
  1. Later in this lesson, you will add the Staff_Photo field to the top of the layout. To make room for it, you will need to move the tab control object down on the layout and make it shorter.

    To start, select the tab control, and use the Inspector to modify its size and position:
    1. Set the Height to 442 pt.
    2. Set the Top position to 270 pt.
  1. Select the gray horizontal line object and set its Top position to 310 pt.
  1. Select the Notes tab of the tab control, and set the Height of the Staff_Notes field to 370 pt.
  2. Use the Fields tab (in the left pane) to click and drag the Staff_Status field onto the layout where the Events Attended text object previously existed. Change the field label to "Status"
  1. Activate the Data tab of the Inspector.
  1. Select the Staff_Status field, and then using the Data tab of Inspector, set the Control style to Pop-up Menu. Click the pencil icon next to the Values from: option. This will take you to the Manage Value Lists dialog.

    Note: You can also get to the Manage Value Lists dialog using the File > Manage > Value Lists... menu option.
  1. In the Manage Value Lists dialog, create a new value list called “Active Inactive”, with the custom values “Active” and “Inactive”. Then click OK twice to save the value list and close the Manage Value Lists dialog.
  1. Activate the Styles tab of the Inspector.
  1. Select the Status field label and set its style to label Right.
  1. Use the Position tab of the Inspector to modify the Status label and field:
    1. Set the Width of the Staff_Status field to 120 pt.
    2. Set both the label and field to be anchored to the top and right.
    3. Arrange the label and field as shown below.
  1. Reposition the STAFF DETAIL text and the <<Name_First_Last>> and <<Title>> merge fields as shown below.
  1. Use the Fields tab (in the left pane) to add the Photo field to the layout without a label (delete the label if it was automatically created). Then modify it as follows:
    1. Set its Width to 168 pt and Height to 168 pt.
    2. Set its style to container Minimal.
    3. Position it as shown below.
  1. Enter Browse mode to save and review your work.

Step 2 - Update navigation script

Next, you will update the navigation script to include the new Staff Detail layout.

  1. Using the Script Workspace, edit the Go to Staff Layout ( view ) script.
  2. Find the line with the # go to detail layout comment and add the highlighted script step on the next line.

       # go to detail layout
       Go to Layout [ “Staff Detail” (STAFF) ; Animation: None ]
End If

  1. Save and close the script.

Step 3 - Add a New Staff script

Next, you will create a script that will create a new staff record.

  1. Using the Script Workspace, duplicate the Add New Attendee script.
    1. Rename the new script "Add New Staff”.
    2. Move the Add New Staff script into the STAFF folder.
  2. Modify the script as highlighted below.

Allow User Abort [ Off ]
Set Error Capture [ Off ]
Enter Browse Mode [ Pause: Off ]
Freeze Window

# layout nav
Perform Script [ Specified from list ; “Go to Staff Layout ( view )” ; Parameter: #
( "view" ; "detail" ) ]

# create record
New Record/Request

# leave cursor in first field
Go to Field [ STAFF::Name_First ]

Exit Script [ Text Result: $null ]

  1. Save and close the script.

Step 4 - Update Staff List layout

Next, you will update buttons on the Staff List layout.

  1. Enter Layout mode and navigate to the Staff List layout.
  2. Select and unlock the transparent button that covers the entire Body part.
  1. Modify the button to call the Go to Staff Layout ( view ) script. The script parameter should already be set to the formula # ( "view" ; "detail" ) and does not need to be changed.
  1. Modify the Add Staff button to call the Add New Staff script.
  2. Enter Browse mode to save and review your work.

Step 5 - Script and user interface for staff photo

The final task in this lesson is to create a script and user interface elements for editing the staff photo. The same script will be used to both insert and delete the photo depending on a parameter named “action”.

  1. Open the Script Workspace, duplicate the Template Script script. Name the new script “Edit Staff Photo ( action )”, and move it into the Staff folder.
  2. Modify the parameters comment to describe the expected values for the action parameter.

# Parameters:           Specify using # function:
        $action (required) =
              clear = clear existing file
              edit = insert new file

  1. Start modifying the script by adding steps to load the parameter and require the context to be the STAFF table.

    NOTE: For detail on the Show Custom Dialog steps, see below.

Allow User Abort [ Off ]
Set Error Capture [ Off ]
Enter Browse Mode [ Pause: Off ]
Freeze Window

# load parameter(s)
Set Variable [ $parameter_parsing_ok ; Value: #Assign ( Get ( ScriptParameter ) ) ]
If [ $parameter_parsing_ok = False ]
      # parameters could not be parsed, exit this script and report back
      Exit Script [ Text Result: "error" ]
Else If [ $action ≠ "clear" and $action ≠ "edit" ]
      # invalid parameter(s) passed
      Show Custom Dialog [ “Error” ; "Invalid parameter(s) passed to script: " & Get ( ScriptName ) ]
      Exit Script [ Text Result: "error" ]
End If

# required context
If [ Get ( LayoutTableName ) ≠ "STAFF" ]
      Show Custom Dialog [ “Alert" ; "This script can only be run from a Staff screen.” ]
Exit Script [ Text Result: "error" ]
End If

  1. For the Show Custom Dialog script steps, double-click on the script step or click the gear icon at right to open the Show Custom Dialog Options dialog. In both instances of this script step, only the Default Button should be specified, with the button text “OK”. The Button 2 value should be removed.
  2. Next, add steps to check the parameter and handle the specified action.

    NOTE: For details on the Show Custom Dialog and Insert File script steps, see below.

# handle action
If [ $action = "clear" ]
     # clear image
     # ask for confirmation
     Show Custom Dialog [ “Alert" ; "Are you sure you want to remove the existing photo?” ]
     # 1 = cancel, 2 = clear
     If [ Get ( LastMessageChoice ) = 2 ]
          Set Field [ STAFF::Photo ; "" ]
     End If

Else If [ $action = "edit" ]
     # change image

     Insert File [ Insert ; Display content ; Never compress ; STAFF::Photo ]

End If

Commit Records/Requests [ With dialog: Off ]

Exit Script [ Text Result: $null ]

  1. In the # clear image portion of the script, the Show Custom Dialog step (line 39 in the image above) should be configured to show two buttons, as shown below.
  1. For the Insert File script step, click on the gear icon at right to open a popover with additional options.
    1. Check the Dialog Options box to open the Insert File Options dialog. Set the Custom Dialog Title to “Insert File”, Storage options: to Insert, Display: to Content of file (when possible), and select Never compress. The full dialog is shown below.
    2. Back in the options popover, check the Target box to open the Specify Target dialog. Then choose the Field option and select the STAFF::Photo field.
  1. Save and close the script.

Step 6 - Update Staff Detail layout

Next, you will add buttons, a container field, and add a script trigger on the Staff Detail layout.

  1. Return to the Staff Detail layout in Layout mode.
  2. Duplicate the Title field label, change it to “Photo”, and move it below the Title field.
  3. Activate the Button tool in the status toolbar.
  1. Using the Button tool, start drawing a button next to the new Photo label. In the resulting Button Setup dialog:
    1. Click the Display only a label button.
    2. Set the button label to “Choose".
    3. Set Action to Perform Script.
    4. Set the script to Edit Staff Photo ( action ).
    5. Set the script parameter formula to: # ( "action" ; "edit" )
  1. Back on the layout, further modify the button as follows:
    1. Set the Width to 112 pt and the Height to 44 pt.
    2. Assign it the style btn White.
  2. Duplicate the Choose button. For the new button:
    1. Change the text to “Clear”.
    2. Change the script parameter formula to: # ( "action" ; "clear" )
  3. Arrange the Photo label and new buttons as shown.
  1. Select the Photo text object and Choose button. Using the Data tab of the Inspector, set the Hide object when calculation to the formula _in_mode_Find and enable the Apply in Find mode option.

    This makes it so neither object will appear when in Find mode.
  1. Select the Clear button. Set its Hide object when calculation to the formula IsEmpty ( STAFF::Photo ) or _in_mode_Find and enable the Apply in Find mode option.

    This makes it so the Clear button will not appear unless the Photo field contains an image.
  2. In addition to using the Choose button to insert an image into the Photo field, a user should be allowed to interact with the field directly by dragging and dropping a file or using the field’s contextual (right-click) menu. However, the user should not be allowed to accidentally delete the photo by pressing the delete key. A script trigger can prevent this action.

    Right-click the Photo field and choose the Set Script Triggers... menu item. (You can also select the field and choose Format > Set Script Triggers...).

    In the resulting Set Script Triggers dialog, select the OnObjectKeystroke trigger checkbox. A Specify Script dialog will then appear; select the TRIGGER Suppress Delete Keystroke script. This script has already been added to your file.
  1. Create a button near the Photo field. In the Button Setup dialog:
    1. Click the "Display only an icon” button.
    2. Choose the icon indicated below (seventh row, second column) and set the size to 60 pt.c.Set the button action to Do Nothing.
  1. Further modify the button using the Inspector:
    1. Assign it the style btn Minimal.Gray.
    2. Set the hide condition to the formula: not IsEmpty ( STAFF::Photo ).
    3. If the button is too small to display the full icon, increase its dimensions as necessary. Then position the button in the center of the Photo field.
  1. Enter Browse mode to save and review your work.

Step 7 - Review your work

  1. Navigate to the Dashboard layout and click the Staff button. You should see the Staff List layout with zero records. Click the Add Staff button and enter information for a test record.
  2. Click on the Menu button, and then on the Staff button in the menu card, to return to the Staff List layout.
  3. The staff record you just created should be displayed. Click on it to go to the Staff Detail layout.
  4. Click the Choose button and select an image. The image should appear at the top of the screen and the placeholder icon should not be visible.
  5. Click the Clear button and test Remove and Cancel options in the dialog.
  6. Resize the window to be larger. The Staff_Status field and its label should move with the right edge of the window.