11 Replies Latest reply on Dec 19, 2012 2:00 PM by philmodjunk

    How did they make a portal row highlight in starter solution: invoice

    HenryRobinson

      Title

      How did they make a portal row highlight in starter solution: invoice

      Post

           Using FM Pro 12 the new Starter solution invoices has a cool feature I would like to use in my own solution. When viewing a company it lists all the invoices unpaid and paid in portals. If you hover over an invoice, it highlights the whole row. I really like this and it seems like the way it is done is different then I have seen it described before.

           As far as I can tell, it is using an image. I have tried to replicate it but I do not get the exact same results. I can’t seem to get it to highlight unless it is in front of the fields and then when it is highlighted you can no longer read the text in the fields.  

           While playing with the Invoice solution I noticed that the image that highlights on mouse hover is grouped with something. If I ungroup it, I then get the same results as I do on my own solution. Oddly, I cannot seem to find what it is grouped with.

           Can anyone tell me how this cool feature is done?

        • 1. Re: How did they make a portal row highlight in starter solution: invoice
          philmodjunk

               Enter layout mode. Select the field or fields in the portal row.

               Then go to the appearance tab in the inspector.

               You'll find that there's a drop down at near the top of the tab that normally reads "Normal State". If you pull down that drop down list, you'll find that there is a state called "hover". You can select that value in the drop down and then use the appearance options listed below to specify any number of appearance changes, such as a change in fill color, but this need not be the only change.

               I've set the X layout text I use as a button in portals to delete portal row records to slightly change font size, for example, building in a small "twitch" to show that the X is a button that may be clicked. (I removed the "hand" option in button setup because this hand appears in the bottom hand row even though conditional formatting makes the X invisible in that row.)

          • 2. Re: How did they make a portal row highlight in starter solution: invoice
            schamblee

                 The sample goes beyond what Phil states above.  Filemaker added a rectangle bar to the portal which is placed above the data fields.   Then the fill color is set to none, which allow you to see the fields behind the shape. Then the hover is set to a different color.  You may also have to change the opacity, so the font will be more readable.   Filemaker set the bar as a button, so when it is click it goes to that invoice, so this will make the underlying fields uneditable from the portal.  You would have to omit the bar if you wanted to edit the fields in the portal and then each field would highlight as you hovered over that field.

            • 3. Re: How did they make a portal row highlight in starter solution: invoice
              HenryRobinson

                   the suggestions above do work but it is not how they are doing it in the solution. I have attached a file to try and be more clear about what I am talking about. The main difference is that you can have the portal row change color drastically without changing the font color of the fields at all. Using the opacity option dose change the fields text color.

              • 4. Re: How did they make a portal row highlight in starter solution: invoice
                philmodjunk

                     As we have said this is a setting specified for the "Hover" state of an object on this layout.

                      

                • 5. Re: How did they make a portal row highlight in starter solution: invoice
                  philmodjunk

                       Note that in the previous screen shot a light, solid grey color is specified for the Hover state for a button placed behind the portal fields. In this screen shot, you can see that the same object is transparent in "normal state" when the mouse is not hovering over the button.

                  • 6. Re: How did they make a portal row highlight in starter solution: invoice
                    HenryRobinson

                         OK now I am just confused. I am not sure how we could not be on the same page. I am well aware of the options for hover and normal state. I am also able to make this work using hover and changing it to a solid color with opacity set to around 50%. As I stated in the beginning though I would like to know how it is done in the starters solution. The way they do it is a little better then the way that I have done it and that has been suggested here.

                         To get a better idea of what I am trying to describe open a new Invoice starter solution and un-group the bar we are talking about and see it go from working to not working. also see how it is not using the opacity option at all.

                    • 7. Re: How did they make a portal row highlight in starter solution: invoice
                      philmodjunk

                           What I have posted are screen shots from the starter solution for contacts. Note what object is selected in my screen shots. This as S Chamblee pointed out, is an object located behind the portal's fields such that the settings on this one object produce the desired hover effect.

                      • 8. Re: How did they make a portal row highlight in starter solution: invoice
                        HenryRobinson

                             First, I want to say thanks for all the effort put into helping me understand how they did this so I can replicate it.

                             I am sill very confused though, you said

                        “What I have posted are screen shots from the starter solution for contacts.”

                             But it looks like it is from the Invoice solution. You then say

                        “Note what object is selected in my screen shots. This as S Chamblee pointed out, is an object located behind the portal's fields such that the settings on this one object produce the desired hover effect.”

                             But it is not behind them it is in front of them as S Chamblee says

                        “Filemaker added a rectangle bar to the portal which is placed above the data fields.”

                             So let me try this again. I know there is more than one way to get an effect that is similar to what FileMaker did in the invoice solution. However, the way they did it is the way I like the most and I am unable to replicate it. I hope I am just having a communication failure and you have been describing it all along.

                             To try another approach to this problem maybe you could answer another question. Why is the bar we have been talking about in the Invoice Solution grouped at all? Or even better why dose un-grouping it make it no longer function?

                        • 9. Re: How did they make a portal row highlight in starter solution: invoice
                          philmodjunk
                               

                          “What I have posted are screen shots from the starter solution for contacts.”

                          My mistake, this is from Invoices.

                               

                                    But it is not behind them it is in front of them as S Chamblee says

                          I believe that you are mistaken. When I change the "normal state" appearance settings for this object to have a solid fill color, this change would obscure the fields in the portal row if it were placed on top of the fields and it does not do this. This is consistent with the behavior you see in browse because if this object was on top of the fields, hovering the mouse would casue the fields in the portal row to disappear when the object gets its solid fill color from the hover event.

                          However it is located in the stacking order, the settings I have shown in my screen shots clearly show that it is the hover appearance setting on this button that is producing the desired highlight effect.

                               

                                    Why is the bar we have been talking about in the Invoice Solution grouped at all?

                               It's a button. All buttons are a group of at least two objects, one is the visible object that you see on the layout and other is the invisible "button" object placed on top of it and grouped with it that contains references to the button setup info. If you ungroup this object, you will get a warning message that the button settings for this object will be lost.

                               In the case of this layout, but button does a go to related records action to pull up the invoice clicked in the portal on the invoice details layout.

                          • 10. Re: How did they make a portal row highlight in starter solution: invoice
                            HenryRobinson

                                 Thank you so much that did it!!


                                  You were right it is behind the fields and I am amazed I had not noticed that all buttons are grouped.

                                 Important things you need to know to get this to work

                                   
                            1.           The background image you want to change on hover needs to be a button. If it is not it seem to no longer work.
                            2.      
                            3.           The fields that are in front need to have filed entry in browse mode turned off (this is the one step I had never seen or tried before)

                                  

                                 Thanks again PhilModJunk for your patients I would still be messing with the group idea :)

                            1 of 1 people found this helpful
                            • 11. Re: How did they make a portal row highlight in starter solution: invoice
                              philmodjunk

                                   1) it could also be a field and this would but a button makes more sense to use for this.

                                   As far as I know, only buttons, fields and tab control panels can have a "hover" appearance specified.