MARKETPLACE
PLUGINS
TREE EXPLORER - THINGS FILES & JSON
Tree Explorer - Things Files & JSON logo

Tree Explorer - Things Files & JSON

Published December 2020
   •    Updated this week

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 logo
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

Categories

This plugin can be found under the following categories:
Data (things)   •   Analytics   •   Visual Elements

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)
May 26th, 2021
  •  
Yocto Increments
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Immerse
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales