13 Replies Latest reply on Apr 5, 2013 7:57 AM by Mike_Mitchell

    Expandable/collapsable detail area (aka accordion) in list view?


      Is there any way to show/hide addtional detailed information for a single record in list view? What I need is a sub summary part that is only shown for a single record at any given time.


      I often used a similar technique to show or hide detailed information for ALL records in the current found set - however this time only the currently selected row should have the detail part attached below while the rest of the records remain without detail. Can this be done via sorting? I already tried a few approaches - unfortuantely sub summaries aren't hidden if the SortBy-field is empty (which would make things much easier).


      Some requirements:

      - it needs to be a list view (I already found similar techniques for portals)

      - I won't switch between 2 almost identical layouts to show/hide the detail part in the footer or header (maintaining changes between 2 layouts is annoying and not good practice in my opinion)

      - this is a WAN-hosted solution with ca. 10000 records in the subjected table - that said sorting and searching is fine, but funny hacks that already feel less than instant on local setups aren't an option



      Has anyone done this successfully? It's always disappointing how much effort and pain some very common UI controls require in FileMaker.

        • 1. Re: Expandable/collapsable detail area (aka accordion) in list view?

          It may not be what you are after, but have you tried incorporating some conditional formating to hide or show the details in a larger header area when desired... this could include the details of the current active record, and may be further emphasised by ensuring that the "Delineate fields on current record only" option is selected in the layout setup.  A global field formatted as a checkbox could be included in the header area to hide or show the details.  This could at least save doubling up on the layout as you mentioned in your requirements.

          • 2. Re: Expandable/collapsable detail area (aka accordion) in list view?

            Many database UI's have this feature, but it is not one in FileMaker.  Work around are things like clicking a button to jump to a different layout showing details or maybe put it in a different window or a portal.  You can always do this with PHP and display it as a web portal in FileMaker, but that would take a lot of work. 


            It seems from your post that you are having performance problems with 10,000 records.  Usually there are some schema issues if you are not getting good performance with 10,000 records because that number should not be a problem for FileMaker. 

            • 3. Re: Expandable/collapsable detail area (aka accordion) in list view?

              Yes, this is a bit of a pain. Here's one technique for accomplishing it:


              1) Make sure each record has a unique ID (by whatever method you prefer).


              2) Create a global field for holding a return-delimited list of IDs. This list will be the list of IDs that have been "expanded".


              3) Create a calculation field using this formula:


                   idSort = FilterValues ( idList ; id )


              4) Create a subsummary part sorting on idSort.


              5) Inside the subsummary part, place whatever elements you want to appear when the list record is "expanded".


              6) Using Conditional Formatting (as recommended by Stephen), make those elements the same color / fill as the background if idSort is empty.


              7) Create a script that adds or removes the ID for the current record to or from your global field when executed. One handy custom function for doing so is http://www.briandunning.com/cf/987, or you can roll your own. After doing so, the script should sort the records on idSort.


              8) Attach the script to a button on each record.


              When done, your user can click your button. The button will add or remove the ID of the current record from the list, which will set the idSort value of that record either to its ID or to null. When that happens, the subsummary part associated with that record will either appear (showing the desired detail), or the record will re-sort to the appropriate place at the top of the list (where a blank subsummary will appear).


              If you prefer to keep the records in their original order, you can add the actual IDs to the sort order so they always remain in the same order (but of course, this may munge up the presentation).





              • 4. Re: Expandable/collapsable detail area (aka accordion) in list view?



                I don't think this is what you are looking for, but I will toss it in anyways! It is an old technique from the FMP5 days where you have your List view layout, but add a sub-summary (trailing) part below the body part. When the layout is in list view, you only see the body part. When you switch that same layout to form view, the sub-summary part becomes visible.


                I don't think that it mattered at all what field you link the sub-summary part to, but I can't remember for sure. In my brief testing after I converted the sample file to FMP12, it does not seem to matter.


                Please excuse the old look to the sample file as it is direct from the FMP5 version.  The Edit button and Done button simply toggle the layout view from list to form and vice-versa. The buttons at the top for View as Form and View as List do the same.



                • 5. Re: Expandable/collapsable detail area (aka accordion) in list view?

                  No, don't get me wrong - I don't have any performance issues at all. Everything is indexed and I go to great lengths in order to avoid unstored calculations and the like (instead favouring script triggers to set static fields for example).


                  I just mentioned that aspect to clarify that some "creative" workarounds and hacks that might work reasonably in a local environment aren't an option for this network hosted solution - like looping through all records or other hacks I can't think of right now.

                  • 6. Re: Expandable/collapsable detail area (aka accordion) in list view?

                    Thanks for your effort, but this doesn't seem to provide the intended effect. It will always put the expanded records at the bottom of the list - instead I want the detail part to appear "inbetween" records, preserving the original sort order. Basic examples with fewer list items can be found here:


                    Also I really don't need to be able to expand multiple items - it's ok to only have one record expanded at any given time. That said, I think I don't really need the list of IDs and already tried a similar approach before, in which the expanded recorded was different from any other record by setting a global $$sort_by variable and using the FilterValues approach you mentioned.


                    The problem remains though, the expanded record stays at the bottom. Furthermore all other records with the empty sort field still receive a trailing subsummary, which of course has always been the case with FileMaker. Yes, you can "hide" this part with conditional formatting - it doesn't remove the space though.


                    Another issue is the fact that I need to sort by another field (week) in addition to the expand summary, which means that every weekly group of records will receive that empty trailing sub summary.


                    That said, unless I got anything wrong with your approach, at this point it just seems unreasonable to try this in FileMaker and I'm starting to grow tired of the lack of common, modern UI elements in FileMaker.


                    Thanks for your efforts again.

                    • 7. Re: Expandable/collapsable detail area (aka accordion) in list view?

                      Thanks, but I already thought about it and I think it's not good UI design since the detail part I'm intending to show/hide takes up some significant space (not enough to justify a separate layout though) and I really don't want to have such a large part of the header/footer constantly occupied.

                      • 8. Re: Expandable/collapsable detail area (aka accordion) in list view?

                        Thank you, but it isn't what I intended. While detailed information for single records is needed, it's important that the user is able to keep scrolling through records, adjust the sort order and filter records - things list views tend to master well. Your approach clearly separates the general list and detailed information parts - I'd like to have both in the same view.

                        • 9. Re: Expandable/collapsable detail area (aka accordion) in list view?

                          Basically what you want is not offered in FileMaker.  But there are some cool methods to using Portals to accomplish the same thing in a nice User Interface.  For example, a long portal on the left and when you click a name, their individual information shows on the right hand side.  So there are elegant ways to accomplish the same thing, albeit not exactly what you asked for. 

                          • 10. Re: Expandable/collapsable detail area (aka accordion) in list view?

                            I'm not 100% certain it's not available. Reason: I saw Andy LeCates do it at DevCon last year. He was able to preserve the records in their sort order somehow by using a subsummary based on the ID of the record, plus other sorts.


                            Problem is, I didn't fully catch what he was doing. My notes are sketchy (Andy talks quickly) and I haven't the time right now to go through the videos to figure out exactly what he was doing. Nor am I sure that the technique completely eliminates the trailing subsummaries, which is what thirdsun seems to want.


                            In any event, you're correct: A list / detail view is way easier to implement, and is the de facto standard for this sort of need.



                            • 11. Re: Expandable/collapsable detail area (aka accordion) in list view?

                              I use a sidebar list and detail view in most of the layouts in this solution, however in this case it involves data that stretches horizontically and is best presented that way. Furthermore complex sorting and filtering is required which works very well in list view as you can use the built-in search functionality for filtering via script triggers. I know there are several ways to filter portals and I use them in my usual list + detail views, but it's hard to make a portal filter behave like search mode which my users are used to. By the way a portal to the current found set would be an amazing feature to avoid those limitations, but that's another subject.

                              I saw Andy LeCate's demo mentioned in another thread that discussed options to a similar problem, but everything the poster remembered was that the method involved sorting by some ID field - that sounds like the keynote you mentioned. Is it available anywhere?

                              • 12. Re: Expandable/collapsable detail area (aka accordion) in list view?

                                What happens when you tick mark "Keep records in sorted order" in the Sort Records dialog (or script step)? This is a FileMaker 12 setting.

                                • 13. Re: Expandable/collapsable detail area (aka accordion) in list view?

                                  I don't see anywhere that the DevCon recordings are still available for purchase in toto. However, Ernest Koe's design session still appears to be available (if you have access):




                                  In that session, he demonstrated (very quickly) an accordion technique specifically for iPhone list views. It was rather esoteric, though, and involved a recursive use of the List function I've never seen before, and my notes were inadequate to reproduce it.


                                  As another option, you could implement a separate window so your list view is preserved in one, and your detail view in another. Set the windows side by side and control their position with the various windowing commands.