How to use the plugin
You can configure the org chart in two different ways:

Method 1: Filling in individual properties

Enter the following fields:

id: Unique identifier for each person in the org chart (each person is represented by a node, and Node is the square where the person's information is displayed).

pid: Identifier of the person hierarchically above. If the node is the main node (at the top of the org chart), leave this field blank.

name: The person's name.

title: Text displayed immediately below the name (e.g., the title or function).

image: URL of the person's image (optional).

Simplified example:

id = 1
pid = (empty)
name = Alex
title = CEO
image = https://cdn.balkan.app/shared/1.jpg




Method 2: Filling in the Content field

You can directly provide a set of objects in the format accepted by the library, as in the example below:


[

{ id: "1", name: "Jack Hill", title: "Chairman and CEO", img: "https://cdn.balkan.app/shared/1.jpg" },
{ id: "2", pid: "1", name: "Lexie Cole", title: "QA Lead", img: "https://cdn.balkan.app/shared/2.jpg" },
{ id: "3", pid: "1", name: "Janae Barrett", title: "Technical Director", img: "https://cdn.balkan.app/shared/3.jpg" },
{ id: "4", pid: "1", name: "Aaliyah Webb", title: "Manager", img: "https://cdn.balkan.app/shared/4.jpg" },
{ id: "5", pid: "2", name: "Elliot Ross", title: "QA", img: "https://cdn.balkan.app/shared/5.jpg" },
{ id: "6", pid: "2", name: "Anahi Gordon", title: "QA", img: "https://cdn.balkan.app/shared/6.jpg" },
{ id: "7", pid: "2", name: "Knox Macias", title: "QA", img: "https://cdn.balkan.app/shared/7.jpg" },
{ id: "8", pid: "3", name: "Nash Ingram", title: ".NET Team Lead", img: "https://cdn.balkan.app/shared/8.jpg" },
{ id: "9", pid: "3", name: "Sage Barnett", title: "JS Team Lead", img: "https://cdn.balkan.app/shared/9.jpg" },
{ id: "10", pid: "8", name: "Alice Gray", title: "Programmer", img: "https://cdn.balkan.app/shared/10.jpg" },
{ id: "12", pid: "9", name: "Reuben Mcleod", title: "Programmer", img: "https://cdn.balkan.app/shared/12.jpg" },
{ id: "14", pid: "4", name: "Lucas West", title: "Marketer", img: "https://cdn.balkan.app/shared/14.jpg" },
{ id: "15", pid: "4", name: "Adan Travis", title: "Designer", img: "https://cdn.balkan.app/shared/15.jpg" },
{ id: "16", pid: "4", name: "Alex Snider", title: "Sales Manager", img: "https://cdn.balkan.app/shared/16.jpg" }

]


Important Notes

If the Content field is filled in, the plugin automatically ignores the data entered in the individual properties of Method 1.

If you do not fill in the Content field, the organizational chart data will be constructed from the id, pid, name, title, and image properties.





_______________________________________________________________








See my example at: https://retornadado4.bubbleapps.io/version-test/organochart?debug_mode=true



Editor: https://bubble.io/page?id=retornadado4&tab=Design&name=organochart&type=page&elements=bTJcz0