How can I implement user-friendly boolean logic in a web form GUI?

Question

Currently I have a web application where a user can use dropdown lists to generate SQL SELECT statements like so:

Column Select Dropdown | Operator Dropdown (= != >

Answer 1

When you need to handle ( (A or B) and C) or (D or E or F), you're working with a tree-like data structure. In my experience, there's no easy way to represent decision trees to users in a "pretty" or "intuitive" way. Its doubly hard in ASP.NET webforms.

However, one tried and true approach is the following: single textbox accepting a where clause. Trust me, the single-input approach really is the most simple and intuitive user interface, and it also has the advantage* of allowing rapid input/modification of query filters.

** Another advantage, from the technical side, is being able write your own lexer/parser and AST. How often do you get to do that in a basic crud app :)*

You're already going to be training your users how to use your ad hoc query engine, you may as well train them that typing (account.Balance < -2000 and account.Type == 'Checking') OR (account.Number = 123456) returns exactly what it says it returns.

If you go with this approach, provide the user with a dropdown list of available columns, so that double-clicking on an item inserts the item into the textbox at the cursor location.

Answer 2

Mac OS X offers very nice GUI widgets for doing exactly this type of thing. You can model your GUI after this type of layout/interaction.

Answer 3

This is difficult to represent even in a WinForms app.

What you need to do is implement the concept of a condition group, which consists of one or more statements, and a conditional operator.

The best implementation of this I've see was from GameSpy server filtering -- I just tried to search to find a screenshot, but I came up empty (does that program still exist?). From what I recall, they did something like this:

(
    Condition 1
) OPERATOR
(
    Condition 2
) OPERATOR
(
    (
        Condition 3
    ) OPERATOR
    (
        Condition 4
    )
)

Answer 4

Apple seems to have found a way to design a GUI for nested boolean expressions: see the accepted answer on UX.stackexchange.

Answer 5

Another option is something like SQL Server Management Studio query builder interface - several rows and columns, where rows represents ANDs, and columns ORs (or vice versa, I don't remember).

You can do real-time update of resulting query to help users (just like SQL Server updates the resulting SQL).

Answer 6

There is a jquery plugin to do this, called QueryBuilder, which do this in an interesting way : http://mistic100.github.io/jQuery-QueryBuilder/