Isoblue Mock up

note: I have tried to keep the explanation as general as possible to maximise applicability to any list use case. I can provide specifics to my use case as required.

Working Example:

Please drag and drop the element below, delete them, open and close sub lists, promote, demote etc. (The list is not data driven and refreshes on page refresh)

Please try it out…..

To the right >

This is a working example of the static content UI of a nested table. (It’s an iframe of a ‘Chromatic’ published example of DND-KIT example.)

The top level is dragable, sub levels can be promoted, top levels demoted, all elements reorders, levels with children can be collapsed.

Beautiful no?

DND-KIT

Below

The UI example is the start - my integration/component requirement does the following:

1. Data stored and updated in Adalo Collection (to a user defined Table / Field to create and manage the content for the list.)

2. Adds a new top level list item (Min 1 Character)

3. All top level items have a UI sub item place holder to make adding sub items intuitive.

4. The placeholder is always at the bottom of the sub item nested list.

5. A count of linked ‘Things’ where things are related items linked to the list item. Linked ‘Things’ are a user defined collection that is linked to the parent list.

6. The delete (x) (or dustbin icon) is only visible when the link count (5) is zero (preventing orphaned linked records)

7. List Title and >0 linked is link to child list.

8. Pencil opens edit in modal overlay (Min 1 Character)

9. 6 dots is drag handle

10. Carrot (down arrow) is open close sub list. Empty sub list contains the + sub category link. Every top level list has a carrot (down arrow) icon.