Tree View For Hierarchical Data

Ask us anything
1

Hi,
I have a mobile app that I’m building in Flutterflow for field technicians to create workorders. I’m considering using WeWeb to build the admin web app that will manage the data, print workorders, etc. and want to see if it will work for my needs.

Here is the difficult part: The item data is a hierarchical list of items (a few thousand) in a Supabase table. The items are browsed and selected in the mobile app in a tree structure. Each row is either an item or header. Each row has an “ID” and a “ParentID” that is used to build the tree structure on the fly. There is also a column “IsHeader” to indicate if a row is a header or item. It’s early in the design, so I can change the tree scheme if needed. Users of the mobile app do not need to modify the tree structure.

In the web app for the office (WeWeweb) I need to be able to reconfigure the tree to their needs. For example, some clients may want the item tree arraigned as:

**MATERIAL** ("ID"=0" "ParentID"=null, isHeader"=1)
 >**LUMBER** ("ID"=1" "ParentID"=0, isHeader"=1)
    >**PRESSURE TREATED** ("ID"=10" "ParentID"=1, isHeader"=1)
      -2x4 PT ("ID"=10001" "ParentID"=10, isHeader"=0)
      -2x6 PT ("ID"=10002" "ParentID"=10, isHeader"=0)
    >**KILN DRIED** ("ID"=20" "ParentID"=0, isHeader"=1)
      -2x4 KD ("ID"=10003" "ParentID"=20, isHeader"=0)
      -2x6 KD ("ID"=10004" "ParentID"=20, isHeader"=0)

And some may prefer:
**MATERIAL** ("ID"=0" "ParentID"=null, isHeader"=1)
 >**LUMBER** ("ID"=1" "ParentID"=0, isHeader"=1)
    >**2x4** ("ID"=10" "ParentID"=0, isHeader"=1)
      -2x4 PT ("ID"=10001" "ParentID"=10, isHeader"=0)
      -2x4 KD ("ID"=10003" "ParentID"=10, isHeader"=0)
    >**2x6** ("ID"=20" "ParentID"=0, isHeader"=1)
      -2x6 PT ("ID"=10002" "ParentID"=20, isHeader"=0)
      -2x6 KD ("ID"=10004" "ParentID"=20, isHeader"=0)

I need to build an interface to achieve that, preferably drag and drop:
-Create / edit categories
-Drag sub-categories from one to the other
-Add / delete / edit items
-Drag items from one category to another
etc…

It’s early on in the app development. The item browsing function is working well, but I could still change the approach for storing the items if there is a better way.

Is this possible with WeWeb?
Thank you.

1 Like
2

Thank you for your question. Let me check with the team and see how we can assist you. I will get back to you as soon as possible.

3

This should be possible, you should definitely make a proof of concept with the Stack element. It eventually boils down to how you structure your data and how granular your logic is. Other than that, this should be pretty much doable :slight_smile: I’d need to see a bigger picture to give you a more decise answer tho

1 Like