TREE EXPLORER - THINGS FILES & JSON

Tree Explorer - Things Files & JSON

Published December 2020

    •    Updated this month

Plugin details

This tree-widget allows you to view your Things and Files in a hierarchical fashion. 

Features (Tree for Things):
* Display a hierarchy of nested Things or API data
* Transform a flat list of Things into a hierarchy
* Upload your own icons for a specific Thing-Type, or Tree-Level or overwrite the default one.
* Automatically display corresponding file-icons
* Different styles of mimetype-images available, such as high-contrast for dark mode.
* Single / Multi select & output of Nodes
* Allows for hidden/intermediate levels.
* State/Event to monitor all displayed items in the tree.
And more..
* Automatically expand (optionally select) the root up to the nth level.
* Support for "Parent-Child" as well as "Child-Parent" relations (see the Beta flag below)
* Events for knowing what was selected/clicked
* Events for knowing what is displayed
* Actions for Refreshing the tree to update on changed data.
* Apply custom colors for hovering & selection

Features (Tree for JSON):
* Fine grained control of the tree using a specific JSON format (see "instructions" for the supported formats") (such as the initial opened/disabled/checked state)
* Or alternatively a JSON viewer for any arbitrary structure (see section 4 in the widget configuration)
* Properties to read the current selected texts / data. 
* Specify a custom icon (max 24x24px) for the node.


Breaking change version 2:
The tree widget was updated to support Bubble's responsive engine, deprecating the "Vertical Overflow" setting, now defaulting to "Show Vertical Scrollbar" when needed. If any layout issues occur, please inform me and i'll get on them asap!


I'm currently taking feature & improvement requests. Feel free to share your thoughts or ask for help by sending an e-mail to:  [email protected]

Tested on IE11, Edge,(Chromium), Firefox and Chrome

🚧 This widget also contains beta functionality to resolve children via parent-fields (Where a child points to it's parent). This functionality is not 100% stable and performant and i'm looking for real feedback. 


Pro tip: Subscriptions are prorated and therefore a really cheap way to try this plugin!

👍 Do you love the plugin? Consider supporting further support/development by subscribing  or leaving a review.

$12

One time • Or $3/mo

3.9 stars   •   7 ratings

185 installs  

This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Yocto Increments

Joined 2020   •   4 Plugins

View contributor profile

Instructions

Tree for Things & Files - Basic Configuration: 

Step 1. Configure the "Root Nodes Type" and "Root node(s)" in Section 1. 
Step 2. Configure the section 2.1. with the same type you selected earlier in Section 1., Specify a "Label / Title" field.

Additional Configuration - Child nodes:
* (Section 2.1.) Select child-fields containing other Things or Files. These things will be shown as Children.

Additional Configuration - Virtual nodes:
If your data does not contain hierarchy (nested files/things), you can simulate hierarchy.
* (Section 4): Select a Field (text or number) that should be be used for the virtual node level.

See the demo page for examples of the additional features, such as

* Custom icons
* Auto expanding
* Single/Multi selection
* Vertical layout management
* Custom Styling
and more


Tree for JSON - JSON Format

The Widget is by default configured to show one a very basic tree. This tree expect either of two formats:

1. Parent-Child
{
  text        : "string" // node text
  icon        : "string" // url to 24x24px (or smaller) icon image
  state       : { //optional -tell the tree that the:
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  data     : {}  // any string or object, that will be available through the widget's outgoing "current selected Node(s) data" property
}

2. Child point to parent (id and parent are required fields)  
{
  id          : "string" // required
  parent      : "string" // required
  text        : "string" // node text
  icon        : "string" // custom icon image
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  data     : {}  // any string or object, that will be available through the widget's outgoing "current selected Node(s) data" property
}



https://tablesdemo.bubbleapps.io/tree_demo

Types

This plugin can be found under the following types:

Background Services   •   Element   •   Event   •   Action

Resources

Support contact

Documentation

Tutorial

Rating and reviews

Average rating (3.9)

Amazing plugin

September 12th, 2024

Really flexible and the developer responded really fast! Perfect for our app.

Very helpful developer

November 26th, 2022

The developer is always fast responding and very helpful. Our company decided to go with his solutions.

A very flexible plugin for trees

October 9th, 2022

Does mostly solve the needs of a tree structure.
Would like to have context clicking, and links & pictures in levels.
Level counter and more efficient parent-child solution.

But overall very satisfied with the plugin.

Support is very good. Quick response and fixes.

A brilliant plugin from a caring developer

November 4th, 2021

The Tree Explorer plugin is perfect for displaying folders and documents which is what I'm using it for, but I can see it has many other use cases. It's a fantastic capability to have in bubble and when I asked for a feature improvement I was so impressed by Ivo's quick communication an speed of implementation! I couldn't be more impressed.

unclear, no support

May 26th, 2021

unclear plugin, I just wanted to create a tree from categories and parentCategories but semt too complicated.
Asked support and had no reply. Will do another way

While others have been able to successfully reach me in the past days, i have to say there's nothing in my inbox from your account. I really enjoy working on support requests, and it is in fact one of the primary drivers for sharing these plugins. For future reference, anyone is able to mail [email protected]

As for the hint on your data structure, the tree is made to display parent-child relationships. In your case it sounds like every category points to a parent, it would cause the tree to show reverse. I'll add support for reversely modelled relationships to the backlog. (plugin author)