People Goal 2 - Part 7: Build the main list screen - header buttons

Document created by Kedar on Jan 27, 2015Last modified by communitymanager on May 12, 2015
Version 12Show Document
  • View in full screen mode

 


At this point, your header part contains text that describes what appears below it in the body part. But the user has other expectations of a header as well. Usually this is where navigation and top-level features are accessed. One common pattern is to place navigation on the left-hand side, and top-level features on the right-hand side.

 

Here is a screenshot from the example solution, with indications where navigation buttons and functional buttons could be located:

pasted-image-8.png



Navigation Buttons


These give the user a clear way to explore the solution. Since your solution takes a List-Detail approach, and since the List layout is the first screen the user will see, you probably don’t need any navigation buttons in your header. Instead, navigation is handled by the button you added to the body part.



Functional buttons


Functional buttons placed in your header should provide access to features that your users will need frequently, such as exporting, sorting, or reporting. Because this is a list layout, they should apply to the entire found set or the entire table, not specific records.

 

They are often located in the upper-right of the screen. They tend to provide complex functionality not available directly from the FileMaker menus. This sort of functionality is achieved by writing scripts (covered in Goal 5).


It's likely to take you a while to get comfortable with scripting, so we recommend that you start with our ready-made examples, adding the same two buttons as in the example solution. You can replace them later with features more specific to your solution:


  • The first button runs a single script step to export a list of contact names and email addresses based on the current found set of records. In the example solution, this export is used to update an external marketing system. Can you think of a use for an export of your people data?

  • The second button runs a script that generates a statistical report that helps the sales manager ensure that her team stays on track. You’ll design a similar report in Goal 4 and write a script for it in Goal 5, so right now this button will be just be a placeholder.


Instead of giving your buttons a text label, this time you’ll use icons — images that help to convey the purpose of the button and that are easy for the user to remember. You can create your own icons in graphic editing software or you can license images that you find on the internet. You can even create icons from FileMaker Pro graphic elements (see the “Buttons” layout in the example solution).



Goal:

 

Add two functional buttons, one for exporting records and the other for generating a report.

 

 

Steps:


Adding the first button

 

  1. Select the Button tool in the status toolbar.

  2. Drag a square shape to create a new button on the right-hand side of the header part.

    A Button Setup dialog window appears.

    The first row of options lets you decide whether the button will have a label, and icon, or both (in various positions).
    button setup dialog.png


  1. Choose the second option, which displays an icon with no label.
    button icon only.png

  2. Choose the following icon for your button (to signify an export).
    button icon export.png
  3. Use the slider to change the size of your icon to 21pt.
    change button icon 21 point.png

  4. Choose "Single Step" for the Action of your button.

    A Button Action dialog window appears.

  5. Type the two letters er into the blue line that says "Type a step or choose from the list".

    The script step Export Records appears in a drop-down list. This script step exports data from your FileMaker Pro solution in a form that can be used by other applications.

    export records script step.png
  6. Press Enter to select this script step.

    The script step is displayed on the blue line.

  7. Click the blue gear to enter the script step options.

    A popover appears.
    export records options.png

 

  1. Select the Perform without dialog checkbox.

    When this option is not selected, the user is presented with a dialog window allowing them to choose which fields to export. You are choosing the fields for them.

    Leave the Specify output file option unchecked. This allows the user to name their export file, decide where to save it, and choose the export format.

  2. Click on the Specify button next to the Specify export order checkbox.

    A Specify Field Order for Export dialog window appears.

  3. Choose the fields on the left that you wish to export, moving them into the Field export order box.

    The example solution uses  “Last Name”, “First Name”, “Work Email”, “Personal Email”.
    specify field order for export.png

  4. Click the OK button to dismiss the Specify Field Order for Export dialog window.

 

  1. Click the OK button to dismiss the Button Action dialog window.

    Little square handles appear on the sides of the button. If not, click the button to reselect it.

  2. Using the Inspector > Position tab > Position area, change the Width and Height of the image to .5 inches.

  3. Using the Inspector > Position tab > Position area, enter the following text into the Tooltip box:
    Export [Main Tablename]

    The example solution uses “Export Contacts”. This text will appear when the user hovers over the button. It’s called a tooltip.

  4. Reposition the button on the right-hand side of your header in a location that looks good to you.

 



Adding the second button

 

  1. Create a second button to the left of your first button.

    This button is similar to the first one, but it has a different icon.

  2. Choose the following icon for your button (to signify a report).
    button icon report.png
  3. As before, use the slider to change the size of your icon to 21pt.


    This button will perform a script. But since the script doesn't exist yet, you can't specify it. You'll write the script for the button as part of Goal 5. So leave the Action as "Do Nothing" for now.

 

  1. Click the OK button to dismiss the Button Setup dialog window.

  2. Using the Inspector > Position tab > Position area, change the Width and Height of the image to .5 inches.

  3. Using the Inspector > Position tab > Position area, enter the following text into the Tooltip box: [Secondary Tablename] Report

    The example solution uses “Activity Report”.


  1. Reposition the button so that it looks good to you.


     

      

Attachments

    Outcomes