Ez Organization Chart
Last updated
Was this helpful?
Last updated
Was this helpful?
The new Ez Organization Chart plugin, developed by EazyCode for the Bubble.io No Code platform, is an intuitive, dynamic, and innovative tool designed to simplify and improve the process of creating visually appealing and interactive organization charts. Our plugin allows users to generate customizable, user-friendly org charts without requiring them to write a single line of code. With this plugin, Bubble users can create hierarchical diagrams to illustrate the structure of an organization or a team, their roles, relationships, and relative ranks. Ideal for business applications, this tool boasts features such as Drag'n'Drop functionalities, customizable nodes, an interactive interface, and data export/import capabilities.
Drag and drop objects with real-time updates.
Customizable nodes(objects) with personal data.
Convenient toolbar for easy navigation through the application.
The ability to dynamically change the visual structure of an organizational chart.
Advanced zoom features: In the plugin settings there is an option to completely disable mouse zoom, limiting it to only the "+" and "-" buttons when the toolbar is active.
The scrolling experience has been implemented with added softness for smoother navigation.
An initial scaling feature is included that intelligently adjusts based on the size of the graph. This ensures that the graph will be centered, providing an optimal view where all elements are visible after initialization.
Installing this plugin is a simple process. You will only need to install and configure one Ez Organization Chart component on your application in the desired location to display the organizational structure. The plugin component easily integrates with Bubble style settings and offers responsive layout and border options.
This JS library integrates seamlessly into the Bubble environment, allowing full interaction with database objects. The plugin component offers both basic and advanced settings. Each object/person on the chart will be further specified as a “node”.
For a better understanding, the screenshot shows an example of the structure of an object in the database.
Data Type - You need to specify what type of objects from the database you want to display on the graph.
Data Source – After selecting the date type, you must specify the data source. Most often, you can use "Do a Search" and perform a fully customizable filtering of your items.
Parent Field - Mandatory selection of a field that denotes the parent of the node.
IMPORTANT! You must specify a specific field from the selected object type.
This field must be in TEXT format and contain the "Unique Id" of the main object above it. (ex."1697627438859x673683393091416600")
Image Field - Field type in the "image" format. Will be used as the main image of each node.
Title Fields (1,2) - displayed on the main chart. There may be, for example, Full Name and Position.
Additional Fields - used in the details side menu, in the standard setting. when you click on a node.
Chart Orientation - 8 chart orientation options (horizontal and vertical).
Select Template - 11 different styles with unique color schemes and variations are fully integrated.
Menu Color - select the color of the standard side menu.
Enable Searchbox and Placeholder - Activation of fast and optimized search according to schedule. After finding the object, an automatic zoom occurs on the selected node. Also, select placeholder text in the search bar.
Enable Drag'n'Drop - Activation of the ability to transfer nodes according to a schedule, as well as the Bubble event trigger for further work in any scenario convenient for you.
Enable Export - Activate the ability to export the entire graph in PDF, PNG, SVG, CSV, or JSON format. The file is automatically downloaded.
Enable Menu - Activation of the standard library menu with information including the above additional fields. Also from the menu, it is possible to download the card of the selected node to PDF.
Node dropped event - this workflow event will be triggered every time a Drag'n'Drop action is performed on the chart. To configure it correctly, read the element’s states below.
Node clicked event - This event is triggered when you click on any node.
List of objects - this state stores data of all unloaded objects in JSON format.
Dragged Node ID - this state will help you when implementing your “Node dropped” event scenario. When performing the Drag'n'Drop action, this state will store the Unique ID of the node that you dragged.
On drop Node ID - When performing the Drag'n'Drop action, this state will store the Unique ID of the node to which the node was dropped.
The ID of the Clicked Node - this state will always store the value of the last clicked node.
ATTENTION! OrgChart.js is a paid library but with a trial period. During the trial period, you can use up to 200 nodes, which is enough for most future MVP projects. All you need to do is install the plugin, connect the necessary objects, and your Organization Chart is ready!
Hire us:
This plugin connects Bubble and the "orgchart.js" library from the BALKAN OrgChartJS company. You can learn more about the full capabilities of the library and prices on their .
You can also see an example of using the capabilities of this plugin in our template.
That's all. You can view all the above settings and check the interaction and implementation on our and page.
Feel free to contact us for any inquiries and we’ll be happy to find a solution for your ideas –
Follow us:
