People Goal 3 - Part 3: Build the main detail screen - Header Buttons

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

 

 


Just as with your Main List layout, the header part is a good place for adding navigation buttons and functional buttons. Let’s add one of each to your solution:
pasted-image-5.png

 

  • The navigation button will take the user back to the Main List layout. The text on the button references the header text of that layout, reinforcing a clear sense of place.

  • The functional button will create a new record. Although FileMaker Pro gives the user other ways to create new records, people generally expect to see a “+” button in a prominent place on the screen.

 

You may have other ideas for functional buttons as well. Once you’ve learned some scripting skills in Goal 5, you’ll be in a position to create some of them. Keep in mind that on a detail screen, any functional buttons should act only on the visible record.

 



Navigation strategies

A classic navigation strategy is breadcrumb navigation, where each layout displays a button that takes you back to the previously viewed layout, and displays text indicating where you have been. The term comes from the trail of breadcrumbs left by Hansel and Gretel to find their way home in the popular fairytale (in their case, it didn’t work out so well which is a good reminder that breadcrumb navigation can be difficult to implement).

You’ll add a navigation button taking the user back to the Main List layout. The button text indicating where the user has been should match the header text on the list layout. This consistency helps to reinforce the user’s sense of place.

That’s about as simple as it can get, but as your solution becomes more complex, we recommend that you map out all the ways a user can get from one layout to another. Breadcrumb navigation quickly gets complicated, especially if you provide more than one way to access a given layout.

You could also borrow from the web and place a Home button on each screen to take the user back to a central screen, which typically includes overall navigation options and a dashboard emphasizing the most important actions for the day.




Goal:

Create two header buttons: a navigation button going back to the Main List layout and a functional button for adding a new record.


Steps:


Creating the navigation button


  1. Create a button on the left-hand side of the header.

  2. In the Button Setup dialog, choose the fifth option, where the icon is on the left side of the label.
    button icon option.png


  3. Type your main list heading as the label text:  [Main List heading

    The example solution uses "Contacts".
    button label contacts.png

  4. Choose the "caret" icon for your button.

    The caret (<) indicates that the button is going back to a previous screen.
    button icon caret.png

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

    A Button Action dialog window appears.

  6. Type the three letters gtl into the blue line that says "Type a step or choose from the list".

  7. Press Enter to select the Go To Layout script step.

    The script step is displayed on the blue line.

  8. Click the portion of the step that says "[ original layout]".

    A drop-down appears.
    select layout dropdown.png


  9. Select the Layout... option.

    A Specify Layout dialog box appears.

  10. Specify your Main List layout.


  11. Click the OK button save your changes and close the dialog box.

  12. Use the Inspector > Position tab > Size area to change the button width to 1.375 inches and the height to .5 inches.

 


Creating the functional button

  1. Create a button in the right-hand side of the header.

  2. In the Button Setup dialog, choose the second option, where only an icon is displayed.
    button icon only.png


  3. Choose the "+" icon for your button.

    The caret (<) indicates that something is being created. In this case, the user can intuit that it's a new record in the table associated with your layout.
    button icon plus.png

  4. Use the slider to change the size of your icon to 18 pt.

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

    A Button Action dialog window appears.

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

  7. Press Enter to select the New Record/Request script step.

    The script step is displayed on the blue line.


  8. Click the OK button save your changes and close the dialog box.

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

  10. Using the Inspector > Position tab > Position area, enter the following text into the Tooltip box:  Add [Main tablename]

    The example solution uses “Add Contact”.

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



     

     

Attachments

    Outcomes