Three state checkbox?

[JomarGF]

Hi everyone

Has anyone come across a need for a three state checkbox (checked, unchecked and null)? This is mainly to save precious screen real estate.

I need to filter a gallery  based on a check box that would show, checked, unchecked and both.

Any ideas to accomplish this is very welcome. Thanks.

[mdevaney]

What does a null checkbox look like? How would the user change the checkbox to null? Maybe some example pictures of what you are trying to accomplish would help me understand

[JomarGF]

Hi there.

Just thinking on top of my head. A greyed out checkbox maybe? 

Check box might not be the way to go. 😞 

[mdevaney]

@JomarGF
How does a user trigger the checkbox to become null?

Also, what does null indicate to the user?

[JomarGF]

Hi there

I have attached a screenshot. 

I am referring to the left topmost check box. If I tick it, it would filter all green boxes, untick would show red ones, and third state would show me all of the items (green, red and white).

Cheers!

[JomarGF]

Sorry, correction...

Ticked = show all checked (green and red),

Unticked = show all unchecked (white)

Third state = show all (ticked and unticked).

Thanks!

[mdevaney]

I have an idea...  please standby

[JomarGF]

I'll be indebted. 🙂

[mdevaney · Accepted solution]

@JomarGF 

The first step is to create a variable defining the triple-checkbox state.  In the OnVisible property of your screen use this code.

Set(checkboxState,"null")

Next, I'd like you to create a new label control with the following properties

Text = "✔"
Color = Black
Fill = LightGray
BorderColor = Black
BorderThickness = 4

The result will be a label that looks like a checkbox like this.  Of course, you change the style to match your needs.

Now click on the label once again and edit these properties.

Fill = Switch(checkboxState,"null",LightGray,"ticked",Green,"unticked",White)
OnSelect = Switch(checkboxState,
                  "null",Set(checkboxState,"ticked"),
                  "ticked",Set(checkboxState,"unticked"),
                  "unticked",Set(checkboxState,"null)
                  )

Now start your app a give it a test run.  Click on the checkbox.   Notice how it changes color after each click?  Nice!

Next comes the tricky part to explain.  You are going to have to write a FILTER function in the Items property of your gallery.  See my code below.  You must change your_datasource_name to the datasource and Value1, Value2, Value3 to the values that represent your colored checkboxes in datasource for each state

Filter(
    your_datasource_name,
    Switch(
    	checkboxState,
        "null",checkbox="value1",
        "ticked",checkbox="value2",
        "unticked",checkbox="value3"
    )
)

I think this info will give you a good start.  Hopefully it was worth the wait!

---
Please click "Accept as Solution" if my response helped to solve your issue so that others may find it more quickly. If your thought the post was helpful please give it a "Thumbs Up."

[JomarGF]

Hi there.

Thank you for sharing this trick.

Working on the filter now. 🙂

Have a great day.