People Goal 2 - Part 4: Build the main list screen - body navigation

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

 


Now you have a body part and have added merge fields to it. But what if someone wants to see more information? They need to be able to navigate to your detail screen. Although that screen doesn't exist yet, you can prepare for it by adding the navigation now.

 

In the Learn phase, you placed a “View” button on every row of your list layout. This time you’ll do something more subtle that is also more familiar to your users: you’ll make the entire row clickable, and when the user clicks it, it will switch to the Main Detail layout.

 

In the body part, behind the merge fields, you’ll add a navigation button that has no text, essentially making it invisible. It will take up the entire area of the body part so that the user can click on any part of the row. This button will perform a single action, “Go To Layout”, changing to the Main Detail layout — just like the “View” button in the Landscaping file.

 

However, because the Main Detail layout doesn’t exist, you can’t point this button at it right now. You’ll go ahead and create the button, but wait until the next goal to associate it with the correct layout.


Goal:

Add a navigation button that makes the entire body part clickable.

 

Steps:


  1. Select the Button tool in the status toolbar.

  2. Drag a rectangular shape to create a new button that almost fills up the entire body part:
    Screen Shot 2015-01-19 at 1.38.50 PM.png

    The button covers over any fields you have added to the body part.

    A
    Button Setup dialog window appears.  

    button setup dialog.png

    You don't need to choose icon option or enter any label text because this button will be invisible when you're done.

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

    A Button Action dialog window appears.

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

    The script step Go To Layout appears in a drop-down list. Script steps perform specific actions. In this case, when the user clicks your button, the layout will switch whatever layout you specify.

    go to layout script step.png
  5. Press Enter to select this script step.

    The script step is displayed on the blue line. Leave the option as "[original layout]" since the correct layout doesn't exist yet.

  6. Click the OK button.

    You are returned to the
    Button Action dialog box.

  7. Click the OK button there as well.

  8. Click outside the button to save the change.

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


    It’s very important that the button be contained within the body part. If it’s too high up, FileMaker Pro will consider it to be located in the header part instead, and it won't work properly.

 

  1. Drag the button’s handles to adjust its size if necessary (it should be about .875 inches).

  2. In the Inspector’s Appearance tab, Graphic area, below the Line option, change the border setting so that only the bottom border is selected:
    pasted-image-3 copy.png

  3. Choose the Arrange menu > Send to Back  ⌘J or Alt-Ctrl-J

    The fields in your body part should become visible again.

  4. Go into Browse mode and try clicking on the second row in your list layout.

    Although the button doesn’t take you to another layout, you should see it change color temporarily in response to the click.

    If you don’t see this:

  5. Go back into Layout mode, select the button, and move it downwards a little, reducing the height of the button first if necessary.

  6. Return to Browse mode and try clicking the button again.

  7. Repeat steps 10 to 11 until you see the button change appearance in response to being clicked.



      

      

Attachments

    Outcomes