<div class="card">
    <h:form id="form">
        <style>
            .ui-organigram .ui-organigram-node.division {
                background: #93e7ff;
                background: -moz-linear-gradient(top, #93e7ff 0%, #007efc 100%);
                background: -webkit-linear-gradient(top, #93e7ff 0%, #007efc 100%);
                background: linear-gradient(to bottom, #93e7ff 0%, #007efc 100%);
            }
            .ui-organigram .ui-organigram-node.employee {
                background: #88c048;
                background: -moz-linear-gradient(top, #88c048 0%, #69a038 100%);
                background: -webkit-linear-gradient(top, #88c048 0%, #69a038 100%);
                background: linear-gradient(to bottom, #88c048 0%, #69a038 100%);
            }
        </style>
        <p:growl id="growl"/>
        <p:organigram id="organigram"
                      widgetVar="organigram"
                      value="#{organigramView.rootNode}"
                      var="node"
                      leafNodeConnectorHeight="#{organigramView.leafNodeConnectorHeight}"
                      autoScrollToSelection="#{organigramView.autoScrollToSelection}"
                      zoom="#{organigramView.zoom}"
                      selection="#{organigramView.selection}"
                      style="#{organigramView.style}">
            <p:ajax event="dragdrop" process="@this" update="@form:growl"
                    listener="#{organigramView.nodeDragDropListener}"/>
            <p:ajax event="select" process="@this" update="@form:growl"
                    listener="#{organigramView.nodeSelectListener}"/>
            <p:ajax event="contextmenu" process="@this"/>
            <p:ajax event="collapse" process="@this" update="@form:growl"
                    listener="#{organigramView.nodeCollapseListener}"/>
            <p:ajax event="expand" process="@this" update="@form:growl"
                    listener="#{organigramView.nodeExpandListener}"/>
            <p:organigramNode>
                <h:outputText value="#{node.data}"/>
            </p:organigramNode>
            <p:organigramNode type="root"
                              style="border-radius: 10px;">
                <h:outputText value="#{node.data}"/>
            </p:organigramNode>
            <p:organigramNode type="division"
                              styleClass="division"
                              icon="pi pi-briefcase"
                              iconPos="left">
                <h:outputText value="#{node.data}"/>
            </p:organigramNode>
            <p:organigramNode type="employee"
                              styleClass="employee"
                              icon="pi pi-user">
                <h:outputText value="#{node.data}"/>
            </p:organigramNode>
        </p:organigram>
        <p:contextMenu for="organigram" nodeType="employee">
            <p:menuitem value="fire employee"
                        update="organigram"
                        icon="pi pi-times"
                        action="#{organigramView.removeEmployee()}"/>
        </p:contextMenu>
        <p:contextMenu for="organigram" nodeType="division">
            <p:menuitem value="Add employee"
                        ajax="false"
                        icon="pi pi-plus"
                        onclick="PF('addEmployeeDialog').show(); return false;"/>
            <p:menuitem value="Remove division"
                        update="organigram @form:growl"
                        icon="pi pi-times"
                        action="#{organigramView.removeDivision()}"/>
        </p:contextMenu>
        <p:dialog id="addEmployeeDialog"
                  widgetVar="addEmployeeDialog"
                  header="Add employee">
            <p:inputText value="#{organigramView.employeeName}"/>
            <p:commandButton process="@parent"
                             update=":form:organigram"
                             value="Add"
                             action="#{organigramView.addEmployee()}"
                             oncomplete="PF('addEmployeeDialog').hide();"/>
        </p:dialog>
    </h:form>
    <h:form>
        <p:panel header="Options" styleClass="mt-5">
            <h:panelGrid columns="2" cellpadding="7">
                <p:outputLabel for="@next" value="zoom" styleClass="text-secondary" />
                <p:selectBooleanCheckbox value="#{organigramView.zoom}">
                    <p:ajax process="@this" update=":form:organigram"/>
                </p:selectBooleanCheckbox>
                <p:outputLabel for="@next" value="autoScrollToSelection" styleClass="text-secondary" />
                <p:selectBooleanCheckbox value="#{organigramView.autoScrollToSelection}">
                    <p:ajax process="@this" update=":form:organigram"/>
                </p:selectBooleanCheckbox>
                <p:outputLabel for="@next" value="leafNodeConnectorHeight" styleClass="text-secondary" />
                <p:inputText value="#{organigramView.leafNodeConnectorHeight}">
                    <p:ajax process="@this" update=":form:organigram"/>
                </p:inputText>
                <p:outputLabel for="@next" value="style" styleClass="text-secondary" />
                <p:inputText value="#{organigramView.style}" size="100">
                    <p:ajax process="@this" update=":form:organigram"/>
                </p:inputText>
            </h:panelGrid>
            <p:commandButton value="Scroll To Selection" onclick="PF('organigram').scrollToSelection(); return false;" styleClass="mt-3 mr-2" />
                <p:commandButton value="Update Organigram" update=":form:organigram" styleClass="mt-3" />
        </p:panel>
    </h:form>
</div>
 
package org.primefaces.showcase.view.data;
import org.primefaces.component.organigram.OrganigramHelper;
import org.primefaces.event.organigram.OrganigramNodeCollapseEvent;
import org.primefaces.event.organigram.OrganigramNodeDragDropEvent;
import org.primefaces.event.organigram.OrganigramNodeExpandEvent;
import org.primefaces.event.organigram.OrganigramNodeSelectEvent;
import org.primefaces.model.DefaultOrganigramNode;
import org.primefaces.model.OrganigramNode;
import java.io.Serializable;
import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
@Named
@ViewScoped
public class OrganigramView implements Serializable {
    private OrganigramNode rootNode;
    private OrganigramNode selection;
    private boolean zoom = false;
    private String style = "width: 800px";
    private int leafNodeConnectorHeight = 0;
    private boolean autoScrollToSelection = false;
    private String employeeName;
    @PostConstruct
    public void init() {
        selection = new DefaultOrganigramNode(null, "Ridvan Agar", null);
        rootNode = new DefaultOrganigramNode("root", "CommerceBay GmbH", null);
        rootNode.setCollapsible(false);
        rootNode.setDroppable(true);
        OrganigramNode softwareDevelopment = addDivision(rootNode, "Software Development", "Ridvan Agar");
        OrganigramNode teamJavaEE = addDivision(softwareDevelopment, "Team JavaEE");
        addDivision(teamJavaEE, "JSF", "Thomas Andraschko");
        addDivision(teamJavaEE, "Backend", "Marie Louise");
        OrganigramNode teamMobile = addDivision(softwareDevelopment, "Team Mobile");
        addDivision(teamMobile, "Android", "Andy Ruby");
        addDivision(teamMobile, "iOS", "Stevan Jobs");
        addDivision(rootNode, "Managed Services", "Thorsten Schultze", "Sandra Becker");
        OrganigramNode marketing = addDivision(rootNode, "Marketing");
        addDivision(marketing, "Social Media", "Ali Mente", "Lisa Boehm");
        addDivision(marketing, "Press", "Michael Gmeiner", "Hans Peter");
        addDivision(rootNode, "Management", "Hassan El Manfalouty");
    }
    protected OrganigramNode addDivision(OrganigramNode parent, String name, String... employees) {
        OrganigramNode divisionNode = new DefaultOrganigramNode("division", name, parent);
        divisionNode.setDroppable(true);
        divisionNode.setDraggable(true);
        divisionNode.setSelectable(true);
        if (employees != null) {
            for (String employee : employees) {
                OrganigramNode employeeNode = new DefaultOrganigramNode("employee", employee, divisionNode);
                employeeNode.setDraggable(true);
                employeeNode.setSelectable(true);
            }
        }
        return divisionNode;
    }
    public void nodeDragDropListener(OrganigramNodeDragDropEvent event) {
        FacesMessage message = new FacesMessage();
        message.setSummary("Node '" + event.getOrganigramNode().getData()
                + "' moved from " + event.getSourceOrganigramNode().getData() + " to '" + event.getTargetOrganigramNode().getData() + "'");
        message.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
    public void nodeSelectListener(OrganigramNodeSelectEvent event) {
        FacesMessage message = new FacesMessage();
        message.setSummary("Node '" + event.getOrganigramNode().getData() + "' selected.");
        message.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
    public void nodeCollapseListener(OrganigramNodeCollapseEvent event) {
        FacesMessage message = new FacesMessage();
        message.setSummary("Node '" + event.getOrganigramNode().getData() + "' collapsed.");
        message.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
    public void nodeExpandListener(OrganigramNodeExpandEvent event) {
        FacesMessage message = new FacesMessage();
        message.setSummary("Node '" + event.getOrganigramNode().getData() + "' expanded.");
        message.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
    public void removeDivision() {
        // re-evaluate selection - might be a differenct object instance if viewstate serialization is enabled
        OrganigramNode currentSelection = OrganigramHelper.findTreeNode(rootNode, selection);
        setMessage(currentSelection.getData() + " will entfernt werden.", FacesMessage.SEVERITY_INFO);
    }
    public void removeEmployee() {
        // re-evaluate selection - might be a differenct object instance if viewstate serialization is enabled
        OrganigramNode currentSelection = OrganigramHelper.findTreeNode(rootNode, selection);
        currentSelection.getParent().getChildren().remove(currentSelection);
    }
    public void addEmployee() {
        // re-evaluate selection - might be a differenct object instance if viewstate serialization is enabled
        OrganigramNode currentSelection = OrganigramHelper.findTreeNode(rootNode, selection);
        OrganigramNode employee = new DefaultOrganigramNode("employee", employeeName, currentSelection);
        employee.setDraggable(true);
        employee.setSelectable(true);
    }
    private void setMessage(String msg, FacesMessage.Severity severity) {
        FacesMessage message = new FacesMessage();
        message.setSummary(msg);
        message.setSeverity(severity);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
    public OrganigramNode getRootNode() {
        return rootNode;
    }
    public void setRootNode(OrganigramNode rootNode) {
        this.rootNode = rootNode;
    }
    public OrganigramNode getSelection() {
        return selection;
    }
    public void setSelection(OrganigramNode selection) {
        this.selection = selection;
    }
    public boolean isZoom() {
        return zoom;
    }
    public void setZoom(boolean zoom) {
        this.zoom = zoom;
    }
    public String getEmployeeName() {
        return employeeName;
    }
    public void setEmployeeName(String employeeName) {
        this.employeeName = employeeName;
    }
    public String getStyle() {
        return style;
    }
    public void setStyle(String style) {
        this.style = style;
    }
    public int getLeafNodeConnectorHeight() {
        return leafNodeConnectorHeight;
    }
    public void setLeafNodeConnectorHeight(int leafNodeConnectorHeight) {
        this.leafNodeConnectorHeight = leafNodeConnectorHeight;
    }
    public boolean isAutoScrollToSelection() {
        return autoScrollToSelection;
    }
    public void setAutoScrollToSelection(boolean autoScrollToSelection) {
        this.autoScrollToSelection = autoScrollToSelection;
    }
}