People Goal 3 - Part 6: Build the main detail screen - Body Button

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

 


Let's assume that you have an email field on your Main Detail layout. How would the user send an email using this field? At present, it would be pretty time consuming: they would need to select and copy the contents of the field, open their email application, create a new email, and paste the address into the “To” box of the email. Happily, FileMaker Pro provides a way to automate this process.

 

Let’s add a functional button that makes use of this feature. You’ve already added a functional button to the right-hand side of the header, but sometimes it’s helpful to place functional buttons directly in the body of your layout instead.

Generally you do this for one of two reasons:

 

  • You want the button to be part of a natural flow in the data entry process.

  • The association of the button with a specific field or group of fields helps the user understand its purpose.

 

The example solution places email buttons (with an “envelope” icon) to the right of two different email addresses. Clicking on these buttons causes an email to be created, automating all the steps described above.

email buttons.png


Note your button will need to call a script that doesn’t exist yet, so right now we’re just adding the button. After you create the appropriate script in Goal 5 ("Automate with scripts"), you’ll come back to this layout to associate the button with your new script.

 

 

Goal:

 

Create a functional button for your email field and place it to the right of the field to communicate its purpose clearly.

 

 

Steps:

 

  1. Reduce the width of your email field so that there’s space for a square button to its right.

  2. Create a button in the space you just made.

  3. In the Button Setup dialog, choose the second option (for icon only).

  4. Choose the "envelope" icon to represent an email.
    button icon email.png


  5. Use the slider to change the icon size to 18 pt.

    You'll notice that the image is clipped. That's because the button object has padding applied to it. In a moment you'll change that using the Inspector.

    Since the script doesn’t exist yet, you can’t specify it until you create it in Goal 5 -- so leave the Action as "Do Nothing".

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


  7. Using the Inspector > Appearance tab > Advanced Graphic area, change all four Padding options to 0.
    button padding 0.png


  8. Using the Inspector > Appearance tab > Graphic area, change the Line option to "none".


  9. Using the Inspector > Position tab > Position area, change the Width and Height of the image to the same height as your field.

    The example solution sets width and height of the button to .375 inches, which is what it uses for field heights.

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

    The example solution uses “Email Contact”.

  11. Align the top edge of the button with the email field and the right edge of the button with the other fields in the group.

  12. Select your button and press Command-D (OS X) or Control-D (Windows) to duplicate it for any other email fields, then position the duplicate(s) appropriately.



     

      

Attachments

    Outcomes