Best way to display an editable list of list

Question

I'm working on a web project and I have a list of list which can be edited. It's displayed within a modal, I can resize it as I want so it's not that big of a deal. My main problem is I don't really know how I could display it with almost every information easily accessible (0 clicks ideally).

To give a little background, let's say you have a JSON that looks like the following :

{
    "value": "value",
    "conditions": [
        ["condition1", "condition2"],
        ["condition1"],
        ["condition1", "condition2", "condition3"]
    ]
}

So, you have a value that have some conditions, there's usually between 1 and 3 conditions in each conditions array (it can be more but most of the time it's not).

Each conditions array represent elements tied together (like condition1 AND conditions2 ...).

There is no length limit for the conditions array and the sub arrays.

I though about a list of input representing the conditions separated with a comma (so you can display it and edit it at the same place) but I realized that what's in the input is already defined in the system and should not be random things. So input is a no go as it could compromise the data. A selection from a drop-down or checkbox somewhere is what I'll use for the editable part. No issue here but I wanted to make clear that a list of input is not possible.

I'm using bootstrap 4, I though about of something like a grid of bootstrap list-group but I'm concerned about the result readability and the fact that the AND is not explicit.

Also, we should be able to add or delete elements in each list.

List-group grid is the best I could think of by now.

EDIT: Here's what it looks like using a list grid :

https://jsfiddle.net/y70b651p/15/.

As you can see, the result isn't great at all if list's lengths are too different.

Do you have any better solution?

Answer 1

To be able to give a more detailed answer, I'd need more contextual information about who it's for, what it's purpose is, and what situations they'll be using it.

But to address some of the shortcomings of the current design you linked to, I'd do the following:

• Somehow convey to the user that the requirements are children of a parent item.
• Give some visual indication that they can be changed.
• Include explanations of the "AND" logic in the design.

Here's a mock-up showing some of those in action: