12 Replies Latest reply on Jan 15, 2017 10:36 PM by MacDevGuy

    conditional formatting to replace checkboxes with color squares

    MacDevGuy

      Is there a way to make a table of rectangles act like buttons?

       

      More info:
      I want to take a list of categories that are selected using checkboxes but instead arrange them in a table with conditional formatting so they act like on/off switches. I would use green for "on" and light red for "off" Does anyone know of a solution to make this happen or example files I might take a look at for examples?

      TIA...

      John

        • 1. Re: conditional formatting to replace checkboxes with color squares
          beverly

          Instead of checkboxes, just place squares (a single text space, sized to desired) and then conditionally format. IF you need to set a field, make that part of the script (make the square a button). The actual field need not even be on the layout to be "set" or "unset".

           

          Or use real buttons which can be conditionally colored. Then set the field.

           

          beverly

          • 2. Re: conditional formatting to replace checkboxes with color squares
            Mike_Mitchell

            Okay, if you have a list of values and you're wanting to toggle some buttons on and off, you can use something like this in your CF calculation:

             

                 not IsEmpty ( FilterValues ( myListField ; thisButtonTrueValue ))

             

            and just assign each button to the default color (i.e., on or off / red or green).

             

            This is assuming you have a single field that might contain one or more of the values you're setting. Then, for each button, you create a script like this:

             

            Set Variable [ $value ; Get ( ScriptParameter ) ]

            Set Field [ myListField ; cfAddRemoveListValue ( myListField ; $value ) ]

             

            So what the heck is "cfAddRemoveListValue"? Here's the custom function I use for this sort of thing:

             

            // AddRemoveListItem (theList; value)

            // Author: David Head, uLearnIT

            // theList: standard return separated list

            // value: text

            // this function will add an item to a list if it does not already exist; otherwise the item is removed from the list

             

             

            Let ([

            novalue = IsEmpty ( FilterValues ( theList ; value ) ) ;

            listminusvalue = Substitute( "¶¶" & theList & "¶¶"; [ ¶ & value & ¶ ; ¶ ] ; [ "¶¶¶" ; "" ] ; [ "¶¶" ; "" ] ) ;

            listplusvalue = List ( theList ; value )

            ] ;

             

            If ( novalue ; listplusvalue ; listminusvalue )

             

            )

             

            HTH

             

            Mike

            • 3. Re: conditional formatting to replace checkboxes with color squares
              MacDevGuy

              Thanks Mike and beverly. More info... I want a nice looking interface but I also want to avoid the repeating field because of the problems it creates when getting exported. So I though I would break each value into it's own field and either use a radio button (on/off) or checkbox hidden. Sound like the methods you both have suggested. So the question is can these buttons toggle? e.g. One click turns on and one click turns off? I suppose I could have the left side activate "off" and the right side activate "on" and use a rocker style switch but I want it to be simple and I though squares or rounded corner rectangles would present better.

              • 4. Re: conditional formatting to replace checkboxes with color squares
                Mike_Mitchell

                You don't have to break each value into a separate field. My example doesn’t require it. In fact, I explicitly said it was a single field.

                 

                Breaking the values into separate fields is a bad idea from a database normalization standpoint. Every time you have a new value, you need a new field. Ugly.

                • 5. Re: conditional formatting to replace checkboxes with color squares
                  beverly

                  I also did not say 'repeating fields'. While they may have their place, not here.

                   

                  I said you can have however many fields you want, just don't place them ON the layout. Place squares of a single text space and size as needed. Turn into button with a script to

                   

                  SET field ( myfield; not myfield // toggle on/off )

                   

                  then conditionally format the squares however you need.

                   

                  IF the fields are not numbers (1/0), but text values then something like this:

                   

                  SET field ( myfield ; Case ( myfield = "no" ; "yes" ; "no" // toggle with your text ) )

                   

                  OR

                   

                  Use real buttons (text label or icon or nothing but color) that call the script and conditionally format with colors.

                   

                  conditionalformat_: set the field to "no/off" with red background then this in the conditional format:

                   

                  myfield = "yes" // set the color to green

                   

                  You do not need to place the field on the layout to use the value of it or to set/unset it.

                   

                  beverly

                  • 6. Re: conditional formatting to replace checkboxes with color squares
                    MacDevGuy

                    Just to clarify Mike, CF Calculation refers to calculation field correct?

                    • 7. Re: conditional formatting to replace checkboxes with color squares
                      Extensitech

                      Not to butt in, but CF = "Custom Function"

                      • 8. Re: conditional formatting to replace checkboxes with color squares
                        beverly

                        yes! except this topic is about Conditional Formatting (also c.f.)

                         

                        beverly

                        • 9. Re: conditional formatting to replace checkboxes with color squares
                          Mike_Mitchell

                          Beverly is correct. "CF" refers to Conditional Formatting (in this context).

                           

                          Darned alphabet soup. Gets me every time ...  

                          • 10. Re: conditional formatting to replace checkboxes with color squares
                            jonmyrah

                            John... I have created similar on/off "switches" using a button bar with two buttons, one for "on" the other "off". Clicking on either button triggers a change to a value in a hidden field and there is conditional formatting applied to each button in the button bar that changes the fill color depending on the value of said field. Sounds like the same method beverly was suggesting, just with only one layout object.

                            • 11. Re: conditional formatting to replace checkboxes with color squares
                              beverly

                              Yes, buttons was one of my options, too.

                              However, you appear to be using TWO buttons (in a single button bar) and hiding one (based on the "toggle"). Where I suggested one button and changing color (this allows multiple colors, not just the two).

                               

                              beverly

                              • 12. Re: conditional formatting to replace checkboxes with color squares
                                MacDevGuy

                                So here's a demo file of the buttons. In my solution you only see the colored squares on the top, not the checkbox items in the bottom half. This is exactly what I wanted to do.

                                 

                                Beverly I have to say I missed the meaning behind what you were saying. I eventually worked with another new developer friend who is also new to developing with Filemaker but he's a lot further along than I am. So here's a look at the finished product. Pardon the garish colors. This is just an example file I used to work out the method.

                                 

                                 

                                As I am reviewing this I also understand Mike's answer better now too. The calculation you wrote is great and simpler than I had realized. Along with understanding it I also finally got what "Let" does - that's a mighty useful function. I have a feeling I'll be using that one a lot. Mike's calculation would have been a good solution as well - I just felt it was better to start from a simpler foundation at this point. I can get fancier later. :-) Thanks Mike!

                                 

                                I also want to give a thumbs up to jonmyrah for his suggestion. I had originally intended to do something like switches but after digging around I didn't find anything. I also decided that switches would look busier on the actual layout so I went with the squares.