3 Replies Latest reply on Apr 30, 2014 11:16 AM by philmodjunk

    Graphic Checkboxes in Portal

    SkipGilleland

      Title

      Graphic Checkboxes in Portal

      Post

           Does anyone have any idea if it is possible to have a portal within a popover that would contain values, from a value list, that when tapped it would place a graphic checkmark?

           I am trying to figure out another way other than checkboxes...I have a fairly large value list that doesn;t display well on GO.  So my idea was to put a portal within a popover, have the list within the portal, when the user taps on the value it would put a checkmark (graphic) next to the value.

           I have no idea where to start on this.

           The image is how it currently looks.

      Volleyball_Tryouts__db00535_worldcloud_com_.png

        • 1. Re: Graphic Checkboxes in Portal
          philmodjunk

               Why do you need a portal? Is that need in order to set up a scroll bar so that you can scroll the list of check box values? With one check box for each portal row?

          • 2. Re: Graphic Checkboxes in Portal
            SkipGilleland

                 Yes, I forgot to mention that.  This is for a GO app and I want it to be as close to native as possible....so having a checkbox on each portal row with scrolling and a graphic is what I am aiming to accomplish.

            • 3. Re: Graphic Checkboxes in Portal
              philmodjunk

                   What I know how to do with a portal gets you close to the screen shot shown, but not exactly.

                   Before you go that route see if the following "trick" might be acceptable. It's a trick that I use on my iPhone, but may not be practical for the larger screen of an iPad and you may or may not like the result anyways.

                   In FileMaker Pro, open the popover and size the frame to be taller than the stencil shows will fit on your iPhone screen. Place a single field on this layout and format it with check boxes and the needed value list. Resize the popover frame to just barely fit the field and select the top, bottom, and side resize anchors.

                   When you open the popover on an iPhone, it should fill the screen and you should be able to use a finger to scroll the contents of the popover up to interact with the rest of the check boxes that otherwise would not fit on your screen.

                   It that's not to your needs:

                   Set up a table with one record for each value in your list of check box values. Since a value list can be specified to use values from a field, you may already have such a table. Use the Cartesian join operator (X) instead of the default = operator to set up a relationship such that any record in your layout's table matches to all records in this table of check box values:

                   LayoutTable::anyfield X CheckBoxValues::anyfield   (double click the relationship line to get  a dialog where you can change = into X.)

                   Now you can place a portal to CheckBoxValues inside a popover frame on your LayoutTable based layout and can list all the values of this table, but in a single column--that's the part that will differ from your screen shot. Place the field that stores the value in the portal row. Use the Rectangle tool to draw a square for the check box to the left of this field inside the portal row. Use the text tool to add the letter 'x' or a tick mark character centered inside this box. Conditinal formatting or Fm 13's "Hide object when" setting will be used to make this character appear and disappear to show what values are currently selected. Once all other parts are in place, all three objects, the box, the character and the value field can be set up as a single button to perform a script when tapped that either adds the value to a list or removes it.

                   But you'll need to decide how to store the list of selected values for any given record in the LayoutTable. One option is to define a related table of records. Tapping a button in the portal to select a value causes the script to create a new record with that value in the related table. Clearing the selection deletes this same record. The other option is to store the selected values just like a single field formatted with check boxes stores the multiple selected values. The script would append newly selected values to a return separated list of values in a single field or delete them from that same list. You'll want to carefully consider those options because what you want to do with these selected values in the rest of your database may be easier to do with one storage option or the other. With the related table, for example, a summary report can be set up to show the number of times each individual value was selected.

                   In this demo file, there's a check boxes layout that illustrates the "related table" option: https://www.dropbox.com/s/oyir7cs0yxmbn6i/ManyToManywDemoWExtras.fp7 It's in the older file format so you'll need to use Open from FileMaker's file Menu to convert the copy to the newer file format.

                   Here's a script that either appends a new value to a list in a field or deletes it if it is already in the list:

                   If [ IsEmpty ( FilterValues ( LayoutTable::SelectedValues ; CheckBoxValues::ValueField ) ) // then value has not been selected ]
                      Set Field [ LayoutTable::SelectedValues ; List ( LayoutTable::SelectedValues ; CheckBoxValues::ValueField ) ]
                   Else
                      #Remove selected value from list
                      Set FIeld [ LayoutTable::SelectedValues ; //See calculation shown below ]
                   End If

                   //Calculation to remove value from list:

                   Let ( [ TheList = ¶ & LayoutTable::SelectedValues & ¶ ;
                              NewList = Substitute ( TheList ; ¶ & CheckBoxValues::ValueField & ¶ ; ¶ )
                            ]
                              Middle ( NewList ; 2 ; Length ( NewList ) - 2 )
                           ) // Let

                   The middle expression removes the returns (¶) that were added at the beginning. The ¶ characters are used in this fashion to make sure that this works even if one value in your list has values like "Apple" and "Applesauce".

                   A conditional format expression for the X character can use: IsEmpty ( FilterValues ( LayoutTable::SelectedValues ; CheckBoxValues::ValueField ) ) to set the font size to 120+ pts to make it disappear. Or you can put that expression in FMP 13's "Hide Object When" box to produce the same result.