Contact us Create app

Directory

← Back

OrgChart Add-on

Organizational Chart Addon

Author

Contributors

Rating

Links

Popularity

300+

This add-on allows you to create organizational charts that can show different hierarchies based on the provided data.

This add-on is based on the JQuery version of the component that you can find here: https://github.com/dabeng/OrgChart.

Supported library features: data (json), pan, zoom, zoominLimit, zoomoutLimit, direction, verticalDepth, depth, toggleSiblingsResp, nodeTitle, nodeContent, exportButton, exportFilename, exportFileextension (png & pdf), Enable/disable exapand/collapse feature and add a chart title.

Found a bug or have a suggestion? Report it on GitHub

For bug reports, feature suggestions, or questions, please open an issue on GitHub. This makes it easier for us to track and respond efficiently, ensuring you get the best possible support. Your input helps us improve—thank you!

Sample code

OrgChartItem item1 = new OrgChartItem(1, "John Williams", "Director");
OrgChartItem item2 = new OrgChartItem(2, "Anna Thompson", "Administration");
OrgChartItem item3 = new OrgChartItem(3, "Timothy Jones", "Sub-Director");        
item1.setChildren(Arrays.asList(item2, item3));        
OrgChartItem item4 = new OrgChartItem(4, "Louise Night", "Department 1");
OrgChartItem item5 = new OrgChartItem(5, "John Porter", "Department 2");
item2.setChildren(Arrays.asList(item4, item5));       
OrgChartItem item6 = new OrgChartItem(6, "Charles Thomas", "Department 3");	
item5.setChildren(Arrays.asList(item6));        
OrgChart component2 = new OrgChart(item1);
component2.setChartTitle("My Organization Chart Demo - Example 2 - BOTTOM TO TOP DIRECTION");    
component2.setChartNodeContent("title");
component2.setChartDirection(ChartDirectionEnum.BOTTOM_TO_TOP.getAbreviation());
component2.initializeChart();
OrgChart component1 = getExample1();        
component1.setChartTitle("My Organization Chart Demo - Example 1 - CHART EXPORT AS PICTURE");    
component1.setChartNodeContent("title");
component1.setChartExportButton(true);
component1.setChartExpandCollapse(true);
OrgChart component1 = getExample1();
String nodeTemplate = "<div class='title'>${item.title}</div>"+
        		"<div class='middle content'>${item.name}</div>" +
        		"${item.data.mail?`<div class='custom content'>${item.data.mail}</div>`:''}";
		component1.setNodeTemplate("item", TemplateLiteralRewriter.rewriteFunction(nodeTemplate));

...

public OrgChart getExample1() {
    	OrgChartItem item1 = new OrgChartItem(1, "John Williams", "Director");
    	item1.setData("mail", "jwilliams@example.com");
    	item1.setClassName("blue-node");
        OrgChartItem item2 = new OrgChartItem(2, "Anna Thompson", "Administration");
        item2.setData("mail", "athomp@example.com");
        item2.setClassName("blue-node");
        ...

Compatibility

(Loading compatibility data...)

Last updated: 2023-08-16

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

New features:

  • update orgchart library dependency to 3.7.0 (#66)
Released
2023-08-16
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 14
Vaadin 23
Vaadin 24
Vaadin 22 in 4.2.1
Vaadin 21 in 4.2.1
Vaadin 20 in 4.2.1
Vaadin 19 in 4.2.1
Vaadin 18 in 4.2.1
Vaadin 17 in 4.2.1
Vaadin 16 in 4.2.1
Vaadin 15 in 4.2.1
Vaadin 7.7+ in 1.0.0
Vaadin 8.0+ in 2.0.4
Browser
N/A

V-Leaflet-Draw - Vaadin Add-on Directory

Leaflet.Draw wrappers for Vaadin. Easily add advanced GIS features to your Vaadin app. V-Leaflet-Draw - Vaadin Add-on Directory
Leaflet.Draw wrappers for Vaadin. Easily add advanced GIS features to your Vaadin app. Contains editing features Leaflet vectors and JTS fields for simple data binding. Components in this add-on used to live in the V-Leaflet add-on but are now split into this separate add-on. Core is not more lightweight and there is more room for other editing extensions, like the promising "Leaflet.Editable" extension. V-Leaflet is a transitive dependency, so adding dependency to this add-on only is enough.
GitHub homepage

V-Leaflet-Draw version 0.6.0
null

V-Leaflet-Draw version 0.6.1
Possibility to select active tools and built against latest v-leaflet

V-Leaflet-Draw version 0.6.2
First version to support Leaflet 1.0 series

V-Leaflet-Draw version 0.6.3
Enabled Draw Options, updated to vaadin-7.7.3 and v-leaflet-1.0.3 versions

V-Leaflet-Draw version 0.6.4
Enabled more draw events

V-Leaflet-Draw version 2.0.0
First stable build for Vaadin 8

V-Leaflet-Draw version 0.6.5
Uses g-leaflet-draw 0.4.13

V-Leaflet-Draw version 2.0.1
CircleMarker draw support, enable/disable of Edit and Delete buttons

V-Leaflet-Draw version 0.6.6
Latest release Vaadin-7 compatible release. Uses g-leaflet-draw:0.4.14

V-Leaflet-Draw version 0.6.7
Enabled metric, feet and nautic options

V-Leaflet-Draw version 1.1.0
Migrated JTS to Eclipse foundation version

Online