Hey Bubblers !
Welcome new Ez Organization Chart - BALKAN plugin
The new EazyCode Organization Chart plugin for Bubble No Code platform, is an intuitive, dynamic and innovative tool, designed to simplify and enhance the process of creating visually appealing and interactive organization charts. This plugin allows users to generate customizable, user-friendly org charts without needing 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 of features such as drag-and-drop functionalities, customizable nodes, interactive interface, and data export/import capabilities.
OrgChart.js plugin, makes organizing and visualizing complex data easy and appealing, which can significantly improve understanding, making this a must-have tool for both beginners and experienced Bubble users.
BALKAN OrgChart.js lets developers to create simple, flexible and highly customizable organization chart for presenting structural data in an elegant way.
BALKAN OrgChart.js is a robust, sophisticated JavaScript library designed specifically for creating intricate, interactive organizational charts. It enables developers to generate and manipulate complex org charts seamlessly, equipped with numerous customizable features. This library supports both vertical and horizontal chart layouts with advanced elements such as nodes, connections, and images for enriching data visualization. Whether the goal is to represent corporate hierarchy, familial relationships, or any other type of networked structure, BALKAN OrgChart.js offers an efficient and intuitive solution. It maintains a high-performing framework, ensuring smooth user experiences even with large data sets.
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 absolutely 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!
Don’t forget to leave a review and share your experience of using it. We are also open to help with installation and further upgrades of the plugin! Thanks and Happy No-Coding!
Links
Service Link: https://docs.eazycode.com/ezcode-documentation/plugins/ez-org-chart
Instructions
This plugin is very easy to install. You will only need to install and configure just one element - “EZ Org Chart” on your page and in the place where you want to display your Org Chart. The plugin element fully supports Bubble style settings, layout of the new responsive and also with borders.
This JS library is integrated into the Bubble environment and fully interacts with objects from the database.
The plugin element has the following mandatory and additional settings. Each object/person of the chart will be further specified as a “node”. Detailed description:
The main and mandatory data settings are -
- Data type - you need to specify what type of objects from the database you want to display on the chart.
- Data source - after selecting the date type, you must specify the data source. Most often you can use “Do a search” and do a completely custom filtering of your objects.
Next are the settings for defining fields for display and their parent connections -
- Parrent 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.
The plugin also implements several style settings:
- Chart Orientation - 8 chart orientation options (horizontal and vertical)
- Select Template - 11 different styles with unique color scheme and variation are fully integrated.
- Menu Color - select the color of the standard side menu.
Additional settings:
- 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 selecting 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 griger for further work in any scenario convenient for you.
- Enable Export - Activate the ability to export the entire graph in PDF, PNG, SVG, CSV, 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.
Now in more detail about the events of the plugin:
- Node dropped event - this workflow event will be triggered every time a drag’n’drop action was 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.
Now about the important accessible states of the plugin element:
- 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.
- ID of the Clicked Node - this state will always store the value of the last clicked node.
That’s all. You can view all the above settings and check the interaction and implementation on our demo page - https://demoeazycode.bubbleapps.io/version-test/orgchart
Editor view - demoeazycode | Bubble Editor
Feel free to contact us for any inquiries and we’ll be happy to find a solution for your ideas - https://eazycode.com
Hope you will like it !
Regards Pavel, EazyCode team .