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 -
1) Data type - you need to specify what type of objects from the database you want to display on the chart.
2) 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 -
1) 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")
2) Image Field - Field type in the "image" format. Will be used as the main image of each node.
3) Title Fields (1,2) - displayed on the main chart. There may be, for example, Full Name and Position.
4) 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:
1) Chart Orientation - 8 chart orientation options (horizontal and vertical)
2) Select Template - 11 different styles with unique color scheme and variation are fully integrated.
3) Menu Color - select the color of the standard side menu.
Additional settings:
1) 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.
2) 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.
3) Enable Export - Activate the ability to export the entire graph in PDF, PNG, SVG, CSV, JSON format. The file is automatically downloaded.
4) 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:
1) 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.
2) Node clicked event - This event is triggered when you click on any node.
Now about the important accessible states of the plugin element:
1) List of objects - this state stores data of all unloaded objects in JSON format.
2) 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.
3) 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.
4) 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/orgchartEditor view -
https://bubble.io/page?type=page&name=orgchart&id=demoeazycode&tab=tabs-1
Built on Bubble
