Jump to content
UBot Underground

Tree View In Ui Html Panel


Recommended Posts

Apologies if this has been asked before.

 

I have a database that tracks folders, and items inside those folders. I'd like to present them in a Tree View in the UI HTML Panel, but I can't seem to figure out a good way to do it.

 

Ideally it would look like

 

Folder #1

   - Item #1

   - Item #2

   - Item #3

Folder #2

   - Item #4

   - Item #5

 

etc.

 

I know I could use some kind of HTML/CSS/Javascript to get the tree view functionality working, but I can't figure out how to best populate the tree, and equally important: how to call a ubot function when an item (not folder) is clicked.

 

Is the only way to loop through the database, pull the folder name, build an unordered list and populate the list for each item inside the folder in a string builder, then render the final result in the UI? That seems sloppy, hoping someone might know of a better way. And even if that is the best way, how would you recommend setting a trigger on each tree item to fire on click, and report back to ubot the value clicked?

 

Thanks for your time, hope that makes sense!

Edited by drewness
Link to post
Share on other sites

I can show you how to pass parameters from your UI HTML Panel (or Load HTML), you could pass the items that way. But for a treeview you would have to make a command that basically builds the HTML for you.

ui html panel("<html>
<body>
<button onclick=\"ubot.runScript(\'MyMethod("hello")\');\">Click</button>
</body>
</html>","")
define MyMethod(#msg) {
    alert(#msg)
}
  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...