New in 14: Object components

Version 3

     

     

     

     

     

    In FileMaker Pro 14, you have the ability to format the component parts of a number of new objects, giving you greater control over how the objects are displayed. For example, not only can you specify formatting for the Button Bar overall, but also for its segments, its icons, and its dividers:

    586-button+bar.png


    To see the formatting of an object's components, you select it from the unlabeled drop-down in the Inspector > Appearance tab > Theme area:

    587-pasted-image-10.png


    A chart at the bottom of this page lists all the object components available in FileMaker Pro 14, with the new ones marked in bold.


    Objects and their components can be formatted for various display states, allowing you to provide interactive visual feedback to the user. There are four basic display states available for most objects: Normal (or Inactive), Hover, Pressed, and In Focus. Some objects may have other states such as Primary, Alternate, and Active.


    While none of these states are new in FileMaker Pro 14, they have been paired with objects in new ways. For example, portal rows now have two new states: Hover and Pressed. Be sure to take the time to review the object display states built into the theme you are using, and customize them as needed to achieve the ideal user experience for your solution.

     


     


    Goal:

     

    Change the text size on your button bar segments and the color of your button bar icons. On a different layout, cause a portal row to change color when you hover over it.


    Note:


    This exercise depends on the previous page, Button bars and icons.

     

     

    Steps:

     

    1. Make sure you are viewing the “Approval List | Pro” layout (in the Pro folder) in Layout mode.

    2. Select the button bar you just created.

      Let’s apply a custom style so that the button bar’s color matches the layout’s color scheme.

    3. In the Inspector > Styles tab, select the custom style “Green”. This sets up the overall style of the button, including the fill color for the "Normal" state.
      588-pasted-image-11.png


      Button Bar Segment

      Now that you’ve set the overall style of the button, let’s change the appearance of the segments.

    4. In the Inspector > Appearance tab, select “Button Bar: Segment” from the object type dropdown.
      589-pasted-image-12.png
      This means that any formatting changes you make will be applied to the segments of the button bar you currently have selected. Note that the formatting is applied to all segments at once, not each segment individually.

    5. Make sure that the display state drop-down is set to “Inactive”, the default display state.
      590-pasted-image-13.png

    6. In the Text area, change the text size to 16 pt.
      591-pasted-image-14.png


      Now let’s change the color of the text when the user hovers the mouse over the button segment.

    7. Select “Hover” from the display state drop-down.
      592-pasted-image-15.png

    8. In the Text area, change the text color from white to the light green in the theme’s color palette.

      593-color+picker+green.png
      Note the new color picker that has been built into FileMaker Pro 14. The top set of colors contains a color palette designed for the theme. If you add a color to this top set, two additional shades will be generated for you automatically.


      Button Bar Icon


    9. In the Inspector > Appearance tab, select “Button Bar: Icon” from the object type drop-down.

      Any formatting changes will be applied to the icons in your button bar. We’ll start with the “Hover” state since you have it selected.

    10. In the Graphic area, change the Fill color from white to the same light green that you used for the hover text.

    11. Select “Inactive” from the display state drop-down.

    12. In the Graphic area, change the Fill color from dark gray to the white in the theme’s color palette.
      594-pasted-image-17.png

    13. Switch to Browse mode. Here's how your button bar should look now:
      595-button+bar+display+state+result.png




    Explore on your own

     

    You may need to do some exploration to become familiar with which formatting options are enabled for different object components. For example:

     

    Segment

    • The fill color affects the background of all three segments.
    • The text color affects the color of the button labels (because the segment contains the label).
    • The line color and border options affects the how each segment is framed.

    Icon

    • The fill color affects the color of all the icons at once. Note that if the icon happens to be an outline, it doesn’t “fill” it, but just colors the outline.
    • The padding affects the distance between each icon and its label. If the label is to the right, the right padding can be changed. If the label is below, the bottom padding  and so on.

    Dividers

    • The fill color cannot be set.
    • The line color affects the color of all the dividers at once.

     

     


    Configurable Object Components

     

    Different objects have different components, and you can configure the display states for many of them. Here is a list of all of the objects in FileMaker 14 with configurable components. The ones that are new appear in bold. Note that some of these components are only available when the object is configured in a certain way. For example, the drop-down calendar must have the include icon to show and hide calendar option selected.

     

    596-object+diagram.jpg

    * Portal rows have two new display states: Hover and Pressed. Portal row hover states are built into many of the themes.

     

    ** The checkbox icon can now be formatted to display either an X or a checkmark ( ✔︎ ) when the box is selected. See the Inspector > Data tab > Field area, below the Control Style option:
    597-pasted-image-18.png