New in 14: Button bars and icons

Version 2

     

     

     

    The new button bar allows you to define a row or column of buttons at once, all with uniform size and formatting. The bar is divided into segments, each of which contains either a regular button or a popover button (a single button bar can contain buttons of both types). You also can designate one of the buttons as "active", typically used to show which button the user clicked last.

     

    Button bars are ideal for navigation and also work well as a customized replacement for radio buttons or checkbox sets, for switching between tabs or slide panels, or anywhere else it makes sense to group buttons that have a similar function.


    Each button can have a special icon associated with it. You can use any of more than 140 included icons or import your own (PNG or SVG format). These icons can be positioned in various ways relative to the label, formatted independently, and resized.


    Until now, adding images to buttons has involved giving a background fill image to the button itself or overlaying a separate image on top of the button. The new icons present several advantages over these techniques: they allow you to combine labels with images, give you more control over placement and size of the images, and work seamlessly in WebDirect. Additionally, icons based on SVG images allow you set display states (see next page).


    The Button Bar Setup dialog appears when the button bar is created. Note that if you change focus from FileMaker Pro to another application, the dialog will disappear. You can re-open it by double-clicking the button bar object. A detailed diagram of the dialog is included at the bottom of this page.

     

     


     

     

    Goal:

     

    Add a button bar with icons, where the buttons are used for navigation and for changing the found set.


     

     

    Steps:

     

    1. Switch to the “Approval List | Pro” layout (in the Pro folder). You can see that the layout has three separate buttons in the top navigation part.

    2. Enter Layout Mode.


    3. Delete the three existing buttons from the top navigation part.
      598-delete+three+buttons.png

    4. Select the Button Bar tool in the toolbar.
      599-Button+Bar+Tool.png

    5. Drag a rectangular shape in the top navigation part to create a button bar occupying the same area as the three buttons you deleted. 

A Button Bar Setup dialog window appears.

      By default, your button bar will have 3 horizontal segments and the first segment will be selected.





      Set up the first button segment


    6. Choose the option that places an icon to the left of the button label.



      600-pasted-image-3.png
      The dialog window changes to include a grid of icons.



    7. Type Contacts for the segment label, then press Enter.


      601-pasted-image-4.png
      The label appears on the button segment.



    8. Scroll through the list of icons and select the one that is like a person’s head.


      602-pasted-image-5.png
      The icon appears on the button segment to the left of the label.



    9. Change the icon size to 18 pt by either dragging the slider or entering the value directly into the box to the right of the slider.

      603-pasted-image-6.png

    10. Change the action from “Do Nothing” to “Single Step”.

 A Button Action dialog window appears. This window is a variation of the new Script Workspace environment, which will be covered in more detail in a later section. 



      Let’s try using the keyboard as much as possible.


    11. Type the following characters: gtl



      This is an acronym for “Go To Layout”. The Go To Layout step appears in a dropdown.


    12. Press Enter.

 The Go To Layout script step is added as a single script step.


    13. Press the Spacebar.

 A dropdown appears with the options for this script step.


    14. Select the Layout... option by pressing the Down Arrow, then press Enter.

 A Specify Layout dialog window appears.


    15. Press the Down Arrow several times to move through the list of layouts until you reach the “Contact List | Pro” layout.

    16. Press Enter to save your changes and close the Specify Layout window.


    17. Click the OK button to save your change and close the Button Action window.

 Note that no keyboard shortcut is available for this particular button.



      Your first button segment is complete. Now let’s work on the second one.





      Set up the second button segment


    18. Switch to the second segment by clicking the right arrow (or caret) button in the Button Bar Setup dialog.


      604-pasted-image-7.png
      The segment text changes from “1 of 3” to “2 of 3”.




    19. Type My Approvals for the segment label, then press Enter.


    20. Select the checkmark icon from the list.

      605-pasted-image-8.png

      This time you’ll perform a script instead of a single step.



    21. Change the action from “Do Nothing” to “Perform Script”.

 A Specify Script dialog window appears. 


    22. Select the following script: “Show My Approvals”.


    23. Click the OK button to save your changes and close the window.



      Your second button segment is complete. Now let’s work on the third segment.





      Set up the third button segment


    24. Switch to the third segment.


    25. Type All Approvals for the segment label, then press Enter.

    26. Select the checkmark icon from the list, same as for the second button.


    27. Change the action from “Do Nothing” to “Single Step”. 

A Button Action dialog window appears. 


    28. Type the following characters: sar



      The Show All Records step appears in a dropdown.


    29. Press Enter.

 The Show All Records script step is added as a single script step.



      Your third button segment is complete.


    30. Click the OK button to save your changes and close the Button Action window.


    31. Switch to Browse mode and try out the buttons in your new button bar.

      This is how it should look right now. In the next exercise, you'll format it some more.

    606-button+bar+half-finished.png

     

     

     


     

     

    Tips


    Now that you’ve created your first button bar, here are some tips for the future:

     

    • Each button is given the same size, regardless of the length of its label.


    • Styling is applied to the button bar and its dividers, segments, and icons as a whole so each button is formatted uniformly.


    • One segment of the button bar can be specified as active. The active segment can be specified by either choosing the segment from the list, or by specifying a formula that results in a text string that matches the segment’s object name.


    • Individual segments can be hidden using the visibility feature. In this case, the other segments expand to fill the entire row or column of the button bar rather than displaying an empty slot.
 Visibility can be applied to the button bar as a whole as well.

    • Conditional formatting and script triggers can be assigned to each segment individually.


    • The button segments can be rearranged by clicking and holding a segment for a moment, then dragging the segment to a new position.


    • You can delete a segment from a button bar by selecting it and then pressing the delete key.


    • The same combinations of icons and text are available for regular buttons as well as button bars.



       

    Button Bar Setup


    The diagram below documents many of the configuration choices available, though parts of the dialog will change depending on the options you select:

     

    607-pasted-image-2.png